google-chrome-extension
Debuggen von Chrome-Erweiterungen

Verwenden der Developer-Tools zum Debuggen Ihrer Erweiterung

Eine Chromverlängerung besteht aus maximal 4 Teilen:

• die Hintergrundseite
• die Popup-Seite
• ein oder mehrere Inhaltsskripte
• die Optionsseite

Da jeder Teil von Natur aus getrennt ist, ist ein einzelnes Debugging erforderlich.

console.log() Sie, dass diese Seiten separat sind. Dies bedeutet, dass Variablen nicht direkt zwischen ihnen geteilt werden und dass console.log() auf einer dieser Seiten in den Protokollen anderer Teile nicht sichtbar ist.

Verwendung der Chrome Devtools:

Chrome-Erweiterungen werden ähnlich wie andere Webanwendungen und Webseiten debuggt. Das Debuggen wird meistens mit dem devtools-Inspector von Chrome durchgeführt, indem Sie die Tastenkombination für Windows bzw. Macs verwenden: Strg + Umschalttaste + i und cmd + Umschalttaste + i oder durch Klicken mit der rechten Maustaste auf die Seite und Auswählen von Inspect.

Über den Inspector kann ein Entwickler die HTML-Elemente und deren Auswirkungen auf css überprüfen, oder die Konsole verwenden, um die Werte von Javascript-Variablen zu überprüfen und die Ausgaben aus allen vom Entwickler eingerichteten console.log() lesen.

Weitere Informationen zur Verwendung des Inspektors finden Sie unter Chrome Devtools .

Das Popup, die Optionsseite und andere Seiten, die über chrome: //.....yourExtensionId.../ aufgerufen werden können, wird geprüft:

Auf die Popup-Seite und die Optionsseite können Sie einfach zugreifen, indem Sie sie überprüfen, wenn sie geöffnet sind.

Zusätzliche HTML-Seiten, die Teil der Erweiterung sind, aber weder das Popup- noch die Optionsseite sind, werden auf dieselbe Weise debuggt.

Untersuchen der Hintergrundseite:

Um auf Ihre Hintergrundseite zuzugreifen, müssen Sie zuerst zur chrome-Erweiterungsseite unter chrome: // extensions / navigieren. Stellen Sie sicher, dass das Kontrollkästchen "Entwicklermodus" aktiviert ist.

Klicken Sie dann neben "Ansichten prüfen " auf Ihr Hintergrundskript, um Ihre Hintergrundseite zu überprüfen.

Inhaltsskripte überprüfen:

Inhaltsskripts werden neben den Websites ausgeführt, in die sie eingefügt wurden. Sie können das Inhaltsskript überprüfen, indem Sie zunächst die Website überprüfen, auf der das Inhaltsskript eingefügt ist. In der Konsole können Sie alle console.log() von Ihrer Erweiterung ausgegeben werden, aber Sie können die Variablen des Inhaltsskripts nicht ändern oder prüfen.

Um dies zu beheben, müssen Sie auf das Dropdown-Menü klicken, das normalerweise auf 'top' und Ihre Erweiterung aus der Liste der Erweiterungen auswählen.

Von dort aus haben Sie Zugriff auf die Variablen innerhalb Ihrer Erweiterung.