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.
![Geçersiz manifest anahtarına sahip bir uzantı, yüklenmeye çalışılırken hata iletişim kutusunu tetikliyor.](https://developer.chrome.google.cn/static/docs/extensions/get-started/tutorial/debug/image/an-extension-an-invalid-9ab91f867f94c.png?authuser=1&hl=tr)
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.
![Hata düğmesi tıklanıp bir hata gösteriliyor](https://developer.chrome.google.cn/static/docs/extensions/get-started/tutorial/debug/image/error-button-is-clicked-a7713a11553a.gif?authuser=1&hl=tr)
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.
![Tümünü temizle düğmesi](https://developer.chrome.google.cn/static/docs/extensions/get-started/tutorial/debug/image/clear-button-2f67dd9230519.png?authuser=1&hl=tr)
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.
![Uzantı hizmeti çalışanı için Geliştirici Araçları açılıyor.](https://developer.chrome.google.cn/static/docs/extensions/get-started/tutorial/debug/image/opening-devtools-the-ex-685e204e20773.png?authuser=1&hl=tr)
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.
![Hizmet çalışanı kaydı başarısız oldu. Durum kodu: 15 hata mesajı](https://developer.chrome.google.cn/static/docs/extensions/get-started/tutorial/debug/image/service-worker-registrati-9791df79120e6.png?authuser=1&hl=tr)
Asıl hata şundan sonra ortaya çıkar:
Uncaught TypeError: Cannot read properties of undefined (reading 'addListener')
![Yakalanmamış TypeError: Tanımlanmamış hata mesajının özellikleri okunamıyor](https://developer.chrome.google.cn/static/docs/extensions/get-started/tutorial/debug/image/uncaught-typeerror-canno-45ae014961338.png?authuser=1&hl=tr)
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.
![Uygulama panelindeki Service Worker durumu](https://developer.chrome.google.cn/docs/extensions/get-started/tutorial/debug/image/start-stop-service-worker.png?auto=format&w=845&authuser=1&hl=tr)
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.
![Uygulama panelindeki Service Worker durumu](https://developer.chrome.google.cn/docs/extensions/get-started/tutorial/debug/image/update-or-skipwaiting.png?auto=format&w=845&authuser=1&hl=tr)
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
![Uzantı Yönetimi sayfasında pop-up hatası görüntüleniyor](https://developer.chrome.google.cn/static/docs/extensions/get-started/tutorial/debug/image/extensions-management-pag-00a0f48a76239.png?authuser=1&hl=tr)
Pop-up'ı inceleyerek pop-up'ın Geliştirici Araçları'nı açabilirsiniz.
![Geliştirici Araçları pop-up hatası gösteriyor.](https://developer.chrome.google.cn/static/docs/extensions/get-started/tutorial/debug/image/devtools-displaying-popup-0ed24fd80361a.png?authuser=1&hl=tr)
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
![Web sayfası konsolunda uzantı hatası gösteriliyor](https://developer.chrome.google.cn/static/docs/extensions/get-started/tutorial/debug/image/extension-error-displayed-ca9d8c6c336b.png?authuser=1&hl=tr)
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.
![Yakalanmayan ReferenceError: Renk tanımlanmadı](https://developer.chrome.google.cn/static/docs/extensions/get-started/tutorial/debug/image/uncaught-referenceerror-e5847be3a7de9.png?authuser=1&hl=tr)
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.
![Pop-up ağ isteklerini görüntülemek için ağ panelinin içinde yenileyin](https://developer.chrome.google.cn/static/docs/extensions/get-started/tutorial/debug/image/refresh-inside-network-p-43993068e650e.gif?authuser=1&hl=tr)
İ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.