Hata ayıklama uzantıları

Uzantılar, web sayfalarıyla aynı Chrome Geliştirici Araçları'na erişebilir. Uzantılarla ilgili hata ayıklama konusunda uzman olmak için farklı uzantı bileşenlerinin günlüklerini ve hatalarını nasıl bulacağınızı bilmeniz gerekir. Bu eğitim, uzantınızda hata ayıklamayla ilgili temel teknikler sağlar.

Başlamadan önce

Bu kılavuzda, temel web geliştirme deneyiminiz olduğu varsayılır. Şunları okumanızı öneririz: Uzantı geliştirme iş akışına giriş için Geliştirmeyle İlgili Temel Bilgiler. Kullanıcı arayüzünü tasarlama, kullanıcı hakkında arayüz öğelerini kullanabilirsiniz.

Uzantıyı kırın

Bu eğitimde, her seferinde bir uzantı bileşeni bozulacak ve sorunun nasıl düzeltileceği gösterilmektedir. Sonraki bölüme geçmeden önce bir bölümde belirtilen hataları geri almayı unutmayın. GitHub'da Bozuk Renk örneğini indirerek başlayın.

Manifest dosyasında hata ayıkla

Öncelikle "version" anahtarını "versions" olarak değiştirerek manifest dosyasını bölelim:

manifest.json:

{
  "name": "Broken Background Color",
  "version": "1.0",
  "versions": "1.0",
  "description": "Fix an Extension!",
  ...
}

Şimdi uzantıyı yerel olarak yüklemeyi deneyelim. İlgili sorunu gösteren bir hata iletişim kutusu görürsünüz:

Failed to load extension
Required value version is missing or invalid. It must be between 1-4 dot-separated integers each between 0 and 65536.
Could not load manifest.

Manifest anahtarı geçersiz olduğunda uzantı yüklenemez ancak Chrome size sorunu nasıl çözeceğinizi öğreneceksiniz.

Bu değişikliği geri alın ve sonucu görmek için geçersiz bir izin girin. "activeTab" iznini "activetab" küçük harfli olacak şekilde değiştirin:

manifest.json:

{
  ...
  "permissions": ["activeTab", "scripting", "storage"],
  "permissions": ["activetab", "scripting", "storage"],
  ...
}

Uzantıyı kaydedin ve tekrar yüklemeyi deneyin. Bu kez başarıyla yüklenir. Uzantıda Yönetim sayfasında üç düğme görürsünüz: Ayrıntılar, Kaldır ve Hatalar. Hatalar düğme etiketi bir hata olduğunda kırmızı renge döner. Hatalar düğmesini tıklayarak şu hata oluştu:

Permission 'activetab' is unknown or URL pattern is malformed.

Devam etmeden önce izni tekrar değiştirin, günlükleri temizlemek için sağ üst köşedeki Tümünü temizle'yi tıklayın ve uzantıyı yeniden yükleyin.

ziyaret edin.

Hizmet çalışanında hata ayıklama

Günlükleri bulma

Hizmet çalışanı, varsayılan rengi Storage olarak ayarlar ve konsola kaydeder. Bu günlüğü görüntülemek için Görünümleri incele'nin yanındaki mavi bağlantıyı seçerek Chrome Geliştirici Araçları panelini açın.

ziyaret edin.

Hataları bulma

onInstalled değerini küçük harfli oninstalled olarak değiştirerek hizmet çalışanının altını çizelim:

service-worker.js:

