Hata ayıklama uzantıları

Uzantılar, Chrome Geliştirici Araçları'nın web sayfaları için sağladığı hata ayıklama avantajlarından yararlanabilir ancak benzersiz davranış özelliklerine sahiptir. Ana uzantı hata ayıklayıcı olmak için bu davranışların, uzantı bileşenlerinin birbirleriyle nasıl çalıştığını ve hataların nereye köşeye yerleştirileceğini bilmek gerekir. Bu eğitim, geliştiricilere uzantılarda hata ayıklamayla ilgili temel bilgiler verir.

Günlükleri bulma

Uzantılar birçok farklı bileşenden oluşur ve bu bileşenlerin kendine özgü sorumlulukları vardır. Farklı uzantı bileşenleriyle ilgili hata günlüklerini bulmaya başlamak için buradan bozuk bir uzantıyı indirin.

Arka plan komut dosyası

chrome://extensions adresindeki Chrome uzantıları yönetimi sayfasına gidin ve geliştirici modunun açık olduğundan emin olun. Paketlenmemiş Öğe Yükle düğmesini tıklayıp bozuk uzantı dizinini seçin. Uzantı yüklendikten sonra üç düğme görüntülenir: Ayrıntılar, Kaldır ve Hatalar. Kırmızı renkli harfler.

Hata günlüğünü görüntülemek için Hatalar düğmesini tıklayın. Uzantı sistemi, arka plan komut dosyasında bir sorun buldu.

Uncaught TypeError: Cannot read property 'addListener' of undefined

Ek olarak, Görünümleri incele'nin yanındaki mavi bağlantı seçilerek arka plan komut dosyası için Chrome Geliştirici Araçları paneli açılabilir.

Koda dönün.

chrome.runtime.oninstalled.addListener(function() {
  chrome.storage.sync.set({color: '#3aa757'}, function() {
    console.log('The color is green.');
  });
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    chrome.declarativeContent.onPageChanged.addRules([{
      conditions: [new chrome.declarativeContent.PageStateMatcher({
        pageUrl: {hostEquals: 'developer.chrome.com'},
      })],
      actions: [new chrome.declarativeContent.ShowPageAction()]
    }]);
  });
});

Arka plan komut dosyası, onInstalled etkinliğini dinlemeye çalışıyor ancak özellik adı için büyük harfli "I" harfi gerekiyor. Kodu doğru çağrıyı yansıtacak şekilde güncelleyin, sağ üst köşedeki Tümünü temizle düğmesini tıklayın ve uzantıyı yeniden yükleyin.

Pop-up

Uzantı artık doğru bir şekilde başlatıldığına göre diğer bileşenler test edilebilir. Bu sayfayı yenileyin veya yeni bir sekme açıp developer.chrome.com adresindeki herhangi bir sayfaya gidin, pop-up'ı açın ve yeşil kareyi tıklayın. Hiçbir şey olmaz.

Uzantılar Yönetimi Sayfasına geri dönün. Hatalar düğmesi tekrar gösterilecektir. Yeni günlüğü görüntülemek için bu günlüğü tıklayın.

Uncaught ReferenceError: tabs is not defined

Pop-up hataları, pop-up'ı inceleyerek de görüntülenebilir.

tabs is undefined hatası, uzantının içerik komut dosyasını nereye yerleştireceğini bilmediğini söylüyor. Bu durumu düzeltmek için tabs.query() yöntemini çağırın ve ardından etkin sekmeyi seçin.

  let changeColor = document.getElementById('changeColor');

  chrome.storage.sync.get('color', function(data) {
    changeColor.style.backgroundColor = data.color;
    changeColor.setAttribute('value', data.color);
  });

  changeColor.onclick = function(element) {
    let color = element.target.value;
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      chrome.tabs.executeScript(
          tabs[0].id,
          {code: 'document.body.style.backgroundColor = color;'});
    });
  };

Kodu güncelleyin, sağ üst köşedeki Tümünü temizle düğmesini tıklayın ve ardından uzantıyı yeniden yükleyin.

İçerik komut dosyası

Sayfayı yenileyin, pop-up'ı açın ve yeşil kutuyu tıklayın. Hayır, arka planın renkleri hâlâ değişmedi! Uzantı Yönetimi Sayfasına geri dönün. Hatalar düğmesini görmezsiniz. Bunun olası nedeni, web sayfası içinde çalışan içerik komut dosyasıdır.

Uzantının değiştirmeye çalıştığı web sayfasının Geliştirici Araçları panelini açın.

Yalnızca çalışma zamanı hataları, console.warning ve console.error, Uzantı Yönetimi Sayfası'na kaydedilir.

Geliştirici Araçları'nı içerik komut dosyasından kullanmak için üst öğesinin yanındaki açılır oku tıklayın ve uzantıyı seçin.

Hata mesajında color tanımlı değil. Uzantı, değişkeni doğru bir şekilde iletmiyor olmalıdır. Renk değişkenini koda geçirmek için yerleştirilen komut dosyasını düzeltin.

  {code: 'document.body.style.backgroundColor = "' + color + '";'});

Uzantı sekmeleri

Sayfaları geçersiz kıl ve tam sayfa seçenekleri gibi sekme olarak görüntülenen uzantı sayfalarının günlükleri, web sayfası konsolunda ve uzantı yönetimi sayfasında bulunabilir.

Ağ isteklerini izleme

Pop-up genellikle gerekli tüm ağ isteklerini, en hızlı geliştirici bile Geliştirici Araçları'nı açmadan önce yapar. Bu istekleri görüntülemek için ağ panelinden yenileyin. Pop-up, Geliştirici Araçları panelini kapatmadan yeniden yüklenir.

İzinleri beyan et

Uzantılar, web sayfalarındakiyle benzer özelliklere sahip olsa da genellikle çerezler, depolama ve Kaynaklar Arası XMLHttpRequsts gibi belirli özellikleri kullanmak için izin gerektirir. Bir uzantının manifestinde doğru izinleri istediğinden emin olmak için izinler makalesine ve kullanılabilir Chrome API'lerine bakın.

  {
    "name": "Broken Background Color",
    "version": "1.0",
    "description": "Fix an Extension!",
    "permissions": [
      "activeTab",
      "declarativeContent",
      "storage"
    ],
    "options_page": "options.html",
    "background": {
      "scripts": ["background.js"],
      "persistent": false
    },
    "page_action": {
      "default_popup": "popup.html",
      "default_icon": {
        "16": "images/get_started16.png",
        "32": "images/get_started32.png",
        "48": "images/get_started48.png",
        "128": "images/get_started128.png"
      }
    },
    "icons": {
      "16": "images/get_started16.png",
      "32": "images/get_started32.png",
      "48": "images/get_started48.png",
      "128": "images/get_started128.png"
    },
    "manifest_version": 2
  }

Sonraki adımlar

Uzantılarda hata ayıklama hakkında daha fazla bilgi edinmek için Geliştirme ve Hata Ayıklama başlıklı videoyu izleyin. Dokümanları okuyarak Chrome Geliştirici Araçları hakkında daha fazla bilgi edinin.