Rozszerzenia mają dostęp do tych samych Narzędzi deweloperskich w Chrome co strony internetowe. Aby zostać ekspertem w debugowaniu rozszerzeń, musisz wiedzieć, jak odnajdywać dzienniki i błędy związane z różnymi komponentami rozszerzeń. W tym samouczku znajdziesz podstawowe techniki debugowania rozszerzenia.
Zanim zaczniesz
W tym przewodniku zakładamy, że masz już podstawowe doświadczenie w tworzeniu stron internetowych. Zalecamy przeczytanie Podstawy tworzenia rozszerzeń, w których znajdziesz wprowadzenie do przepływu pracy tworzenia rozszerzeń. Sekcja Zaprojektuj interfejs zawiera wprowadzenie: elementów interfejsu dostępnych w rozszerzeniach.
Zerwij rozszerzenie
Ten samouczek zepsuje tylko jeden komponent rozszerzenia i pokazuje, jak go naprawić. Pamiętaj, by usunąć błędy wprowadzone w jednej sekcji, zanim przejdziesz do następnej. Zacznij od pobrania próbki koloru uszkodzonego z GitHuba.
Debugowanie pliku manifestu
Najpierw podzielmy plik manifestu przez zmianę klucza "version"
na "versions"
:
manifest.json:
{
"name": "Broken Background Color",
"version": "1.0",
"versions": "1.0",
"description": "Fix an Extension!",
...
}
Teraz załaduj rozszerzenie lokalnie. Wyświetli się okno dialogowe błędu z informacją o problemie:
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.
![Rozszerzenie z nieprawidłowym kluczem manifestu aktywuje okno błędu podczas próby wczytania.](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/debug/image/an-extension-an-invalid-9ab91f867f94c.png?authuser=9&hl=pl)
Jeśli klucz manifestu jest nieprawidłowy, rozszerzenie nie może się załadować, ale Chrome wyświetla wskazówkę dotyczącą jak rozwiązać problem.
Cofnij tę zmianę i wpisz nieprawidłowe uprawnienia, aby sprawdzić, co się stanie.
Zmień uprawnienie "activeTab"
na małe litery "activetab"
:
manifest.json:
{
...
"permissions": ["activeTab", "scripting", "storage"],
"permissions": ["activetab", "scripting", "storage"],
...
}
Zapisz rozszerzenie i spróbuj wczytać je ponownie. Tym razem powinno się wczytać. W rozszerzeniu Na stronie zarządzania zobaczysz 3 przyciski: Szczegóły, Usuń i Błędy. Błędy W przypadku wystąpienia błędu etykieta przycisku zmienia kolor na czerwony. Kliknij przycisk Błędy, aby wyświetlić ten błąd:
Permission 'activetab' is unknown or URL pattern is malformed.
![Po kliknięciu przycisku Błąd wyświetla się komunikat o błędzie](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/debug/image/error-button-is-clicked-a7713a11553a.gif?authuser=9&hl=pl)
Zanim przejdziesz dalej, cofnij uprawnienia i kliknij Wyczyść wszystko w prawym górnym rogu, aby wyczyścić dzienniki i ponownie załadować rozszerzenie.
![Przycisk Usuń wszystko](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/debug/image/clear-button-2f67dd9230519.png?authuser=9&hl=pl)
Debugowanie skryptu service worker
Lokalizuję logi
Skrypt service worker ustawia kolor domyślny na pamięć i rejestruje go w konsoli. Aby wyświetlić ten dziennik, otwórz panel Narzędzi deweloperskich w Chrome, klikając niebieski link obok Zbadaj widoki.
![Otwieram Narzędzia deweloperskie dla skryptu service worker.](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/debug/image/opening-devtools-the-ex-685e204e20773.png?authuser=9&hl=pl)
Lokalizowanie błędów
Podzielmy skrypt service worker, zmieniając onInstalled
na małe litery oninstalled
:
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.');
});
});
Odśwież stronę i kliknij Błędy, aby wyświetlić dziennik błędów. Pierwszy błąd informuje, że skrypt service worker nie został zarejestrowany. Oznacza to, że podczas inicjowania wystąpił błąd:
Service worker registration failed. Status code: 15.
![Nie udało się zarejestrować skryptu service worker. Kod stanu: komunikat o błędzie 15](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/debug/image/service-worker-registrati-9791df79120e6.png?authuser=9&hl=pl)
Rzeczywisty błąd występuje po:
Uncaught TypeError: Cannot read properties of undefined (reading 'addListener')
![Nieprzechwycony błąd typu: nie można odczytać właściwości niezdefiniowanego komunikatu o błędzie](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/debug/image/uncaught-typeerror-canno-45ae014961338.png?authuser=9&hl=pl)
Cofnij błąd, kliknij Wyczyść wszystko w prawym górnym rogu i załaduj ponownie rozszerzenie.
Sprawdzanie stanu skryptu service worker
Aby określić, kiedy skrypt service worker wybudza się w celu wykonania zadań, wykonaj te czynności:
- Skopiuj identyfikator rozszerzenia znajdujący się nad opcją „Sprawdź widoki”.
Identyfikator rozszerzenia na stronie Zarządzanie rozszerzeniami. - Otwórz plik manifestu w przeglądarce. Na przykład:
text chrome-extension://YOUR_EXTENSION_ID/manifest.json
- Sprawdź plik.
- Przejdź do panelu Aplikacja.
- Otwórz panel Skrypty service worker.
Aby przetestować kod, uruchom lub zatrzymaj skrypt service worker za pomocą linków obok opcji status.
![Stan skryptu service worker w panelu Aplikacje](https://developer.chrome.com/docs/extensions/get-started/tutorial/debug/image/start-stop-service-worker.png?auto=format&w=845&authuser=9&hl=pl)
Poza tym po wprowadzeniu zmian w kodzie skryptu service worker możesz od razu zastosować zmiany, klikając Aktualizuj lub pomiń.
![Stan skryptu service worker w panelu Aplikacje](https://developer.chrome.com/docs/extensions/get-started/tutorial/debug/image/update-or-skipwaiting.png?auto=format&w=845&authuser=9&hl=pl)
Debugowanie wyskakującego okienka
Gdy rozszerzenie zainicjuje się już prawidłowo, podzielmy to wyskakujące okienko, dodając komentarze do wyróżnionych poniżej wierszy:
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
});
});
});
Wróć na stronę Zarządzanie rozszerzeniami. Przycisk Błędy pojawi się ponownie. Kliknij go, aby: wyświetli nowy dziennik. Pojawia się następujący komunikat o błędzie:
Uncaught ReferenceError: tabs is not defined
![Strona Zarządzanie rozszerzeniami wyświetla wyskakujące okienko błędu](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/debug/image/extensions-management-pag-00a0f48a76239.png?authuser=9&hl=pl)
Narzędzia deweloperskie w tym wyskakującym okienku możesz otworzyć, sprawdzając jego zawartość.
![Narzędzia deweloperskie wyświetlające błąd w wyskakującym okienku.](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/debug/image/devtools-displaying-popup-0ed24fd80361a.png?authuser=9&hl=pl)
Błąd tabs is undefined
informuje, że rozszerzenie nie wie, gdzie wstawić skrypt treści.
Aby rozwiązać ten problem, wywołaj metodę tabs.query()
i wybierz aktywną kartę.
Aby zaktualizować kod, w prawym górnym rogu kliknij przycisk Wyczyść wszystko, a następnie załaduj ponownie .
Debuguj skrypty treści
Podzielmy teraz skrypt treści, zmieniając zmienną „color” na „colors”:
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;
}
Odśwież stronę, otwórz wyskakujące okienko i kliknij zielone pole. Nic się nie dzieje.
Jeśli otworzysz stronę Zarządzanie rozszerzeniami, przycisk Błędy nie będzie widoczny. Dzieje się tak, ponieważ tylko błędy czasu działania, console.warning
i,
console.error
są rejestrowane na stronie Zarządzanie rozszerzeniami.
Skrypty treści działają w witrynie. Aby znaleźć te błędy, musimy sprawdzić stronę internetową, którą rozszerzenie próbuje zmienić:
Uncaught ReferenceError: colors is not defined
![W konsoli strony internetowej wyświetla się błąd rozszerzenia](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/debug/image/extension-error-displayed-ca9d8c6c336b.png?authuser=9&hl=pl)
Aby użyć Narzędzi deweloperskich ze skryptu treści, kliknij strzałkę w dół obok opcji góra i wybierz rozszerzenie.
![Nieprzechwycony błąd referencyjny: kolory nie są zdefiniowane](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/debug/image/uncaught-referenceerror-e5847be3a7de9.png?authuser=9&hl=pl)
Komunikat o błędzie informuje, że element colors
nie jest zdefiniowany. Rozszerzenie nie może prawidłowo przekazywać zmiennej.
Popraw wstawiony skrypt tak, aby przekazywał zmienną koloru do kodu.
Monitorowanie żądań sieciowych
Wyskakujące okienko często wysyła wszystkie wymagane żądania sieciowe, jeszcze zanim będzie najszybszy mogą otwierać Narzędzia deweloperskie. Aby wyświetlić te żądania, odśwież panel w panelu sieci. it ponownie wczytuje wyskakujące okienko bez zamykania panelu Narzędzi deweloperskich.
![Odśwież w panelu sieci, aby wyświetlić wyskakujące żądania sieciowe](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/debug/image/refresh-inside-network-p-43993068e650e.gif?authuser=9&hl=pl)
Deklarowanie uprawnień
Niektóre interfejsy API rozszerzeń wymagają uprawnień. Zapoznaj się z artykułem o uprawnieniach i w Chrome, interfejsów API, aby upewnić się, że rozszerzenie żąda odpowiednich uprawnień w manifeście.
{
"name": "Broken Background Color",
...
"permissions": [
"activeTab",
"declarativeContent",
"storage"
],
...
}
Więcej informacji
Więcej informacji o narzędziach deweloperskich Chrome znajdziesz w dokumentacji.