Użyj punktów przerwania, by wstrzymać kod JavaScript. W tym przewodniku opisujemy każdy typ punktu przerwania dostępny w Narzędziach deweloperskich oraz wyjaśniamy, kiedy go używać i jak ustawiać poszczególne z nich. Interaktywny samouczek na temat procesu debugowania znajdziesz w artykule Wprowadzenie do debugowania kodu JavaScript w Narzędziach deweloperskich w Chrome.
Kiedy używać poszczególnych typów punktów przerwania
Najbardziej znanym typem punktu przerwania jest wiersz kodu. Ustawianie punktów przerwania wiersza kodu może być jednak nieefektywne, zwłaszcza gdy nie wiesz dokładnie, gdzie szukać, lub pracujesz z dużą bazą kodu. Jeśli wiesz, jak i kiedy używać innych typów punktów przerwania, możesz zaoszczędzić czas podczas debugowania.
| Typ punktu przerwania | Użyj go, gdy chcesz ... |
|---|---|
| Wiersz kodu | Zatrzymaj się przy danym obszarze kodu. |
| Warunkowy wiersz kodu | Wstrzymaj przy dokładnym fragmencie kodu, ale tylko wtedy, gdy spełniony jest inny warunek. |
| Punkt logowania | Zarejestruj komunikat w konsoli bez wstrzymywania wykonywania. |
| DOM | Zatrzymaj się na kodzie, który zmienia lub usuwa określony węzeł DOM bądź jego elementy podrzędne. |
| XHR | Wstrzymaj, gdy adres URL XHR zawiera wzorzec ciągu znaków. |
| Detektor zdarzeń | Zatrzymaj się na kodzie, który uruchamia się po wywołaniu zdarzenia, np. click. |
| Wyjątek | Zatrzymaj się w wierszu kodu, który zgłasza przechwycony lub niewykryty wyjątek. |
| Funkcja | Wstrzymaj po wywołaniu określonej funkcji. |
| Zaufany typ | Wstrzymaj w przypadku naruszeń związanych z rekomendowanym typem. |
Punkty przerwania wiersza kodu
Punktów przerwania wiersza kodu używaj, gdy znasz dokładny region kodu, który chcesz zbadać. Narzędzia deweloperskie zawsze zawieszają się przed wykonaniem tego wiersza kodu.
Aby ustawić punkt przerwania wiersza kodu w Narzędziach deweloperskich:
- Kliknij kartę Źródła.
- Otwórz plik zawierający wiersz kodu, który chcesz podzielić.
- Przejdź do wiersza kodu.
- Na lewo od wiersza kodu znajduje się kolumna z numerem wiersza. Kliknij ją. U góry kolumny z numerem wiersza pojawi się niebieska ikona.
Ten przykład pokazuje punkt przerwania wiersza kodu ustawiony w wierszu 29.
Punkty przerwania wiersza kodu w kodzie
Zadzwoń pod numer debugger, używając kodu, aby zatrzymać się na tej linii. Odpowiada to punktowi przerwania wiersza kodu z tą różnicą, że jest on ustawiany 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 możesz użyć, gdy chcesz zatrzymać wykonanie, ale tylko wtedy, gdy jakiś warunek jest spełniony.
Takie punkty przerwania są przydatne, gdy chcesz pomijać przerwy, które nie mają związku z Twoim przypadkiem, zwłaszcza w pętli.
Aby ustawić warunkowy punkt przerwania wiersza kodu:
- Otwórz kartę Źródła.
- Otwórz plik zawierający wiersz kodu, który chcesz podzielić.
- Przejdź do wiersza kodu.
- Na lewo od wiersza kodu znajduje się kolumna z numerem wiersza. Kliknij je 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 jest uruchamiany tylko wtedy, gdy x przekroczy 10 w pętli w i=6 iteracji.
Rejestruj punkty przerwania wiersza kodu
Za pomocą punktów przerwania wiersza kodu (punktów logowania) loguj wiadomości w konsoli bez wstrzymywania wykonywania i bez zaśmiecania kodu wywołaniami console.log().
Aby ustawić punkt logowania:
- Otwórz kartę Źródła.
- Otwórz plik zawierający wiersz kodu, który chcesz podzielić.
- Przejdź do wiersza kodu.
- Na lewo od wiersza kodu znajduje się kolumna z numerem wiersza. Kliknij je 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 funkcji
console.log(message).Na przykład możesz zapisać:
"A string " + num, str.length > 1, str.toUpperCase(), objW tym przypadku zarejestrowany komunikat to:
// str = "test" // num = 3 // 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 dwiema kropkami.
Ten przykład przedstawia punkt logowania w wierszu 30, który rejestruje ciąg znaków i wartość zmiennej w konsoli.
Edytuj punkty przerwania wiersza kodu
Panel Punkty przerwania umożliwia wyłączanie, edytowanie i usuwanie punktów przerwania wierszy kodu.
Edytuj grupy punktów przerwania
Panel Punkty przerwania grupuje punkty przerwania według pliku i uporządkuje je według numerów wierszy i kolumn. Dzięki grupom możesz:
- Aby zwinąć lub rozwinąć grupę, kliknij jej nazwę.
- Aby włączyć lub wyłączyć poszczególne grupy bądź punkty przerwania, 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, znacznik w panelu Źródła będzie przezroczysty.
Grupy mają menu kontekstowe. W panelu Punkty przerwania kliknij grupę prawym przyciskiem myszy i wybierz:
- Usuń wszystkie punkty przerwania z pliku (grupy).
- 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, znacznik w panelu Źródła będzie przezroczysty. - Najedź kursorem na punkt przerwania i kliknij
, aby edytować, lub 
, aby go usunąć. Podczas edytowania punktu przerwania zmień jego typ na liście w edytorze wbudowanym.
Kliknij punkt przerwania prawym przyciskiem myszy, aby wyświetlić jego menu kontekstowe, i wybierz jedną z opcji:
- Ujawnij 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 punkty przerwania: wyłącz, usuń, edytuj warunek, pokaż lokalizację za pomocą menu i zmień typ zmiany.
Punkty przerwania zmiany DOM
Punktu przerwania zmiany DOM używaj, gdy chcesz zatrzymać się na kodzie, który zmienia węzeł DOM lub jego elementy podrzędne.
Aby ustawić punkt przerwania zmiany DOM:
- Kliknij kartę Elementy.
- Przejdź do elementu, dla którego chcesz ustawić punkt przerwania.
- Kliknij element prawym przyciskiem myszy.
- Najedź kursorem na Przerwij w, a następnie wybierz Modyfikacje poddrzewa, Modyfikacje atrybutów lub Usuwanie węzła.
Ten przykład przedstawia menu kontekstowe do tworzenia punktu przerwania zmiany DOM.
Listę punktów przerwania zmian DOM znajdziesz w tych miejscach:
- Panel Elementy > Punkty przerwania DOM.
- Źródła > Punkty przerwania DOM.
W tym miejscu możesz:
- Możesz je włączać i wyłączać w
. - Kliknij prawym przyciskiem myszy i wybierz Usuń lub Pokaż je w DOM.
Typy punktów przerwania zmian DOM
- Modyfikacje drzewa podrzędnego. Wywoływane, gdy element podrzędny aktualnie wybranego węzła zostanie usunięty lub dodany albo gdy zmieni się zawartość węzła podrzędnego. Nie jest aktywowany po zmianie atrybutów węzła podrzędnego ani po żadnych zmianach w aktualnie wybranym węźle.
- Modyfikacje atrybutów: aktywowane po dodaniu lub usunięciu atrybutu w aktualnie wybranym węźle albo po zmianie wartości atrybutu.
- Usunięcie węzła: wywoływane po usunięciu aktualnie wybranego węzła.
Punkty przerwania XHR/pobrania
Użyj punktu przerwania XHR/pobrania, gdy chcesz przerwać, gdy URL żądania XHR zawiera określony ciąg. DevTools wstrzymuje wiersz kodu, w którym XHR wywołuje send().
Może się tak zdarzyć, gdy np. zorientujesz się, że strona żąda nieprawidłowego adresu URL i chcesz szybko znaleźć kod źródłowy AJAX lub Fetch, który powoduje nieprawidłowe żądanie.
Aby ustawić punkt przerwania XHR/pobrania:
- Kliknij kartę Źródła.
- Rozwiń panel Punkty przerwania XHR.
- Kliknij
Dodaj punkt przerwania. - Wpisz ciąg znaków, który chcesz podzielić. DevTools zatrzymuje się, gdy ten ciąg znaków będzie dostępny w adresie URL żądania XHR.
- Naciśnij Enter, aby potwierdzić.
Ten przykład pokazuje, jak utworzyć punkt przerwania XHR/pobrania w punkcie XHR/punkty przerwania pobierania dla dowolnego żądania zawierającego org w adresie URL.
Punkty przerwania detektora zdarzeń
Punktów przerwania detektora zdarzeń używaj, gdy chcesz wstrzymać działanie kodu detektora, który uruchamia się po wywołaniu zdarzenia. Możesz wybrać konkretne zdarzenia, np. click, lub kategorie zdarzeń, na przykład wszystkie zdarzenia myszy.
- Kliknij kartę Źródła.
- Rozwiń panel Punkty przerwania detektora. Narzędzia deweloperskie wyświetlają listę kategorii zdarzeń, np. Animacja.
- Zaznacz jedną z tych kategorii, by wstrzymać działanie po każdym wywołaniu dowolnego zdarzenia z danej kategorii, lub rozwiń kategorię i sprawdź konkretne zdarzenie.
Ten przykład pokazuje, jak utworzyć punkt przerwania detektora zdarzeń w: deviceorientation.
Dodatkowo Debugger wstrzymuje działanie zdarzeń, które występują w instancjach internetowych i workletach dowolnego typu, w tym Workletów pamięci współdzielonej.
Ten przykład pokazuje, jak Debuger został wstrzymany po zdarzeniu setTimer, które wystąpiło w skrypcie service worker.
Listę detektorów zdarzeń znajdziesz też w panelu Elementy > Detektory zdarzeń.
Punkty przerwania wyjątków
Punktów przerwania wyjątku używaj, gdy chcesz zatrzymać się w wierszu kodu, który zgłasza przechwycony lub niewyłapany wyjątek. Możesz wstrzymać oba te wyjątki niezależnie od siebie w dowolnej sesji debugowania innej niż Node.js.
W panelu Punkty przerwania na karcie Źródła włącz jedną z tych opcji lub obie, a następnie uruchom kod:
Zaznacz
Wstrzymaj przy niewykrytych wyjątkach.
W tym przykładzie wykonanie jest wstrzymywane w przypadku niewykrytego wyjątku.
Zaznacz
Wstrzymaj przy wykrytych wyjątkach.
W tym przykładzie wykonanie jest wstrzymywane w przypadku wykrytego wyjątku.
Wyjątki w wywołaniach asynchronicznych
Gdy pole wyboru „przechwycone” i „niewyłapane” jest włączone, Debugger próbuje wstrzymać działanie odpowiednich wyjątków zarówno w wywołaniach synchronicznych, jak i asynchronicznych. W przypadku asynchronicznym Debugger szuka modułów obsługi odrzucania w obietnicach, aby określić, kiedy należy się zatrzymać.
Wychwycone wyjątki i zignorowany kod
Gdy włączona jest lista ignorowanych, Debuger zatrzymuje się przy wyjątkach wychwyconych w nieignorowanych ramkach lub przechodzących przez taką ramkę w stosie wywołań.
Następny przykład pokazuje działanie Debugera wstrzymanego w związku z wyjątkiem zgłoszonym przez zignorowany library.js, który przechodzi przez nieignorowany mycode.js.
Aby dowiedzieć się więcej o działaniu Debugera w przypadkach brzegowych, przetestuj zbiór scenariuszy na tej stronie demonstracyjnej.
Punkty przerwania funkcji
Wywołaj debug(functionName), gdzie functionName to funkcja, którą chcesz debugować, jeśli chcesz wstrzymać działanie po każdym wywołaniu określonej funkcji. Możesz wstawić debug() do kodu (jak instrukcja console.log()) lub wywołać go z poziomu konsoli Narzędzi deweloperskich. debug() jest odpowiednikiem ustawienia punktu 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 znajduje się w zakresie
Narzędzia deweloperskie zwracają błąd 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.
Zapewnienie, że funkcja docelowa znajduje się w zakresie, może być trudne, jeśli wywołujesz debug() z konsoli narzędzi deweloperskich. Oto jedna strategia:
- Ustaw punkt przerwania wiersza kodu w miejscu, w którym funkcja mieści się w zakresie.
- Aktywuj punkt przerwania.
- Wywołaj metodę
debug()w konsoli Narzędzi deweloperskich, gdy kod w punkcie przerwania wiersza kodu jest wciąż wstrzymany.
Punkty przerwania typu zaufanego
Trusted Type API zapewnia ochronę przed atakami hakerów cross-site scripting (XSS).
W panelu Punkty przerwania na karcie Źródła przejdź do sekcji Punkty przerwania naruszenia zasad CSP i włącz jedną z tych opcji lub obie, a następnie uruchom kod:
Zaznacz
Naruszenia ujścia.
W tym przykładzie wykonanie jest wstrzymane w przypadku naruszenia ujścia.
Sprawdź
Naruszenia zasad.
W tym przykładzie wykonanie zostało wstrzymane z powodu naruszenia zasad. Zasady typu zaufanego konfiguruje się za pomocą narzędzia
trustedTypes.createPolicy.
Więcej informacji o korzystaniu z interfejsu API znajdziesz:
- Aby lepiej zadbać o bezpieczeństwo, przeczytaj artykuł o zapobieganiu lukom w zabezpieczeniach opartych na DOM przy użyciu zaufanych typów skryptów w witrynach.
- Informacje na temat debugowania znajdziesz w artykule Wdrażanie debugowania CSP i zaufanego typu w Narzędziach deweloperskich w Chrome.