google-chrome-extension
Integration des Entwickler-Tools

Programmatische Haltepunkt-Hinweis

Fügen Sie die Debugger-Anweisung Ihrem Inhaltsskript hinzu

var foo = 1;
debugger;

foo = 2;

Öffnen Sie das Developer Tool auf der Webseite, in die Ihr Inhaltsskript eingefügt wird, um die Codeausführung in diesen Zeilen anzuhalten.

Debuggen der Hintergrundseite / des Skripts

Das Hintergrundskript ist wie jeder andere JavaScript-Code. Sie können mit den gleichen Tools debuggen, mit denen Sie anderen JavaScript-Code in Chrome debuggen.

Um die Chrome Developer Tools zu öffnen, gehen Sie zu chrome://extensions und aktivieren Sie den Entwicklermodus :

Jetzt können Sie jede Erweiterung debuggen, die eine Hintergrundseite oder ein Skript hat. Scrollen Sie einfach zu der Erweiterung, die Sie debuggen möchten, und klicken Sie auf den Link zur Hintergrundseite , um sie zu überprüfen.

Tipp: Um die Erweiterung erneut zu laden, können Sie im Fenster der Entwicklerwerkzeuge die Taste F5 drücken. Sie können vor dem erneuten Laden Haltepunkte in den Initialisierungscode einfügen.

Tipp: Wenn Sie mit der rechten Maustaste auf die Erweiterungs-Aktionsschaltfläche klicken und "Erweiterungen verwalten" auswählen, wird die Erweiterungsseite von chrome://extensions geöffnet, die zu dieser Erweiterung blättert.

Debuggen des Popup-Fensters

Sie haben zwei Möglichkeiten, das Popup-Fenster zu debuggen. Beide Möglichkeiten sind die Chrome DevTools.

Option 1: Klicken Sie mit der rechten Maustaste auf die Aktionsschaltfläche der Erweiterung, und wählen Sie Popup prüfen

Option 2: Öffnen Sie das Popup-Fenster direkt in Ihrem Browser als Registerkarte.

Wenn Ihre Erweiterungs-ID beispielsweise abcdefghijkmnop ist und Ihre Popup-HTML-Datei popup.html . Gehe zur Adresse und navigiere zu:

chrome-extension://abcdefghijklmnop/popup.html

Jetzt sehen Sie die Poup in der regulären Registerkarte. Sie können auch die Taste F12 drücken, um die Entwicklerwerkzeuge zu öffnen.