Le estensioni possono sfruttare gli stessi vantaggi di debug che Chrome DevTools offre per le pagine web, ma hanno proprietà di comportamento uniche. Per diventare un debugger di estensioni esperto, è necessario comprendere questi comportamenti, il funzionamento dei componenti delle estensioni e dove trovare i bug. Questo tutorial fornisce agli sviluppatori una comprensione di base del debug delle estensioni.
Individuare i log
Le estensioni sono composte da molti componenti diversi e questi componenti hanno responsabilità individuali. Scarica un'estensione danneggiata qui per iniziare a individuare i log degli errori per i diversi componenti dell'estensione.
Script di background
Vai alla pagina di gestione delle estensioni di Chrome all'indirizzo chrome://extensions e assicurati che la modalità sviluppatore
sia attiva. Fai clic sul pulsante Carica non pacchettizzata e seleziona la directory dell'estensione danneggiata. Una volta caricata l'estensione, dovrebbero essere presenti tre pulsanti: Dettagli, Rimuovi ed Errori in rosso.
Fai clic sul pulsante Errori per visualizzare il log degli errori. Il sistema di estensioni ha rilevato un problema nello script di sfondo.
Uncaught TypeError: Cannot read property 'addListener' of undefined
Inoltre, il pannello Chrome DevTools può essere aperto per lo script di sfondo selezionando il link blu accanto a Ispeziona visualizzazioni.
Torna al codice.
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()]
}]);
});
});
Lo script di sfondo sta tentando di rimanere in ascolto per l'evento onInstalled, ma il nome della proprietà
richiede una "I" maiuscola. Aggiorna il codice in modo che rifletta la chiamata corretta, fai clic sul pulsante Cancella
tutto nell'angolo in alto a destra, quindi ricarica l'estensione.
Popup
Ora che l'estensione viene inizializzata correttamente, è possibile testare altri componenti. Aggiorna questa pagina oppure apri una nuova scheda e vai a una pagina qualsiasi su developer.chrome.com, apri il popup e fai clic sul quadrato verde. E… non succede nulla.
Torna alla pagina di gestione delle estensioni, il pulsante Errori è di nuovo visibile. Fai clic per visualizzare il nuovo log.
Uncaught ReferenceError: tabs is not defined
Gli errori dei popup possono essere visualizzati anche esaminando il popup.
L'errore tabs is undefined indica che l'estensione non sa dove inserire lo script di contenuti.
Questo problema può essere corretto chiamando il metodo tabs.query() e poi selezionando la scheda attiva.
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;'});
});
};
Aggiorna il codice, fai clic sul pulsante Cancella tutto nell'angolo in alto a destra, quindi ricarica l'estensione.
Script di contenuti
Aggiorna la pagina, apri il popup e fai clic sulla casella verde. E... no, lo sfondo non ha ancora cambiato colore. Torna alla pagina di gestione delle estensioni e… non c'è il pulsante Errori. Il probabile colpevole è lo script dei contenuti, che viene eseguito all'interno della pagina web.
Apri il riquadro DevTools della pagina web che l'estensione sta tentando di modificare.
Nella pagina di gestione delle estensioni verranno registrati solo gli errori di runtime, console.warning e console.error.
Per utilizzare DevTools all'interno dello script dei contenuti, fai clic sulla freccia del menu a discesa accanto a In alto e seleziona l'estensione.
L'errore indica che color non è definito. L'estensione non deve passare la variabile correttamente.
Correggi lo script inserito per passare la variabile colore nel codice.
{code: 'document.body.style.backgroundColor = "' + color + '";'});
Schede delle estensioni
I log delle pagine delle estensioni visualizzate come scheda, ad esempio le pagine di override e le opzioni a pagina intera, si trovano nella console della pagina web e nella pagina di gestione delle estensioni.
Monitorare le richieste di rete
Il popup spesso effettua tutte le richieste di rete necessarie prima ancora che gli sviluppatori più veloci possano aprire DevTools. Per visualizzare queste richieste, aggiorna dall'interno del riquadro Rete. Il popup verrà ricaricato senza chiudere il riquadro DevTools.
Dichiarare le autorizzazioni
Sebbene le estensioni abbiano funzionalità simili a quelle delle pagine web, spesso hanno bisogno dell'autorizzazione per utilizzare determinate funzionalità, come cookie, spazio di archiviazione e XMLHttpRequest tra origini. Consulta l'articolo sulle autorizzazioni e le API Chrome disponibili per assicurarti che un'estensione richieda le autorizzazioni corrette nel suo manifest.
{
"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
}
Passaggi successivi
Per ulteriori informazioni sul debug delle estensioni, guarda Developing and Debugging. Scopri di più su Chrome DevTools leggendo la documentazione.