Erweiterungen können auf dieselben Chrome-Entwicklertools zugreifen wie Webseiten. Wenn Sie ein Experte im Entfernen von Fehlern in Erweiterungen werden möchten, müssen Sie wissen, wie Sie Protokolle und Fehler der verschiedenen Erweiterungskomponenten finden. In diesem Tutorial werden grundlegende Techniken zur Fehlerbehebung bei Erweiterungen vorgestellt.
Hinweis
In diesem Leitfaden wird davon ausgegangen, dass Sie grundlegende Erfahrung mit der Webentwicklung haben. Eine Einführung in den Workflow zur Erweiterungsentwicklung finden Sie unter Entwicklungsgrundlagen. Im Artikel Benutzeroberfläche entwerfen erhalten Sie eine Einführung in die Elemente der Benutzeroberfläche, die in Erweiterungen verfügbar sind.
Erweiterung brechen
In dieser Anleitung wird jeweils eine Erweiterungskomponente deaktiviert und dann gezeigt, wie das Problem behoben wird. Denken Sie daran, die Fehler in einem Abschnitt rückgängig zu machen, bevor Sie mit dem nächsten Abschnitt fortfahren. Laden Sie zuerst das Beispiel „Broken Color“ von GitHub herunter.
Manifest debuggen
Brechen wir zuerst die Manifestdatei auf, indem wir den Schlüssel "version" in "versions" ändern:
manifest.json:
{
"name": "Broken Background Color",
"version": "1.0",
"versions": "1.0",
"description": "Fix an Extension!",
...
}
Versuchen wir nun, die Erweiterung lokal zu laden. Es wird ein Fehlerdialogfeld mit Hinweisen zum Problem angezeigt:
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. Chrome gibt Ihnen jedoch einen Hinweis, wie Sie das Problem beheben können.
Nehmen Sie diese Änderung rückgängig und geben Sie eine ungültige Berechtigung ein, um zu sehen, was passiert.
Ändern Sie die Berechtigung "activeTab" in Kleinbuchstaben "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 es geladen werden. Auf der Seite „Erweiterungen verwalten“ sehen Sie drei Schaltflächen: Details, Entfernen und Fehler. Das Label der Schaltfläche Fehler wird rot, wenn ein Fehler auftritt. Klicken Sie auf die Schaltfläche Fehler, um den folgenden Fehler zu sehen:
Permission 'activetab' is unknown or URL pattern is malformed.
Ändern Sie die Berechtigung wieder, bevor Sie fortfahren. Klicken Sie oben rechts auf Alle löschen, um die Protokolle zu löschen, und laden Sie die Erweiterung neu.
Service Worker debuggen
Logs finden
Der Dienst-Worker legt die Standardfarbe für den Speicher fest und protokolliert sie in der Konsole. Wenn Sie sich dieses Protokoll ansehen möchten, öffnen Sie das Steuerfeld „Chrome-Entwicklertools“ und klicken Sie auf den blauen Link neben Ansichten prüfen.
Fehler finden
Lassen Sie uns den Dienst-Worker zum Absturz bringen, indem wir onInstalled in Kleinbuchstaben oninstalled ändern:
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 aufzurufen. Der erste Fehler gibt an, dass der Dienst-Worker nicht registriert werden konnte. Das bedeutet, dass bei der Einrichtung ein Fehler aufgetreten ist:
Service worker registration failed. Status code: 15.
