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