Użyj punktów przerwania, aby wstrzymać kod JavaScript. W tym przewodniku opisujemy każdy typ punktu przerwania, który jest dostępnych w Narzędziach deweloperskich, a także o tym, kiedy ich używać i jak ustawić każdy z nich. Interaktywny samouczek dotyczący procesu debugowania znajdziesz w artykule Pierwsze kroki z debugowaniem JavaScriptu w Narzędziach deweloperskich w Chrome.
Omówienie sytuacji, w których należy używać poszczególnych typów punktów przerwania
Najbardziej znanym typem punktu przerwania jest wiersz kodu. Punkty przerwania wiersza kodu mogą być jednak zwłaszcza wtedy, gdy nie wiemy dokładnie, gdzie szukać, lub jeśli współpracujesz dużej bazy kodu. Możesz zaoszczędzić czas podczas debugowania, wiedząc, jak i kiedy użyć drugiego różne typy punktów przerwania.
| Typ punktu przerwania | Używaj, gdy chcesz ... |
|---|---|
| Wiersz kodu | Wstrzymaj ruch w konkretnym fragmencie kodu. |
| Warunkowy wiersz kodu | Wstrzymaj ruch w konkretnym fragmencie kodu, ale tylko wtedy, gdy jest spełniony inny warunek. |
| Punkt logowania | Zarejestruj wiadomość w konsoli bez wstrzymywania wykonania. |
| DOM, | Wstrzymaj kod, który zmienia lub usuwa określony węzeł DOM bądź jego elementy podrzędne. |
| XHR | Wstrzymaj, gdy adres URL XHR zawiera ciąg znaków. |
| Detektor zdarzeń | Wstrzymaj kod, który działa po wywołaniu zdarzenia, np. click. |
| Wyjątek | Zatrzymaj się na wierszu kodu, który zgłasza złapany lub nieprzechwycony wyjątek. |
| Funkcja | Wstrzymaj przy każdym wywołaniu konkretnej funkcji. |
| Typ zaufania | Wstrzymaj w przypadku naruszeń rekomendowanych typów. |
Punkty przerwania wiersza kodu
Gdy znasz dokładny region kodu, który chcesz zbadać, używaj punktu przerwania wiersza kodu. Narzędzia deweloperskie zawsze są wstrzymywane przed wykonaniem tego wiersza kodu.
Aby ustawić punkt przerwania wiersza kodu w Narzędziach deweloperskich:
- Kliknij panel Źródła.
- Otwórz plik zawierający wiersz kodu, w którym chcesz przerwać pracę.
- Przejdź do wiersza kodu.
- Po lewej stronie wiersza kodu znajduje się kolumna z numerem wiersza. Kliknij ją. Na ekranie pojawi się niebieska ikona na górze kolumny z numerem wiersza.
Ten przykład pokazuje punkt przerwania wiersza kodu ustawiony w wierszu 29.
Punkty przerwania wiersza kodu w kodzie
Zadzwoń pod numer debugger ze swojego kodu, aby zatrzymać się na tej linii. Jest to odpowiednik wiersza kodu
Punkt przerwania jest ustawiony w kodzie, a nie w interfejsie Narzędzi deweloperskich.
console.log('a');
console.log('b');
debugger;
console.log('c');
Warunkowe punkty przerwania wiersza kodu
Warunkowego punktu przerwania wiersza kodu używaj, gdy chcesz zatrzymać wykonywanie, ale tylko wtedy, gdy jakiś warunek jest spełniony.
Takie punkty przerwania są przydatne, gdy chcesz pominąć przerwy, które nie są istotne w Twoim przypadku, zwłaszcza w pętli.
Aby ustawić warunkowy punkt przerwania wiersza kodu:
- Otwórz panel Źródła.
- Otwórz plik zawierający wiersz kodu, w którym chcesz przerwać pracę.
- Przejdź do wiersza kodu.
- Po lewej stronie wiersza kodu znajduje się kolumna z numerem wiersza. Kliknij ją prawym przyciskiem myszy.
- Wybierz Dodaj warunkowy punkt przerwania. Pod wierszem kodu pojawi się okno.
- Wpisz warunek w oknie.
- Naciśnij Enter, aby aktywować punkt przerwania. U góry kolumny z numerem wiersza pojawi się pomarańczowa ikona ze znakiem zapytania.
Ten przykład pokazuje warunkowy punkt przerwania wiersza kodu, który został uruchomiony tylko wtedy, gdy zasada x przekroczyła 10 w pętli w iteracji i=6.
Rejestruj punkty przerwania wiersza kodu
Używaj punktów przerwania wiersza kodu (punktów logowania), aby rejestrować wiadomości w Konsoli bez wstrzymywania wykonania i zaśmiecania kodu wywołaniami console.log().
Aby ustawić punkt logowania:
- Otwórz panel Źródła.
- Otwórz plik zawierający wiersz kodu, w którym chcesz przerwać pracę.
- Przejdź do wiersza kodu.
- Po lewej stronie wiersza kodu znajduje się kolumna z numerem wiersza. Kliknij ją prawym przyciskiem myszy.
- Wybierz Dodaj punkt logowania. Pod wierszem kodu pojawi się okno.
W oknie wpisz komunikat logu. Możesz użyć tej samej składni co w przypadku wywołania
console.log(message).Możesz na przykład zapisywać:
"A string " + num, str.length > 1, str.toUpperCase(), objW tym przypadku zapisany komunikat:
// str = "test" // num = 42 // obj = {attr: "x"} A string 42 true TEST {attr: 'x'}Naciśnij Enter, aby aktywować punkt przerwania. U góry kolumny z numerem wiersza pojawi się różowa ikona z 2 kropkami.
Ten przykład przedstawia punkt logowania w wierszu 30, który rejestruje w konsoli ciąg znaków i wartość zmiennej.
Edytuj punkty przerwania wiersza kodu
W sekcji Punkty przerwania możesz wyłączać, edytować i usuwać punkty przerwania wiersza kodu.
Edytuj grupy punktów przerwania
Sekcja Punkty przerwania grupuje punkty przerwania według pliku i porządkuje je według numerów wierszy i kolumn. Grupy możesz wykonywać te czynności:
- Aby zwinąć lub rozwinąć grupę, kliknij jej nazwę.
- Aby włączyć lub wyłączyć grupę bądź punkt przerwania pojedynczo, kliknij
obok grupy lub punktu przerwania. - Aby usunąć grupę, najedź na nią kursorem i kliknij
.
Ten film pokazuje, jak zwijać grupy i wyłączać lub włączać punkty przerwania pojedynczo lub według grup. Gdy wyłączysz punkt przerwania, jego znacznik obok numeru wiersza w panelu Źródła stanie się przezroczysty.
Grupy mają menu kontekstowe. W sekcji Punkty przerwania kliknij grupę prawym przyciskiem myszy i wybierz:
- Usuń wszystkie punkty przerwania w pliku (grupie).
- Wyłącz wszystkie punkty przerwania w pliku.
- Włącz wszystkie punkty przerwania w pliku.
- Usuń wszystkie punkty przerwania (we wszystkich plikach).
- Usuń inne punkty przerwania (w innych grupach).
Edytuj punkty przerwania
Aby edytować punkt przerwania:
- Kliknij
obok punktu przerwania, aby go włączyć lub wyłączyć. Gdy wyłączysz punkt przerwania, jego znacznik obok numeru wiersza w panelu Źródła stanie się przezroczysty. - Najedź kursorem na punkt przerwania i kliknij
, aby go edytować, lub 
, aby go usunąć. Podczas edytowania punktu przerwania zmień jego typ na liście w edytorze wbudowanym.
Kliknij prawym przyciskiem myszy punkt przerwania, aby wyświetlić jego menu kontekstowe, i wybierz jedną z opcji:
- Pokaż lokalizację.
- Edytuj warunek lub punkt logowania.
- Włącz wszystkie punkty przerwania.
- Wyłącz wszystkie punkty przerwania.
- Usuń punkt przerwania.
- Usuń inne punkty przerwania (we wszystkich plikach).
- Usuń wszystkie punkty przerwania (we wszystkich plikach).
Obejrzyj film, aby zobaczyć, jak działają różne zmiany w punktach przerwania: wyłączanie, usuwanie, edytowanie warunku, pokazywanie lokalizacji w menu i zmiana typu.
Pomijaj punkty przerwania dzięki opcji „Nigdy nie wstrzymuj tutaj”
Użyj punktu przerwania wiersza kodu Nigdy nie wstrzymuj tutaj, aby pominąć pauzy, które mogą wystąpić z innych powodów. Może to być przydatne, gdy masz włączone wyjątkowe punkty przerwania, ale debuger ciągle zatrzymuje się w wyjątku szczególnie głośnym wyjątkiem, którego debugowanie nie jest Ci potrzebne.
Aby wyciszyć lokalizację przerwy:
- W panelu Źródła otwórz plik źródłowy i znajdź wiersz, w którym nie chcesz przerywać łamania.
- Kliknij prawym przyciskiem myszy numer wiersza w kolumnie z numerem wiersza po lewej stronie, obok instrukcji, która powoduje podział.
- W menu wybierz Nigdy nie wstrzymuj tutaj. Obok wiersza pojawi się pomarańczowy (warunkowy) punkt przerwania.
Możesz też wyciszyć punkt przerwania na czas wstrzymania wykonania. Obejrzyj następny film, aby dowiedzieć się, jak to zrobić.
Opcja Nigdy nie wstrzymuj tutaj pozwala wyciszać instrukcje debugowania i wszystkie pozostałe typy punktów przerwania z wyjątkiem punktów przerwania wiersza kodu i punktów przerwania detektora zdarzeń.
Nigdy nie wstrzymuj tutaj, może wystąpić błąd w wierszu z wieloma instrukcjami, jeśli instrukcja, która nie powinna być wstrzymywana, różni się od tej, która powoduje wstrzymanie. W kodzie zmapowanym na podstawie źródła nie każda lokalizacja punktu przerwania odpowiada oryginalnej instrukcji, która powoduje przerwę.
Punkty przerwania zmiany DOM
Punktu przerwania zmiany DOM używaj, gdy chcesz wstrzymać odtwarzanie kodu, który zmienia węzeł DOM lub jego dzieci.
Aby ustawić punkt przerwania zmiany DOM:
- Kliknij kartę Elements.
- Przejdź do elementu, dla którego chcesz ustawić punkt przerwania.
- Kliknij element prawym przyciskiem myszy.
- Najedź kursorem na opcję Przerwij, wybierz Modyfikacje drzewa podrzędnego, Modyfikacje atrybutu lub Usuwanie węzła.
Ten przykład przedstawia menu kontekstowe tworzenia punktu przerwania zmiany DOM.
Listę punktów przerwania zmiany DOM znajdziesz tutaj:
- Elements > Panel Punkty przerwania DOM.
- Źródła > Panel boczny Punkty przerwania DOM.
W tym miejscu możesz:
- Możesz je włączać i wyłączać za pomocą
. - Kliknij prawym przyciskiem myszy > Usuń lub Pokaż w DOM.
Typy punktów przerwania zmiany DOM
- Modyfikacje drzewa podrzędnego. Wywoływane, gdy element podrzędny obecnie wybranego węzła jest usunięty lub lub zawartość elementu podrzędnego zostanie zmieniona. nie są wywoływane po zmianie atrybutów węzła podrzędnego lub przy dowolnych zmianach w obecnie wybranym węźle.
- Modyfikacje atrybutów: wywoływane po dodaniu lub usunięciu atrybutu w obecnie wybranego węzła lub po zmianie wartości atrybutu.
- Usuwanie węzła: wywoływane po usunięciu aktualnie wybranego węzła.
Punkty przerwania żądań XHR/pobrania
Użyj punktu przerwania XHR/pobierania, gdy chcesz przerwać, gdy URL żądania XHR zawiera określony
ciągu znaków. Narzędzia deweloperskie zatrzymują się w wierszu kodu, w którym XHR wywołuje send().
Jest to pomocne na przykład wtedy, gdy widzisz, że Twoja strona prosi o nieprawidłowy URL, i chcesz szybko znaleźć kod źródłowy AJAX lub Pobierz, który powoduje nieprawidłowe żądanie.
Aby ustawić punkt przerwania XHR/pobrania:
- Kliknij panel Źródła.
- Rozwiń panel Punkty przerwania XHR.
- Kliknij
Dodaj punkt przerwania. - Wpisz ciąg znaków, który chcesz przerwać. Narzędzia deweloperskie są wstrzymywane, gdy występuje ten ciąg znaków w dowolnym miejscu adresu URL żądania XHR.
- Aby potwierdzić, naciśnij Enter.
Ten przykład pokazuje, jak utworzyć punkt przerwania XHR/pobierania w punktach przerwania XHR/pobierania dla każdego żądania, które zawiera
org w adresie URL.
Punkty przerwania detektora zdarzeń
Używaj punktów przerwania detektora zdarzeń, jeśli chcesz wstrzymać działanie kodu odbiornika uruchamianego po
. Możesz wybrać konkretne zdarzenia, np. click, lub kategorie zdarzeń, takie jak
zdarzeń związanych z myszą.
- Kliknij panel Źródła.
- Rozwiń panel Punkty przerwania detektora zdarzeń. Narzędzia deweloperskie wyświetlają listę kategorii zdarzeń, takich jak jako Animacja.
- Zaznacz jedną z tych kategorii, aby wstrzymywać każdorazowe wywołanie zdarzenia z tej kategorii, lub rozwiń kategorię i sprawdzić konkretne zdarzenie.
Z tego przykładu dowiesz się, jak utworzyć punkt przerwania detektora zdarzeń dla deviceorientation.
Dodatkowo Debuger wstrzymuje się w przypadku zdarzeń występujących w środowiskach roboczych lub zbiorach zadań dowolnego typu, w tym w Workletach współdzielonego miejsca na dane.
Ten przykład pokazuje, jak Debuger został wstrzymany w zdarzeniu setTimer, które wystąpiło w skrypcie service worker.
Listę detektorów zdarzeń znajdziesz w sekcji Elements > Okienko Detektory zdarzeń.
Punkty przerwania wyjątków
Wyjątkowe punkty przerwania warto stosować, gdy chcesz zatrzymać się na wierszu kodu, który zgłasza złapany lub nieobsłużony wyjątek. Możesz wstrzymać działanie obu tych wyjątków niezależnie w każdej sesji debugowania innej niż Node.js.
W sekcji Punkty przerwania w panelu Źródła włącz jedną z tych opcji lub obie, a następnie wykonaj kod:
Zaznacz
Wstrzymaj przy niewykrytych wyjątkach.
W tym przykładzie wykonanie jest wstrzymane w przypadku nieobsłużonego wyjątku.
Zaznacz
Wstrzymaj przy wykrytych wyjątkach.
W tym przykładzie wykonanie jest wstrzymane na zaobserwowanym wyjątku.
Wyjątki w wywołaniach asynchronicznych
Gdy pole wyboru Przechwytywanie i nieprzechwytywanie jest włączone (lub oba te pola), Debuger próbuje zatrzymać się na odpowiednich wyjątkach zarówno w wywołaniach synchronicznych, jak i asynchronicznych. W przypadku asynchronicznym Debugger szuka modułów obsługi odrzucenia w obrębie obietnic, aby określić, kiedy zatrzymać.
Przechwycone wyjątki i ignorowany kod
Gdy Lista ignorowanych jest włączona, Debuger zatrzymuje się na wyjątkach wykrytych w klatkach nieignorowanych lub przechodzących przez taką ramkę w stosie wywołań.
W następnym przykładzie widać, że Debuger został wstrzymany na wykrytym wyjątku zgłoszonym przez ignorowany parametr library.js, który przekazuje nieignorowane dane mycode.js.
Aby dowiedzieć się więcej o działaniu Debugera w przypadkach skrajnych, przetestuj zbiór scenariuszy na tej stronie demonstracyjnej.
Punkty przerwania funkcji
Wywołaj debug(functionName), gdzie functionName jest funkcją do debugowania, gdy chcesz
za każdym razem, gdy zostanie wywołana określona funkcja. Możesz wstawić do kodu element debug() (np.
console.log()) lub wywołaj ją z konsoli Narzędzi deweloperskich. debug() jest odpowiednikiem ustawienia
punkt przerwania wiersza kodu w pierwszym wierszu funkcji.
function sum(a, b) {
let result = a + b; // DevTools pauses on this line.
return result;
}
debug(sum); // Pass the function object, not a string.
sum();
Sprawdź, czy funkcja docelowa jest w zakresie
Narzędzia deweloperskie zgłaszają ReferenceError, jeśli funkcja, którą chcesz debugować, nie znajduje się w zakresie.
(function () {
function hey() {
console.log('hey');
}
function yo() {
console.log('yo');
}
debug(yo); // This works.
yo();
})();
debug(hey); // This doesn't work. hey() is out of scope.
Sprawdzenie, czy funkcja docelowa jest w zakresie, może być trudna do sprawdzenia, jeśli wywołujesz funkcję debug() z poziomu Narzędzi deweloperskich.
Konsola. Oto jedna strategia:
- Ustaw punkt przerwania wiersza kodu w miejscu, w którym funkcja jest w zakresie.
- Aktywuj punkt przerwania.
- Wywołaj funkcję
debug()w konsoli Narzędzi deweloperskich, gdy kod jest jeszcze wstrzymany w wierszu kodu między punktami przerwania.
Punkty przerwania typu zaufanego
Interfejs Trusted Type API zapewnia ochronę przed zabezpieczeniami. wykorzystują tzw. ataki typu cross-site scripting (XSS).
W sekcji Punkty przerwania w panelu Źródła przejdź do sekcji Punkty przerwania naruszeń zasad CSP i włącz jedną z tych opcji lub obie, a następnie wykonaj kod:
Sprawdź naruszenia ujścia (
).
W tym przykładzie wykonanie jest wstrzymane z powodu naruszenia ujścia.
Sprawdź naruszenia zasad (
).
W tym przykładzie wykonanie jest wstrzymane w przypadku naruszenia zasad. Zasady dotyczące zaufanego typu są konfigurowane za pomocą
trustedTypes.createPolicy.
Więcej informacji o korzystaniu z interfejsu API znajdziesz w tych miejscach:
- Aby jeszcze bardziej zwiększyć bezpieczeństwo, przeczytaj artykuł Zapobiegaj lukom w zabezpieczeniach skryptów między witrynami w modelu DOM za pomocą zaufanych typów.
- Informacje na temat debugowania znajdziesz w artykule Implementowanie debugowania CSP i zaufanych typów w Narzędziach deweloperskich w Chrome.