Wo kann man Konsolennachrichten aus background.js in einer Chrome-Erweiterung lesen?

194

Ich habe gerade mit Google Chrome-Erweiterungen angefangen und kann mich anscheinend nicht von meinem Hintergrund-JS aus bei der Konsole anmelden. Wenn ein Fehler auftritt (z. B. aufgrund eines Syntaxfehlers), kann ich auch keine Fehlermeldungen finden.

Meine Manifestdatei:

{
  "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!")

Wenn ich die Erweiterung lade, wird die Warnung angezeigt, aber es wird nichts an der Konsole protokolliert. Was mache ich falsch?

— grasaved
quelle

2

Mögliches Duplikat von Wie debugge ich ein Google Chrome-Hintergrundskript?

— Ripper234

Bitte wählen Sie Nachrichten oder Informationen , wenn markierte Leiste auf anderen Registerkarten wie keine ausführlichen ist Registerkarte Angelegenheiten ausgewählt

— siluveru Kiran Kumar

375

Du siehst am falschen Ort. Protokollierte Konsolenmeldungen werden nicht auf der Webseite, sondern auf der (unsichtbaren) Hintergrundseite angezeigt. Gehen Sie folgendermaßen vor, um diese Meldungen in der Konsole anzuzeigen:

Besuchen Sie chrome://extensions/.
Sie können auch mit der rechten Maustaste auf das Erweiterungssymbol klicken und dann auf "Erweiterungen verwalten" klicken.

Aktivieren Sie den Entwicklermodus
Klicken Sie auf den Link Ihrer Hintergrundseite (unter "Ansichten überprüfen").
Die Entwicklerkonsole wird für diese Seite geöffnet .

Neue Benutzeroberfläche:

Alte Benutzeroberfläche:

— Rob W.
quelle

@RobW, ich habe keine dreieckige Schaltfläche zum Erweitern der Erweiterung und sehe keine aktiven Ansichten. Ist diese Antwort nicht mehr die Lösung für den neuesten Chrome-Build oder fehlt mir etwas?

— GWG

1

@ggundersen Ich habe das Bild aktualisiert. Das Dreieck wurde entfernt. Dieser Schritt wird jetzt automatisch ausgeführt, wenn der Entwicklermodus aktiviert ist.

— Rob W

Wie debuggen Sie dann Inhaltsskripte?

— SuperUberDuper

1

@SuperUberDuper Über die Devtools auf der Registerkarte, auf der das Inhaltsskript ausgeführt wird.

— Rob W

13

Ich hatte das gleiche Problem. In meinem Fall wurde die Protokollierung auf der Registerkarte "Konsole" der Chrome Developer-Tools auf "Alle ausblenden" gesetzt. Ich hatte nicht einmal bemerkt, dass dies eine Option war, und ich kann mich nicht erinnern, sie ausgeschaltet zu haben

— Michiel
quelle

7

Für Follower, die die Debug-Konsole für ein "Inhaltsskript" ihrer Chrome-Erweiterung anzeigen möchten, können Sie eine normale "Show Developer Console" ausführen und dann mithilfe des Dropdown-Pfeils die "Javascript-Umgebung" auswählen. Anschließend haben Sie Zugriff zu seinen Methoden usw.

— Rogerdpack
quelle

5

zusätzlich

Wenn Sie die content_scriptjs-Datei (wenn die Eigenschaft "background" nicht festgelegt ist) in manifest.json anzeigen möchten

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

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

Klicken Sie dann mit der rechten Maustaste auf das Erweiterungssymbol und klicken Sie auf Popup überprüfen. Das Entwicklerfenster wird mit geöffneter popup.html geöffnet. Dort sehen Sie die Registerkarte Konsole.

— diEcho
quelle

9

1) Dies beantwortet die Frage nicht. 2) Dies ist einfach falsch. Das Inhaltsskript protokolliert Nachrichten in der Konsole der Seite, in die es eingefügt wurde, dh auf der eigentlichen Browser-Registerkarte. Ich nehme an, in Ihrem Code popup.jswurde in der wiederverwendet popup.html, und als solche geht die Ausgabe dieser Kopie an die Stelle, die Sie erwähnt haben. Aber es ist total irreführend.

— Xan

2

Diese Antwort hilft mir, das Protokoll der Chrome-Erweiterung zu überprüfen, die als Popup ausgeführt wird

— RashFlash

1

Ähnlich wie bei der Antwort von Michiel hatte ich auch eine lustige Konsolenkonfiguration: Ein Filter, an den ich mich nicht erinnern kann:

Nach dem Löschen des Filters sah ich die Meldungen.

— Tonio Liebrand
quelle

1

Wenn wir Nachrichten lesen möchten, die von der Popup-Seite auf die Konsole gedruckt wurden, können wir auf das Erweiterungssymbol klicken, um die Popup-Seite zu öffnen. Klicken Sie dann mit der rechten Maustaste auf die Popup-Seite. Ein Dropdown-Menü wird angezeigt. Klicken Sie einfach auf "Überprüfen" Öffnen Sie das Entwicklertool. Beachten Sie, dass die Popup-Seite weiterhin geöffnet sein muss. Wenn es geschlossen wird (von window.close ()), wird auch das Entwicklertool geschlossen.

— Token Yi
quelle

0

Ich hatte auch dieses Problem. Es scheint, als würde meine Webseite nicht auf das neu gespeicherte Skript aktualisiert. Dies wurde durch Drücken von Ctrl+ Aktualisieren (oder Ctrl+ F5) im Chrome-Browser behoben .