Uzantılar, web sayfalarıyla aynı Chrome Geliştirici Araçları'na erişebilir. Uzantılarda hata ayıklama konusunda uzman olmak için farklı uzantı bileşenlerine ait günlüklerin ve hataların nasıl bulunacağını 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. Uzantı geliştirme iş akışına giriş için Geliştirmeyle İlgili Temel Bilgiler'i okumanızı öneririz. Kullanıcı arayüzünü tasarlama, uzantılarda kullanılabilen kullanıcı arayüzü öğeleriyle ilgili temel bilgiler sağlar.
Uzantıyı kaldır
Bu eğitimde, her seferinde bir uzantı bileşeni bozulacak ve bunun nasıl düzeltileceği gösterilecektir. Sonraki bölüme geçmeden önce bir bölümde ortaya çıkan hataları geri almayı unutmayın. GitHub'da Bozuk Renk örneğini indirerek başlayın.
Manifest'te hata ayıkla
İlk olarak "version" anahtarını "versions" olacak şekilde değiştirerek manifest dosyasını ayıralım:
manifest.json:
{
"name": "Broken Background Color",
"version": "1.0",
"versions": "1.0",
"description": "Fix an Extension!",
...
}
Şimdi uzantıyı yerel olarak yüklemeyi deneyelim. Soruna işaret eden 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.
Bir manifest anahtarı geçersizse uzantı yüklenemez ancak Chrome, sorunun nasıl çözüleceğine dair size bir ipucu verir.
Bu değişikliği geri alın ve ne olduğunu görmek için geçersiz bir izin girin.
"activeTab" iznini, "activetab" değerini küçük harf olacak şekilde değiştirin:
manifest.json:
{
...
"permissions": ["activeTab", "scripting", "storage"],
"permissions": ["activetab", "scripting", "storage"],
...
}
Uzantıyı kaydedin ve tekrar yüklemeyi deneyin. Bu sefer başarıyla yüklenecektir. Uzantı Yönetimi sayfasında üç düğme görürsünüz: Ayrıntılar, Kaldır ve Hatalar. Hatalar düğmesi bir hata oluştuğunda kırmızıya döner. Aşağıdaki hatayı görmek için Hatalar düğmesini tıklayın:
Permission 'activetab' is unknown or URL pattern is malformed.
Devam etmeden önce izni tekrar değiştirin, günlükleri temizlemek ve uzantıyı yeniden yüklemek için sağ üst köşedeki Tümünü temizle'yi tıklayın.
Service Worker'da hata ayıklayın
Günlükleri bulma
Service Worker, varsayılan rengi depolama alanı olarak ayarlar ve bunu 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.
Hataları bulma
onInstalled değerini oninstalled küçük harf olacak şekilde değiştirerek Service Worker'ı çözelim:
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.');
});
});
Hata günlüğünü görüntülemek için sayfayı yenileyip Errors (Hatalar) seçeneğini tıklayın. İlk hata, Service Worker'ın kaydedilemediğini belirtir. Bu, başlatma sırasında bir sorun oluştuğu anlamına gelir:
Service worker registration failed. Status code: 15.
Asıl hata şundan sonra ortaya çıkar:
Uncaught TypeError: Cannot read properties of undefined (reading 'addListener')
Sunduğumuz hatayı geri alın, sağ üst köşedeki Tümünü temizle'yi tıklayın ve uzantıyı yeniden yükleyin.
Service Worker durumunu kontrol etme
Aşağıdaki adımları uygulayarak Service Worker'ın görev gerçekleştirmek üzere uyandığını belirleyebilirsiniz:
- "Görünümleri incele"nin üzerindeki uzantı kimliğinizi kopyalayın.
Uzantı Yönetimi sayfasındaki Uzantı Kimliği. - Manifest dosyanızı tarayıcıda açın. Örneğin:
text chrome-extension://YOUR_EXTENSION_ID/manifest.json - Dosyayı inceleyin.
- Uygulama paneline gidin.
- Service Workers bölmesine gidin.
Kodunuzu test etmek için status (durum) seçeneğinin yanındaki bağlantıları kullanarak Service Worker'ı başlatın veya durdurun.
Ayrıca, Service Worker kodunda değişiklik yaptıysanız bu değişikliklerin hemen uygulanması için Update (Güncelle) veya skip Waiting (atla) seçeneğini tıklayabilirsiniz.
Pop-up'ta hata ayıkla
Uzantı doğru bir şekilde başlatıldığına göre, aşağıda vurgulanan satırları yorumlayarak pop-up pencereyi 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 dönün. Hatalar düğmesi yeniden görünür. Yeni günlüğü görüntülemek için bunu tıklayın. 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() yöntemini çağırı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ıyı yeniden yükleyin.
İçerik komut dosyalarında hata ayıklama
Şimdi içerik komut dosyasını "color" değişkenini "colors" şeklinde değiştirerek kıralım:
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 giderseniz Hatalar düğmesi görünmez. Bunun nedeni, Uzantı Yönetimi sayfasında yalnızca çalışma zamanı hatalarının (console.warning ve
console.error) kaydedilmesidir.
İçerik komut dosyaları bir web sitesi içinde çalışır. Bu hataları bulmak için uzantının değiştirmeye çalıştığı web sayfasını denetlememiz gerekir:
Uncaught ReferenceError: colors is not defined
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, colors tanımlı değil. Uzantı, değişkeni doğru bir şekilde iletmiyor olmalıdır.
Renk değişkenini koda iletmek için yerleştirilen komut dosyasını düzeltin.
Ağ isteklerini izleme
Pop-up genellikle gerekli tüm ağ isteklerini, en hızlı geliştiriciler bile Geliştirici Araçları'nı açmadan oluşturur. Bu istekleri görüntülemek için ağ panelinden yenileyin. Pop-up, Geliştirici Araçları panelini kapatmadan yeniden yükler.
İzinleri bildirme
Bazı uzantı API'leri izin gerektirir. Bir uzantının manifest dosyasında doğru izinleri istediğinden emin olmak için izinler makalesine ve Chrome API'lerine bakın.
{
"name": "Broken Background Color",
...
"permissions": [
"activeTab",
"declarativeContent",
"storage"
],
...
}
Daha fazla bilgi
Dokümanları okuyarak Chrome Geliştirici Araçları hakkında daha fazla bilgi edinin.