Uzantılar, Chrome Geliştirici Araçları'nın web için sağladığı hata ayıklama avantajlarından yararlanabilir ancak benzersiz davranış özelliklerine sahiptir. Ana uzantı hata ayıklayıcısı olmak için uzantı bileşenlerinin birlikte nasıl çalıştığını ve köşeyi yeniden hatalar. Bu eğitim, geliştiricilere uzantılarla ilgili hata ayıklama ile ilgili temel bilgiler sunar.
Günlükleri bulma
Uzantılar birçok farklı bileşenden oluşur ve bu bileşenlerin her biri sorumluluklar olduğunu unutmayın. Farklı sitelerin hata günlüklerini bulmaya başlamak için buradan bozuk bir uzantıyı indirin uzantı bileşenlerini kullanabilirsiniz.
Arka plan komut dosyası
chrome://extensions adresindeki Chrome uzantı yönetimi sayfasına gidin ve geliştirici modundan emin olun
açık olduğundan emin olun. Paketlenmemiş Yükle düğmesini tıklayın ve bozuk uzantı dizinini seçin.
Uzantı yüklendiğinde üç düğme bulunur: Ayrıntılar, Kaldır ve kırmızı renkli Hatalar
anlamına gelir.
Hata günlüğünü görüntülemek için Hatalar düğmesini tıklayın. Uzantılar sistemi şurada bir sorun buldu: arka plan komut dosyası.
Uncaught TypeError: Cannot read property 'addListener' of undefined
Ayrıca Chrome Geliştirici Araçları paneli, arka plan komut dosyası için Görünümleri incele'nin yanındaki mavi bağlantıyı tıklayın.
Koda geri 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
adında büyük harf olan "I" gerekir. Kodu doğru çağrıyı yansıtacak şekilde güncelleyin, Temizle
tümü düğmesini tıklayıp uzantıyı yeniden yükleyin.
Pop-up
Uzantı doğru şekilde ilk kullanıma hazırlandığına göre diğer bileşenler test edilebilir. Bu sayfayı yenileyin veya yeni bir sekme açın ve developer.chrome.com adresine gidip herhangi bir sayfaya gidin, pop-up'ı açın ve yeşil renkli kare. Üstelik hiçbir şey olmuyor.
Uzantı Yönetimi Sayfası'na geri dönün. Hatalar düğmesi yeniden görünür hale gelir. Tıklamak için yeni günlüğü görüntüleyin.
Uncaught ReferenceError: tabs is not defined
Pop-up hataları, pop-up'ı inceleyerek de görüntülenebilir.
tabs is undefined hatası, uzantının içerik komut dosyasını nereye yerleştireceğini bilmediğini söylüyor.
Bu sorun, tabs.query() yöntemi çağrıldıktan sonra 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ısına sahip olur.
İçerik komut dosyası
Sayfayı yenileyin, pop-up'ı açın ve yeşil kutuyu tıklayın. Arka planda hâlâ boş renk değiştirildi! Uzantı Yönetimi Sayfası'na geri dönün. Burada herhangi bir Hata bulunmaz düğmesini tıklayın. Bunun olası nedeni, web sayfasının içinde ç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.
Uzantılarda yalnızca çalışma zamanı hataları (console.warning ve console.error) kaydedilecek.
Yönetim Sayfası.
İçerik komut dosyası içinden Geliştirici Araçları'nı kullanmak için üst seçeneğinin yanındaki açılır oku tıklayın ve tıklayın.
Hata mesajında color 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.
{code: 'document.body.style.backgroundColor = "' + color + '";'});
Uzantı sekmeleri
Sekme olarak görüntülenen uzantı sayfalarının günlükleri (örneğin, sayfaları geçersiz kılma ve tam sayfa seçenekleri) , web sayfası konsolunda ve uzantı yönetimi sayfasında bulunabilir.
Ağ isteklerini izleme
Pop-up genellikle gerekli tüm ağ isteklerini Geliştirici Araçları'nı açabilir. Bu istekleri görüntülemek için ağ panelinin içinden yenileyin. Bu Geliştirici Araçları panelini kapatmadan pop-up'ı yeniden yükleyin.
İzinleri bildirme
Uzantılar web sayfalarıyla benzer özelliklere sahip olsa da, belirli web sayfalarını kullanmak için genellikle izin çerezler, depolama ve Cross-Origin XMLHttpRequsts gibi özellikleri. Daha fazla bilgi için izinler makalesi ve mevcut Chrome API'lerini inceleyerek bir uzantının manifest dosyasında doğru izinleri bulunmalıdır.
{
"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ıların hata ayıklaması hakkında daha fazla bilgi edinmek için Geliştirme ve Hata Ayıklama bölümünü izleyin. Daha fazla bilgi edinin Chrome Geliştirici Araçları hakkında daha fazla bilgi edinmek için dokümanları okuyun.