Hata ayıklama uzantıları

Uzantılar, Chrome Geliştirici Araçları'nın web sayfaları için sunduğu hata ayıklama avantajlarından yararlanabilir ancak benzersiz davranış özelliklerine sahiptir. Uzman bir uzantı hata ayıklayıcı olmak için bu davranışları, uzantı bileşenlerinin birbirleriyle nasıl çalıştığını ve hataları nerede bulacağınızı anlamanız gerekir. Bu eğitim, geliştiricilere uzantılarda hata ayıklama hakkında temel bilgiler sunar.

Günlükleri bulma

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

Arka plan komut dosyası

chrome://extensions adresindeki Chrome uzantıları yönetim sayfasına gidin ve geliştirici modunun açık olduğundan emin olun. Sıkıştırılmamış Dosyayı Yükle düğmesini tıklayın ve bozuk uzantı dizinini seçin. Uzantı yüklendikten sonra üç düğme gösterilir: Ayrıntılar, Kaldır ve kırmızı renkli Hatalar.

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

Uncaught TypeError: Cannot read property 'addListener' of undefined

Ayrıca, Görünümleri incele'nin yanındaki mavi bağlantıyı seçerek arka plan komut dosyası için Chrome Geliştirici Araçları panelini açabilirsiniz.

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ı büyük harfli "I" gerektiriyor. 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 ardından uzantıyı yeniden yükleyin.

Pop-up

Uzantı doğru ş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. Ve... hiçbir şey olmuyor.

Uzantı Yönetimi sayfasına geri dönün. Hatalar düğmesi yeniden görünür. Yeni günlüğü görüntülemek için 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 belirtir. Bu durum, tabs.query() yöntemi çağrılıp etkin sekme seçilerek düzeltilebilir.

  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. Ve... hayır, arka planın rengi hâlâ değişmedi. Uzantı Yönetimi sayfasına geri dönün. Hatalar düğmesi yok. Bunun nedeni, web sayfasında ç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.

Uzantı Yönetimi sayfasına yalnızca çalışma zamanında oluşan hatalar (console.warning ve console.error) kaydedilir.

Geliştirici Araçları'nı içerik komut dosyasından kullanmak için üst seçeneğinin 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 şekilde iletmiyordur. Renk değişkenini koda iletecek şekilde eklenmiş komut dosyasını düzeltin.

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

Uzatma sekmeleri

Sekme olarak görüntülenen uzantı sayfalarının günlükleri (ör. sayfaları geçersiz kılma ve tam sayfa seçenekleri) web sayfası konsolunda ve uzantı yönetimi sayfasında bulunabilir.

Ağ isteklerini izleme

Pop-up, genellikle en hızlı geliştiriciler bile DevTools'u açmadan önce gerekli tüm ağ isteklerini yapar. Bu istekleri görüntülemek için ağ panelinden yenileyebilirsiniz. Bu işlem, DevTools panelini kapatmadan pop-up'ı yeniden yükler.

İzinleri beyan etme

Uzantılar web sayfalarıyla benzer özelliklere sahip olsa da genellikle çerezler, depolama ve Kaynak Arasında XMLHttpRequsts gibi belirli özellikleri kullanmak için izin almaları gerekir. Bir uzantının manifest doğru izinleri istediğinden emin olmak için izinler makalesine ve mevcut 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ıların hatalarını 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.