Dove leggere i messaggi della console da background.js in un'estensione di Chrome?

195

Ho appena iniziato con le estensioni di Google Chrome e non riesco a accedere alla console dal mio js in background. Quando si verifica un errore (ad esempio a causa di un errore di sintassi), non riesco a trovare alcun messaggio di errore.

Il mio file manifest:

{
  "name": "My First Extension",
  "version": "1.0",
  "manifest_version": 2,
  "description": "The first extension that I made.",
  "browser_action": {
    "default_icon": "icon.png"
  },
  "background": {
    "scripts": ["background.js"]
  },
  "permissions": [
    "pageCapture",
    "tabs"
  ]
}

background.js:

alert("here");
console.log("Hello, world!")

Quando carico l'estensione, viene visualizzato l'avviso ma non vedo nulla che viene registrato sulla console. Che cosa sto facendo di sbagliato?

— grasaved
fonte

2

possibile duplicato di Come eseguire il debug dello script in background di Google Chrome?

— ripper234,

Seleziona i messaggi o le informazioni se la barra evidenziata si trova su altre schede come Nessuna scheda selezionata

— siluveru kiran kumar

377

Stai guardando nel posto sbagliato. I messaggi della console registrata non vengono visualizzati nella pagina Web, ma nella pagina di sfondo (invisibile). Per visualizzare questi messaggi nella console, attenersi alla seguente procedura:

Visita chrome://extensions/.
Puoi anche fare clic con il tasto destro sull'icona dell'estensione, quindi fare clic su "Gestisci estensioni".

Abilita modalità sviluppatore
Fai clic sul collegamento della pagina di sfondo (in "Ispeziona viste").
La console per sviluppatori si apre per questa pagina .

Nuova interfaccia utente:

Vecchia interfaccia utente:

— Rob W
fonte

@RobW, non ho il pulsante triangolare per espandere l'estensione e non vedo alcuna vista attiva. Questa risposta non è più la soluzione per l'ultima versione di Chrome o mi sto perdendo qualcosa?

— Gwg

1

@ggundersen Ho aggiornato la foto. Il triangolo è stato rimosso, quel passaggio ora si verifica automaticamente quando viene attivata la modalità sviluppatore.

— Rob W,

come eseguire il debug degli script dei contenuti?

— SuperUberDuper il

1

@SuperUberDuper Tramite i devtools nella scheda in cui è in esecuzione lo script del contenuto.

— Rob W,

13

Ho avuto lo stesso problema, nel mio caso la registrazione era impostata su "Nascondi tutto" nella scheda della console negli strumenti di sviluppo di Chrome. Non mi ero nemmeno reso conto che fosse un'opzione e non ricordo di averlo spento

— Michiel
fonte

7

Per i follower che desiderano vedere la console di debug per uno "script di contenuto" della loro estensione di Chrome, è disponibile facendo una normale "mostra console di sviluppo", quindi usa la freccia a discesa per selezionare il suo "ambiente javascript", quindi avrai accesso ai suoi metodi, ecc.

— rogerdpack
fonte

5

Inoltre

se vuoi vedere il content_scriptfile js (quando la proprietà "background" non è impostata) in manifest.json

"content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["popup.js"],
  }]

"browser_action": {
    "default_icon": "icon_32.png",
    "default_popup": "popup.html"
  }

quindi fai clic destro sull'icona dell'estensione e fai clic su Controlla popup e la finestra dello sviluppatore si apre con popup.html aperto, lì vedi la scheda della console.

— diEcho
fonte

9

1) Questo non risponde alla domanda, 2) Questo è semplicemente sbagliato; lo script del contenuto registra i messaggi nella console della pagina in cui viene iniettato, ovvero nella scheda del browser effettiva. Suppongo che nel tuo codice, sia popup.jsstato riutilizzato in popup.html, e come tale l'output di quella copia vada nel posto che hai citato. Ma è totalmente fuorviante.

— Xan,

2

questa risposta mi aiuta a controllare il registro dell'estensione Chrome eseguita come popup

— RashFlash

1

Simile alla risposta di Michiel, avevo anche una configurazione di console divertente: un filtro che non ricordo di aver impostato:

Dopo aver cancellato il filtro ho visto i messaggi.

— Tonio Liebrand
fonte

1

Se vogliamo leggere i messaggi stampati sulla console dalla pagina popup, possiamo fare clic sull'icona dell'estensione per aprire la pagina popup, quindi fare clic con il pulsante destro del mouse sulla pagina popup ovunque, verrà visualizzato un menu a discesa, fare clic sul menu "Ispeziona" per apri lo strumento sviluppatore. Si noti che la pagina popup deve essere aperta. Se è chiuso (da window.close ()), anche lo strumento sviluppatore verrà chiuso.

— Token Yi
fonte

0

Ho avuto anche questo problema. Sembra che la mia pagina web non si stia aggiornando allo script appena salvato. Ciò è stato risolto premendo Ctrl+ aggiorna (o Ctrl+ F5) nel browser Chrome.