Uzantılar, Chrome Geliştirici Araçları'nın web sayfaları için sağladığı hata ayıklama avantajlarından yararlanabilir ancak benzersiz davranış özelliklerine sahiptir. Usta bir uzantı hata ayıklayıcısı olmak için bu davranışları, uzantı bileşenlerinin birbirleriyle nasıl çalıştığını ve hataları nerede yakalayacağınızı anlamanız gerekir. Bu eğitim, geliştiricilere uzantılarda hata ayıklama hakkında temel bilgiler verir.
Günlükleri bulma
Uzantılar birçok farklı bileşenden oluşur ve bu bileşenlerin ayrı ayrı sorumlulukları vardır. Farklı uzantı bileşenleriyle ilgili 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 etkin olduğundan emin olun. Load Unpacked (Paketi Açılmamış Olarak Yükle) düğmesini tıklayın ve bozuk uzantı dizinini seçin. Uzantı yüklendikten sonra üç düğme görünür: Ayrıntılar, Kaldır ve kırmızı harflerle Hatalar.
Hata günlüğünü görüntülemek için Hatalar düğmesini tıklayın. Uzantı sistemi, arka plan komut dosyasında bir sorun buldu.
Uncaught TypeError: Cannot read property 'addListener' of undefined
Ayrıca, Görünümleri incele'nin yanındaki mavi bağlantı seçilerek arka plan komut dosyası için Chrome Geliştirici Araçları paneli açılabilir.
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ında büyük harfli "I" kullanılması gerekiyor. 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 uzantıyı yeniden yükleyin.
Pop-up
Uzantı artık 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 olmaz.
Uzantı Yönetimi Sayfası'na geri döndüğünüzde Hatalar düğmesi yeniden görünür. Yeni günlüğü görüntülemek için bu seçeneği tıklayın.
Uncaught ReferenceError: tabs is not defined
Pop-up hataları, pop-up incelenerek 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 sorun, 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 uzantıyı yeniden yükleyin.
İçerik komut dosyası
Sayfayı yenileyin, açılır pencereyi 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öndüğünüzde Hatalar düğmesinin olmadığını görürsünüz. Büyük olasılıkla suçlu, 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.
Yalnızca çalışma zamanı hataları, console.warning ve console.error, uzantı yönetimi sayfasında kaydedilir.
Geliştirici Araçları'nı içerik komut dosyasından kullanmak için top'ın yanındaki açılır liste okunu tıklayın ve uzantıyı seçin.
Hata mesajında color tanımlı olmadığı belirtiliyor. Uzantı, değişkeni doğru şekilde iletmiyor olabilir.
Renk değişkenini koda aktarmak için eklenen komut dosyasını düzeltin.
{code: 'document.body.style.backgroundColor = "' + color + '";'});
Uzantı sekmeleri
Sekme olarak gösterilen uzantı sayfalarının (ör. geçersiz kılma sayfaları ve tam sayfa seçenekleri) günlükleri web sayfası konsolunda ve uzantı yönetimi sayfasında bulunabilir.
Ağ isteklerini izleme
Pop-up, en hızlı geliştiriciler bile Geliştirici Araçları'nı açamadan önce genellikle gerekli tüm ağ isteklerini yapar. Bu istekleri görüntülemek için ağ panelinden yenileyin. Geliştirici Araçları panelini kapatmadan pop-up'ı yeniden yükler.
İzinleri tanımlama
Uzantılar, web sayfalarına benzer özelliklere sahip olsa da genellikle çerezler, depolama ve kaynaklar arası XMLHttpRequest gibi belirli özellikleri kullanmak için izin gerektirir. Bir uzantının manifest dosyasında doğru izinleri istediğinden emin olmak için izinler makalesini ve kullanılabilen Chrome API'lerini inceleyin.
{
"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ılarda hata ayıklama hakkında daha fazla bilgi 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.