google-chrome-extension
Integracja narzędzi programistycznych

Programowe wskazanie punktu przerwania

Dodaj instrukcję debugowania do skryptu zawartości

var foo = 1;
debugger;

foo = 2;

Otwórz narzędzie programistyczne na stronie internetowej, na której wstrzykiwany jest skrypt treści, aby zobaczyć wstrzymanie wykonywania kodu w tych wierszach.

Debugowanie strony / skryptu w tle

Skrypt w tle jest jak każdy inny kod JavaScript. Możesz go debugować za pomocą tych samych narzędzi, z których debugujesz inny kod JavaScript w Chrome.

Aby otworzyć Chrome Developer Tools, przejdź do chrome://extensions i włącz tryb programisty :

Teraz możesz debugować dowolne rozszerzenie ze stroną w tle lub skryptem. Wystarczy przewinąć do rozszerzenia, które chcesz debugować, i kliknąć łącze do strony w tle, aby je sprawdzić.

Wskazówka: Aby ponownie załadować rozszerzenie, możesz nacisnąć klawisz F5 w oknie narzędzi programisty. Możesz wstawić punkty przerwania w kodzie inicjalizacji przed ponownym załadowaniem.

Wskazówka: kliknięcie prawym przyciskiem myszy przycisku akcji rozszerzenia i wybranie „Zarządzaj rozszerzeniami” otworzy stronę chrome://extensions przewiniętą do tego rozszerzenia.

Debugowanie wyskakującego okna

Istnieją 2 sposoby debugowania wyskakującego okna. Oba sposoby są za pomocą Chrome DevTools.

Opcja 1: Kliknij prawym przyciskiem myszy przycisk działania rozszerzenia i wybierz polecenie Sprawdź wyskakujące okienko

Opcja 2: Otwórz okno podręczne bezpośrednio w przeglądarce jako zakładka.

Na przykład, jeśli identyfikator rozszerzenia to abcdefghijkmnop , a wyskakujący plik HTML to popup.html . Przejdź do adresu i przejdź do:

chrome-extension://abcdefghijklmnop/popup.html

Teraz widzisz paczkę w zwykłej zakładce. I możesz nacisnąć klawisz F12, aby otworzyć narzędzia programistyczne.