Le estensioni possono accedere agli stessi Chrome DevTools delle pagine web. Per diventare esperto di debug delle estensioni, devi sapere come individuare i log e gli errori dei diversi componenti delle estensioni. Questo tutorial fornisce tecniche fondamentali per il debug dell'estensione.
Prima di iniziare
La presente guida presuppone che tu abbia esperienza di base nello sviluppo web. Ti consigliamo di leggere le Nozioni di base sullo sviluppo per un'introduzione al flusso di lavoro per lo sviluppo delle estensioni. Progetta l'interfaccia utente offre un'introduzione agli elementi dell'interfaccia utente disponibili nelle estensioni.
Interrompi l'estensione
Questo tutorial interrompe un componente dell'estensione alla volta e mostra come correggerlo. Ricordati di annullare i bug introdotti in una sezione prima di passare alla sezione successiva. Per iniziare, scarica l'esempio di colore non funzionante su GitHub.
Esegui il debug del manifest
Per prima cosa, rompiamo il file manifest modificando la chiave "version" in "versions":
manifest.json:
{
"name": "Broken Background Color",
"version": "1.0",
"versions": "1.0",
"description": "Fix an Extension!",
...
}
Ora proviamo a caricare l'estensione localmente. Verrà visualizzata una finestra di dialogo di errore che indica il problema:
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.
Quando una chiave manifest non è valida, l'estensione non viene caricata, ma Chrome ti suggerisce come risolvere il problema.
Annulla la modifica e inserisci un'autorizzazione non valida per vedere cosa succede.
Cambia l'autorizzazione "activeTab" in "activetab" minuscolo:
manifest.json:
{
...
"permissions": ["activeTab", "scripting", "storage"],
"permissions": ["activetab", "scripting", "storage"],
...
}
Salva l'estensione e prova a caricarla di nuovo. Questa volta dovrebbe essere caricato correttamente. Nella pagina di gestione delle estensioni vedrai tre pulsanti: Dettagli, Rimuovi ed Errori. L'etichetta del pulsante Errori diventa rossa in caso di errore. Fai clic sul pulsante Errori per visualizzare il seguente errore:
Permission 'activetab' is unknown or URL pattern is malformed.
Prima di continuare, ripristina l'autorizzazione, fai clic su Cancella tutto nell'angolo in alto a destra per cancellare i log e ricaricare l'estensione.
debug del service worker
Individuazione dei log
Il service worker imposta il colore predefinito su storage e lo registra nella console. Per visualizzare questo log, apri il riquadro Chrome DevTools selezionando il link blu accanto a Ispeziona visualizzazioni.
Errori di localizzazione
Interrompiamo il service worker modificando onInstalled in oninstalled minuscolo:
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.');
});
});
Aggiorna e fai clic su Errori per visualizzare il log degli errori. Il primo errore indica che la registrazione del service worker non è riuscita. Questo significa che si è verificato un problema durante l'avvio:
Service worker registration failed. Status code: 15.
L'errore effettivo si verifica dopo:
Uncaught TypeError: Cannot read properties of undefined (reading 'addListener')
Annulla il bug che abbiamo introdotto, fai clic su Cancella tutto nell'angolo in alto a destra e ricarica l'estensione.
Controllare lo stato del service worker
Puoi identificare quando il service worker si riattiva per eseguire le attività seguendo questi passaggi:
- Copia l'ID estensione che si trova sopra "Esamina visualizzazioni".
ID estensione nella pagina Gestione delle estensioni. - Apri il file manifest nel browser. Ad esempio:
text chrome-extension://YOUR_EXTENSION_ID/manifest.json - Esamina il file.
- Vai al riquadro Applicazione.
- Vai al riquadro Service worker.
Per testare il tuo codice, avvia o arresta il service worker utilizzando i link accanto a status.
Inoltre, se hai apportato modifiche al codice del service worker, puoi fare clic su Aggiorna o salta In attesa per applicare le modifiche immediatamente.
Esegui il debug del popup
Ora che l'estensione è stata inizializzata correttamente, interrompiamo il popup commentando le righe evidenziate di seguito:
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
});
});
});
Torna alla pagina Gestione delle estensioni. Il pulsante Errori viene visualizzato di nuovo. Fai clic per visualizzare il nuovo log. Viene visualizzato il seguente messaggio di errore:
Uncaught ReferenceError: tabs is not defined
Puoi aprire DevTools esaminando il popup.
L'errore tabs is undefined indica che l'estensione non sa dove inserire lo script dei contenuti.
Per correggere questo problema, chiama il numero tabs.query(), quindi seleziona la scheda attiva.
Per aggiornare il codice, fai clic sul pulsante Cancella tutto nell'angolo in alto a destra, quindi ricarica l'estensione.
Esegui il debug degli script di contenuti
Ora interrompiamo lo script dei contenuti modificando la variabile "color" in "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;
}
Aggiorna la pagina, apri il popup e fai clic sulla casella verde. Non succede nulla.
Se vai alla pagina Gestione delle estensioni, il pulsante Errori non viene visualizzato. Questo perché nella pagina Gestione delle estensioni vengono registrati solo gli errori di runtime, console.warning e console.error.
Gli script di contenuti vengono eseguiti all'interno di un sito web. Per trovare questi errori, dobbiamo controllare la pagina web che l'estensione sta cercando di modificare:
Uncaught ReferenceError: colors is not defined
Per utilizzare DevTools dallo script dei contenuti, fai clic sulla freccia del menu a discesa in alto e seleziona l'estensione.
L'errore indica che colors non è definito. L'estensione non deve trasmettere correttamente la variabile.
Correggi lo script inserito in modo che passi la variabile del colore nel codice.
Monitora le richieste di rete
Il popup spesso esegue 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. Ricarica il popup senza chiudere il riquadro DevTools.
Dichiara le autorizzazioni
Alcune API delle estensioni richiedono le autorizzazioni. Consulta l'articolo sulle autorizzazioni e le API di Chrome per assicurarti che un'estensione richieda le autorizzazioni corrette nel file manifest.
{
"name": "Broken Background Color",
...
"permissions": [
"activeTab",
"declarativeContent",
"storage"
],
...
}
Per approfondire
Scopri di più sugli Strumenti per sviluppatori di Chrome leggendo la documentazione.