// There's a typo in the line below;
// ❌ oninstalled should be ✅ onInstalled.
chrome.runtime.onInstalled.addListener(() => { 
chrome.runtime.oninstalled.addListener(() => { 
  chrome.storage.sync.set({ color: '#3aa757' }, () => {
    console.log('The background color is green.');
  });
});

Sayfayı yenileyin ve hata günlüğünü görüntülemek için Hatalar'ı tıklayın. İlk hata, hizmet çalışanının kaydedilemediğini gösterir. Bu durum, başlatma işlemi sırasında bir hata oluştuğu anlamına gelir:

Service worker registration failed. Status code: 15.

ziyaret edin.

Asıl hata şundan sonra geliyor:

Uncaught TypeError: Cannot read properties of undefined (reading 'addListener')

Oluşturduğumuz hatayı geri alın, sağ üst köşedeki Tümünü temizle'yi tıklayın ve uzantıyı yeniden yükleyin.

Hizmet çalışanı durumunu kontrol etme

Aşağıdaki adımları uygulayarak hizmet çalışanının uyandığı zamanı belirleyebilirsiniz:

1. "Görünümleri incele"nin üstündeki uzantı kimliğinizi kopyalayın.

   

2. Manifest dosyanızı tarayıcıda açın. Örneğin: text chrome-extension://YOUR_EXTENSION_ID/manifest.json
3. Dosyayı inceleyin.
4. Uygulama paneline gidin.
5. Service Workers (Hizmet Çalışanları) bölmesine gidin.

Kodunuzu test etmek için status (durum) seçeneğinin yanındaki bağlantıları kullanarak hizmet çalışanını başlatın veya durdurun.

Ayrıca, hizmet çalışanı kodunda değişiklik yaptıysanız değişiklikleri hemen uygulamak için Güncelle veya skipExpecting seçeneğini tıklayabilirsiniz.

ziyaret edin.

Pop-up'ta hata ayıkla

Uzantı doğru bir şekilde ilk kullanıma hazırlandığına göre, aşağıda vurgulanan satırları yorumlayarak pop-up'ı bölelim:

popup.js:

...
changeColorButton.addEventListener('click', (event) => {
  const color = event.target.value;

  // Query the active tab before injecting the content script
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => { 
    // Use the Scripting API to execute a script
    chrome.scripting.executeScript({
      target: { tabId: tabs[0].id },
      args: [color],
      func: setColor
    });
  });
});

Uzantı Yönetimi sayfasına geri dönün. Hatalar düğmesi yeniden görünür. Tıklamak için yeni günlüğü görüntüleyin. Aşağıdaki hata mesajı gösterilir:

Uncaught ReferenceError: tabs is not defined

Pop-up'ı inceleyerek pop-up'ın Geliştirici Araçları'nı açabilirsiniz.

tabs is undefined hatası, uzantının içerik komut dosyasını nereye yerleştireceğini bilmediğini söylüyor. tabs.query() numaralı telefonu arayıp etkin sekmeyi seçerek bu sorunu düzeltin.

Kodu güncellemek için sağ üst köşedeki Tümünü temizle düğmesini tıklayın ve ardından uzantısına sahip olur.

İçerik komut dosyalarında hata ayıklama

Şimdi "color" değişkenini değiştirerek içerik komut dosyasını açalım to "colors":

content.js:

...
function setColor(color) {
  // There's a typo in the line below;
  // ❌ colors should be ✅ color.
  document.body.style.backgroundColor = color;
  document.body.style.backgroundColor = colors;
}  

Sayfayı yenileyin, pop-up'ı açın ve yeşil kutuyu tıklayın. Hiçbir şey olmaz.

Uzantı Yönetimi sayfasına gittiğinizde Hatalar düğmesi görünmez. Bunun nedeni sadece çalışma zamanı hatalarının console.warning ve Uzantı Yönetimi sayfasında console.error kaydedildi.

İçerik komut dosyaları bir web sitesinin içinde çalışır. Bu hataları bulmak için uzantının değiştirmeye çalıştığı web sayfasını incelememiz gerekir:

Uncaught ReferenceError: colors is not defined

Geliştirici Araçları'nı içerik komut dosyası içinden kullanmak için üst kısımdaki açılır menü okunu tıklayın ve uzantıyı seçin.

Hata mesajında colors tanımlı değil. Uzantı, değişkeni doğru bir şekilde iletmiyor olmalıdır. Yerleştirilen komut dosyasını, renk değişkenini koda iletecek şekilde düzeltin.

Ağ isteklerini izleme

Pop-up genellikle gerekli tüm ağ isteklerini en hızlısı bile önce Geliştirici Araçları'nı açabilir. Bu istekleri görüntülemek için ağ panelinin içinden yenileyin. Google Geliştirici Araçları panelini kapatmadan pop-up'ı yeniden yükler.

İzinleri bildirme

Bazı uzantı API'leri izin gerektirir. İzinler makalesine ve Chrome'a bakın API'leri kullanarak bir uzantının manifest'te doğru izinleri istediğinden emin olun.

  {
    "name": "Broken Background Color",
    ...
    "permissions": [
      "activeTab",
      "declarativeContent",
      "storage"
    ],
  ...
  }

Daha fazla bilgi

Belgeleri okuyarak Chrome Geliştirici Araçları hakkında daha fazla bilgi edinin.