Le estensioni possono accedere agli stessi Chrome DevTools delle pagine web. Per diventare un esperto nel debug delle estensioni, devi sapere come individuare i log e gli errori dei diversi componenti dell'estensione. Questo tutorial fornisce tecniche fondamentali per il debug dell'estensione.
Prima di iniziare
Questa guida presuppone che tu abbia esperienza di base nello sviluppo web. Ti consigliamo di leggere Nozioni di base sullo sviluppo per un'introduzione al flusso di lavoro di sviluppo delle estensioni. Progettare l'interfaccia utente fornisce un'introduzione agli elementi dell'interfaccia utente disponibili nelle estensioni.
Interrompere l'estensione
Questo tutorial analizzerà un componente dell'estensione alla volta e poi mostrerà come risolverlo. Ricorda di annullare i bug introdotti in una sezione prima di passare alla sezione successiva. Inizia scaricando l'esempio di colore errato su GitHub.
Eseguire il debug del manifest
Innanzitutto, dividiamo il file manifest cambiando la chiave "version" in "versions":
manifest.json:
{
"name": "Broken Background Color",
"version": "1.0",
"versions": "1.0",
"description": "Fix an Extension!",
...
}
Ora prova a caricare l'estensione localmente. Viene 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 fornisce un suggerimento su come risolvere il problema.
Annulla la modifica e inserisci un'autorizzazione non valida per vedere cosa succede.
Modifica l'autorizzazione "activeTab" in minuscolo "activetab":
manifest.json:
{
...
"permissions": ["activeTab", "scripting", "storage"],
"permissions": ["activetab", "scripting", "storage"],
...
}
Salva l'estensione e prova a caricarla di nuovo. Questa volta dovrebbe caricarsi 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.
Eseguire il debug del servizio worker
Individuare i log
Il service worker imposta il colore predefinito per lo spazio di archiviazione e lo registra nella console. Per visualizzare questo log, apri il riquadro di Chrome DevTools selezionando il link blu accanto a Visualizza ispezioni.
