google-chrome-extension
Debug delle estensioni di Chrome

Utilizzo degli strumenti di sviluppo per eseguire il debug dell'estensione

Un'estensione cromata è separata in un massimo di 4 parti:

• la pagina di sfondo
• la pagina popup
• uno o più script di contenuto
• la pagina delle opzioni

Ogni parte, dal momento che sono innatamente separate, richiede il debug individuale.

Tieni presente che queste pagine sono separate, il che significa che le variabili non sono condivise direttamente tra loro e che un console.log() in una di queste pagine non sarà visibile nei registri di altre parti.

Utilizzando gli strumenti di sviluppo chrome:

Le estensioni di Chrome sono simili a debug di altre app web e pagine web. Il debugging viene eseguito più spesso con l'uso dell'ispector di chrome devtools aperto usando la scorciatoia da tastiera rispettivamente per windows e mac: ctrl + shift + i e cmd + shift + i o facendo clic con il tasto destro sulla pagina e selezionando inspect.

Dall'ispettore uno sviluppatore può controllare gli elementi html e il modo in cui il css li influenza, oppure utilizzare la console per controllare i valori delle variabili javascript e leggere gli output da qualsiasi console.log() s lo sviluppatore (i) impostato.

Ulteriori informazioni sull'utilizzo dell'ispettore sono disponibili su Chrome Devtools .

Ispezione del popup, della pagina delle opzioni e di altre pagine accessibili tramite chrome: //.....yourExtensionId.../:

È possibile accedere alla pagina popup e alla pagina delle opzioni semplicemente controllandole quando sono aperte.

Ulteriori pagine html che fanno parte dell'estensione, ma non sono né il popup né la pagina delle opzioni sono anch'esse debuggate allo stesso modo.

Ispezionando la pagina di sfondo:

Per accedere alla tua pagina di sfondo devi prima accedere alla pagina delle estensioni di Chrome su chrome: // extensions / . Assicurati che il segno di spunta "Modalità sviluppatore" sia abilitato.

Quindi fai clic sullo script di sfondo accanto a "Ispeziona viste" per ispezionare la tua pagina di sfondo.

Ispezione degli script di contenuto:

Gli script di contenuto corrono lungo i siti Web in cui sono stati inseriti. È possibile esaminare lo script del contenuto ispezionando prima il sito Web in cui è inserito lo script del contenuto. Nella console sarà possibile visualizzare tutti i file console.log() emessi dall'estensione, ma non sarà possibile modificare o ispezionare le variabili dello script del contenuto.

Per risolvere questo problema, devi fare clic sul menu a discesa solitamente impostato su 'top' e selezionare la tua estensione dall'elenco di estensioni.

Da lì avrai accesso alle variabili all'interno della tua estensione.