Erweiterungen können auf dieselben Chrome-Entwicklertools zugreifen wie Webseiten. Um ein Experte für das Debugging von Erweiterungen zu werden, müssen Sie wissen, wie Sie Protokolle und Fehler für die verschiedenen Erweiterungskomponenten finden. In dieser Anleitung werden grundlegende Verfahren zur Fehlerbehebung für Ihre Erweiterung vorgestellt.
Hinweis
In diesem Leitfaden wird vorausgesetzt, dass Sie über Grundkenntnisse in der Webentwicklung verfügen. Wir empfehlen, das Dokument Grundlagen der Entwicklung zu lesen, um eine Einführung in den Workflow für die Entwicklung von Erweiterungen zu erhalten. Im Abschnitt Benutzeroberfläche entwerfen erhalten Sie eine Einführung in die Elemente der Benutzeroberfläche, die in Erweiterungen verfügbar sind.
Fehler in der Erweiterung beheben
In dieser Anleitung wird jeweils nur eine Erweiterungskomponente beeinträchtigt. Anschließend wird gezeigt, wie Sie das Problem beheben. Denken Sie daran, die in einem Abschnitt vorgestellten Fehler rückgängig zu machen, bevor Sie mit dem nächsten Abschnitt fortfahren. Laden Sie zuerst das Beispiel für eine fehlerhafte Farbe von GitHub herunter.
Fehler im Manifest beheben
Beschädigen wir zuerst die Manifestdatei, indem wir den "version"-Schlüssel in "versions" ändern:
manifest.json:
{
"name": "Broken Background Color",
"version": "1.0",
"versions": "1.0",
"description": "Fix an Extension!",
...
}
Als Nächstes versuchen wir, die Erweiterung lokal zu laden. Es wird ein Fehlerdialogfeld angezeigt, das auf das Problem verweist:
Failed to load extension
Required value version is missing or invalid. It must be between 1-4 dot-separated integers each between 0 and 65536.
Could not load manifest.
Wenn ein Manifestschlüssel ungültig ist, wird die Erweiterung nicht geladen, aber Chrome zeigt dir, wie du das Problem beheben kannst.
Machen Sie die Änderung rückgängig und geben Sie eine ungültige Berechtigung ein, um zu sehen, was passiert.
Ändern Sie die Berechtigung "activeTab" in Kleinbuchstaben für "activetab":
manifest.json:
{
...
"permissions": ["activeTab", "scripting", "storage"],
"permissions": ["activetab", "scripting", "storage"],
...
}
Speichern Sie die Erweiterung und versuchen Sie noch einmal, sie zu laden. Diesmal sollte sie erfolgreich geladen werden. Auf der Seite „Erweiterungsverwaltung“ gibt es drei Schaltflächen: Details, Entfernen und Fehler. Das Schaltflächenlabel Fehler wird rot, wenn ein Fehler auftritt. Klicken Sie auf die Schaltfläche Fehler, um den folgenden Fehler anzuzeigen:
Permission 'activetab' is unknown or URL pattern is malformed.
Bevor du fortfährst, ändere die Berechtigung zurück. Klicke in der oberen rechten Ecke auf Alle löschen, um die Protokolle zu löschen, und lade die Erweiterung neu.
Fehler im Service Worker beheben
Logs suchen
Der Service Worker legt die Standardfarbe auf „storage“ fest und protokolliert sie in der Console. Wenn Sie dieses Protokoll aufrufen möchten, öffnen Sie den Bereich „Chrome-Entwicklertools“, indem Sie auf den blauen Link neben Ansichten prüfen klicken.
Fehler finden
Im folgenden Beispiel wird der Service Worker unterbrochen, indem onInstalled in oninstalled kleingeschrieben wird:
service-worker.js:
// There's a typo in the line below;
// ❌ oninstalled should be ✅ onInstalled.
chrome.runtime.onInstalled.addListener(() => {
chrome.runtime.oninstalled.addListener(() => {
chrome.storage.sync.set({ color: '#3aa757' }, () => {
console.log('The background color is green.');
});
});
Aktualisieren Sie die Seite und klicken Sie auf Fehler, um das Fehlerprotokoll anzusehen. Der erste Fehler teilt Ihnen mit, dass sich der Service Worker nicht registrieren konnte. Das bedeutet, dass bei der Initiierung ein Fehler aufgetreten ist:
Service worker registration failed. Status code: 15.
Der tatsächliche Fehler kommt nach:
Uncaught TypeError: Cannot read properties of undefined (reading 'addListener')
Machen Sie den Fehler rückgängig, klicken Sie rechts oben auf Alle löschen und aktualisieren Sie die Erweiterung.
Service Worker-Status prüfen
Mit den folgenden Schritten können Sie ermitteln, wann der Service Worker zum Ausführen von Aufgaben aktiviert wird:
- Kopieren Sie die Erweiterungs-ID über „Ansichten prüfen“.
Erweiterungs-ID auf der Seite „Erweiterungsverwaltung“. - Öffnen Sie die Manifestdatei im Browser. Beispiel:
text chrome-extension://YOUR_EXTENSION_ID/manifest.json - Sehen Sie sich die Datei an.
- Gehen Sie zum Steuerfeld Anwendung.
- Wechseln Sie zum Bereich Service Workers.
Starten oder beenden Sie den Service Worker mithilfe der Links neben status, um den Code zu testen.
Wenn Sie Änderungen am Service Worker-Code vorgenommen haben, können Sie auch auf Update (Aktualisieren) oder skipwaiting (Überspringen) klicken, um die Änderungen sofort zu übernehmen.
Fehler im Pop-up-Fenster beheben
Nachdem die Erweiterung nun korrekt initialisiert wurde, lassen wir das Pop-up aufbrechen, indem wir die folgenden hervorgehobenen Zeilen auskommentieren:
popup.js:
...
changeColorButton.addEventListener('click', (event) => {
const color = event.target.value;
// Query the active tab before injecting the content script
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
// Use the Scripting API to execute a script
chrome.scripting.executeScript({
target: { tabId: tabs[0].id },
args: [color],
func: setColor
});
});
});
Gehen Sie zurück zur Seite „Verwaltung von Erweiterungen“. Die Schaltfläche Fehler wird wieder angezeigt. Klicken Sie darauf, um das neue Log aufzurufen. Es wird die folgende Fehlermeldung angezeigt:
Uncaught ReferenceError: tabs is not defined
Sie können die Entwicklertools des Pop-ups öffnen, indem Sie sich das Pop-up ansehen.
Der Fehler tabs is undefined besagt, dass die Erweiterung nicht weiß, wo das Inhaltsskript eingefügt werden soll.
Korrigieren Sie dies, indem Sie tabs.query() aufrufen und dann den aktiven Tab auswählen.
Klicken Sie oben rechts auf die Schaltfläche Alle löschen und aktualisieren Sie dann die Erweiterung, um den Code zu aktualisieren.
Content-Scripts zur Fehlerbehebung
Jetzt ändern wir das Inhaltsskript, indem wir die Variable „color“ in „colors“ ändern:
content.js:
...
function setColor(color) {
// There's a typo in the line below;
// ❌ colors should be ✅ color.
document.body.style.backgroundColor = color;
document.body.style.backgroundColor = colors;
}
Aktualisieren Sie die Seite, öffnen Sie das Pop-up-Fenster und klicken Sie auf das grüne Feld. Es passiert nichts.
Wenn Sie die Seite zur Verwaltung von Erweiterungen aufrufen, wird die Schaltfläche Fehler nicht angezeigt. Das liegt daran, dass nur Laufzeitfehler, console.warning und console.error, auf der Seite „Erweiterungsverwaltung“ aufgezeichnet werden.
Content-Skripts werden auf einer Website ausgeführt. Um diese Fehler zu finden, müssen wir die Webseite untersuchen, die die Erweiterung zu ändern versucht:
Uncaught ReferenceError: colors is not defined
Wenn Sie die Entwicklertools im Inhaltsskript verwenden möchten, klicken Sie auf den Drop-down-Pfeil neben oben und wählen Sie die Erweiterung aus.
Die Fehlermeldung besagt, dass colors nicht definiert ist. Die Erweiterung darf die Variable nicht korrekt übergeben.
Korrigieren Sie das eingeschleuste Skript, um die Farbvariable an den Code zu übergeben.
Netzwerkanfragen überwachen
Das Pop-up stellt häufig alle erforderlichen Netzwerkanfragen bereit, bevor selbst die schnellsten Entwickler die Entwicklertools öffnen können. Wenn Sie diese Anfragen sehen möchten, aktualisieren Sie die Seite im Netzwerkbereich. Das Pop-up wird neu geladen, ohne den Bereich „Entwicklertools“ zu schließen.
Deklarieren von Berechtigungen
Einige Erweiterungs-APIs erfordern Berechtigungen. Im Artikel Berechtigungen und in den Chrome APIs können Sie nachlesen, ob eine Erweiterung die richtigen Berechtigungen im Manifest anfordert.
{
"name": "Broken Background Color",
...
"permissions": [
"activeTab",
"declarativeContent",
"storage"
],
...
}
Weitere Informationen
Weitere Informationen zu den Chrome-Entwicklertools finden Sie in der Dokumentation.