google-chrome-extension
Debugowanie rozszerzeń Chrome

Korzystanie z narzędzi programistycznych do debugowania rozszerzenia

Chromowane przedłużenie jest podzielone na maksymalnie 4 części:

• strona w tle
• wyskakująca strona
• jeden lub więcej skryptów treści
• strona opcji

Każda część, ponieważ są z natury osobne, wymaga indywidualnego debugowania.

Należy pamiętać, że strony te są oddzielne, co oznacza, że zmienne nie są bezpośrednio udostępniane między nimi, a console.log() na jednej z tych stron nie będzie widoczna w dziennikach innych części.

Korzystanie z devtools chrome:

Rozszerzenia Chrome są debugowane podobnie jak inne aplikacje i strony internetowe. Debugowanie odbywa się najczęściej za pomocą inspektora devtools chrome, który otwiera się za pomocą skrótu klawiaturowego odpowiednio dla systemu Windows i Mac: ctrl + shift + i i cmd + shift + i lub klikając prawym przyciskiem myszy stronę i wybierając inspect.

Z poziomu inspektora programista może sprawdzić elementy HTML i wpływ css na nie, lub użyć konsoli do sprawdzenia wartości zmiennych javascript i odczytać dane wyjściowe z dowolnego console.log() ) skonfigurowanego przez programistę.

Więcej informacji na temat korzystania z inspektora można znaleźć w Chrome Devtools .

Sprawdzanie wyskakującego okienka, strony opcji i innych stron dostępnych za pomocą chrome: //..... twójExtensionId.../:

Dostęp do każdej strony wyskakującej i opcji można uzyskać, sprawdzając je, gdy są otwarte.

Dodatkowe strony HTML, które są częścią rozszerzenia, ale nie są ani oknem wyskakującym, ani stroną opcji, są również debugowane w ten sam sposób.

Sprawdzanie strony w tle:

Aby uzyskać dostęp do strony w tle , musisz najpierw przejść do strony rozszerzenia chrome na chrome: // extensions / . Upewnij się, że opcja „Tryb programisty” jest włączona.

Następnie kliknij skrypt w tle obok „Sprawdź widoki”, aby sprawdzić stronę w tle.

Sprawdzanie skryptów treści:

Skrypty zawartości działają obok witryn, do których zostały wstawione. Możesz sprawdzić skrypt treści, najpierw sprawdzając witrynę internetową, w której wstawiono skrypt treści. W konsoli będzie można wyświetlić dowolne dane console.log() wyprowadzone przez rozszerzenie, ale nie będzie można zmieniać ani sprawdzać zmiennych skryptu zawartości.

Aby to naprawić, musisz kliknąć menu rozwijane zwykle ustawione na 'top' i wybrać swoje rozszerzenie z listy rozszerzeń.

Stamtąd będziesz miał dostęp do zmiennych w swoim rozszerzeniu.