Użyj punktów przerwania, aby wstrzymać kod JavaScript. W tym przewodniku opisujemy poszczególne typy punktów przerwania dostępnych w Narzędziach deweloperskich, a także wyjaśniamy, 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 Chrome.
Omówienie sytuacji, w których należy używać poszczególnych typów punktów granicznych
Najbardziej znanym typem punktu przerwania jest linia kodu. Jednak ustawianie punktów przerwania wiersza kodu może być nieefektywne, zwłaszcza gdy nie wiesz dokładnie, gdzie szukać, lub pracujesz z dużą bazą kodu. Wiedząc, jak i kiedy używać innych typów punktów przerwania, możesz zaoszczędzić czas podczas debugowania.
| Typ punktu przerwania | Używaj, gdy chcesz ... |
|---|---|
| Linia kodu | Wstrzymaj ruch w konkretnym fragmencie kodu. |
| Warunkowy wiersz kodu | Wstrzymanie działania w określonym regionie kodu, ale tylko wtedy, gdy spełniony jest inny warunek. |
| Logpoint | Zarejestruj komunikat w Konsoli bez wstrzymywania wykonania. |
| DOM, | Wstrzymaj kod, który zmienia lub usuwa określony węzeł DOM lub jego elementy podrzędne. |
| XHR | Wstrzymaj, gdy adres URL XHR zawiera wzór ciągu znaków. |
| Detektor zdarzenia | Wstrzymaj kod, który działa po wywołaniu zdarzenia, np. click. |
| Wyjątek | Wstrzymaj wiersz kodu, który powoduje wyrzucenie wyjątku (wykryty lub niewykryty). |
| Funkcja | Wstrzymaj przy każdym wywołaniu konkretnej funkcji. |
| Typ zaufania | Wstrzymanie przy naruszeniach zasad dotyczących zaufanych typów. |
Punkty przerwania wiersza kodu
Użyj punktu przerwania kodu, gdy znasz dokładny obszar kodu, który chcesz zbadać. DevTools zawsze się zatrzymuje przed wykonaniem tego wiersza kodu.
Aby ustawić punkt przerwania w kodzie 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ą. U góry kolumny z numerem wiersza pojawi się niebieska ikona.
Ten przykład pokazuje punkt przerwania kodu ustawiony w wierszu 29.
punkty kontrolne w kodzie,
Zadzwoń pod numer debugger ze swojego kodu, aby zatrzymać się na tej linii. Jest to odpowiednik punktu przerwania wiersza kodu, z tym że jest on ustawiony w kodzie, a nie w interfejsie Narzędzi deweloperskich.
console.log('a');
console.log('b');
debugger;
console.log('c');
Warunkowe punkty przerwania w linii kodu
Użyj warunkowego punktu przerwania linii kodu, gdy chcesz zatrzymać wykonywanie programu, ale tylko wtedy, gdy spełniony jest określony warunek.
Takie punkty przełamania są przydatne, gdy chcesz pominąć przerwy, które nie mają znaczenia w Twoim przypadku, zwłaszcza w pętli.
Aby ustawić warunkowy punkt przerwania w linii kodu:
- Otwórz panel Źródła.
- Otwórz plik zawierający wiersz kodu, który chcesz przerwać.
- Przejdź do wiersza kodu.
- Po lewej stronie wiersza kodu znajduje się kolumna z numerem wiersza. Kliknij go prawym przyciskiem myszy.
- Kliknij Dodaj warunkowy punkt przerwania. Pod wierszem kodu wyświetli się okno.
- Wpisz stan w oknie dialogowym.
- Naciśnij Enter, aby aktywować punkt przerwania. Powyżej kolumny numeru wiersza pojawi się pomarańczowa ikona z iksem.
Ten przykład pokazuje warunek w linii kodu, który jest wykonywany tylko wtedy, gdy wartość x jest większa niż 10 w pętli w iteracji i=6.
Logowanie punktów przerwania linii kodu
Używaj punktów przerwania w linii kodu (punktów logowania), aby rejestrować komunikaty w Konsoli bez wstrzymywania wykonania i zaśmiecania kodu wywołaniami funkcji console.log().
Aby ustawić punkt logowania:
- Otwórz panel Źródła.
- Otwórz plik zawierający wiersz kodu, który chcesz przerwać.
- Przejdź do wiersza kodu.
- Po lewej stronie wiersza kodu znajduje się kolumna z numerem wiersza. Kliknij go prawym przyciskiem myszy.
- Kliknij Dodaj punkt logowania. Pod wierszem kodu wyświetli się okno.
Wpisz wiadomość z dziennika w oknie. Możesz użyć tej samej składni co w przypadku wywołania
console.log(message).Możesz na przykład rejestrować:
"A string " + num, str.length > 1, str.toUpperCase(), objW tym przypadku zarejestrowany komunikat:
// str = "test" // num = 42 // obj = {attr: "x"} A string 42 true TEST {attr: 'x'}Aby aktywować punkt przerwania, naciśnij Enter. U góry kolumny numeru linii pojawi się różowa ikona z 2 kropkami.
Ten przykład pokazuje punkt logowania na linii 30, który rejestruje ciąg znaków i wartość zmiennej w Konsoli.
Edytowanie punktów przerwania w kodzie
W sekcji Punkty przerwania możesz wyłączać, edytować i usuwać punkty przerwania wiersza kodu.
Edytowanie grup punktów przerwania
Sekcja Punkty przerwania grupuje punkty przerwania według pliku i porządkuje je według numerów wiersza i kolumny. W grupach możesz wykonywać te czynności:
- Aby zwinąć lub rozwinąć grupę, kliknij jej nazwę.
- Aby włączyć lub wyłączyć grupę lub punkt kontrolny, kliknij
obok grupy lub punktu kontrolnego. - 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.
- usunąć wszystkie punkty przerwania (we wszystkich plikach).
- usunąć inne punkty przerwania (w innych grupach).
Edytuj punkty przerwania
Aby edytować punkt przerwania:
- Kliknij
obok punktu kontrolnego, 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 kontrolnego 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.
- usunąć inne punkty przerwania (we wszystkich plikach).
- usunąć wszystkie punkty przerwania (we wszystkich plikach).
Obejrzyj film, aby zobaczyć, jak działają różne opcje edycji punktów kontrolnych: wyłączanie, usuwanie, edytowanie warunku, wyświetlanie lokalizacji z menu i zmienianie typu.
Pomijanie punktów przerwania za pomocą opcji „Nigdy nie wstrzymuj w tym miejscu”
Aby pominąć pauzy, które występują z innych powodów, użyj punktu przecięcia kodu o nazwie Never pause here. 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:
- Na panelu Źródła otwórz plik źródłowy i znajdź wiersz, którego nie chcesz podzielić.
- Kliknij prawym przyciskiem myszy numer wiersza w kolumnie Numer wiersza po lewej stronie obok instrukcji, która powoduje przerwanie.
- 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 wstrzymywać tutaj pozwala wyciszyć instrukcje debuggera i wszystkie inne typy punktów przerwania z wyjątkiem punktów przerwania w wierszu kodu i punktów przerwania detektora zdarzeń.
Wyrażenie Never pause here może nie działać w wierszu z wieloma instrukcjami, jeśli instrukcja, która nie powinna być wstrzymywana, różni się od instrukcji, która powoduje wstrzymanie. W źródłowym kodzie mapowanym nie każda lokalizacja punktu przecięcia odpowiada pierwotnemu oświadczeniu, które powoduje przerwę.
Punkty przerwania zmian w DOM
Użyj punktu przerwania zmiany modelu DOM, gdy chcesz wstrzymać kod, który zmienia węzeł modelu DOM lub jego elementy.
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ź na Przerwij, a następnie wybierz Modyfikacje poddrzewa, Modyfikacje atrybutów lub Usuwanie węzła.
Ten przykład pokazuje menu kontekstowe do tworzenia punktu zmiany w DOM.
Listę punktów przerwania zmian w DOM znajdziesz w:
- Panel Elementy > Punkty przerwania DOM.
- Źródła > Panel boczny Punkty przerwania DOM.
Możesz tam:
- Możesz je włączać i wyłączać za pomocą
. - Kliknij prawym przyciskiem myszy > Usuń lub Pokaż w DOM.
Typy punktów przerwania zmian w DOM
- Modyfikacje poddrzewa. Wywoływane, gdy węzeł podrzędny bieżąco wybranego węzła zostanie usunięty lub dodany albo gdy zmieni się zawartość węzła podrzędnego. Nie jest wywoływany w przypadku zmian atrybutów węzła podrzędnego ani zmian w bieżąco wybranym węźle.
- Modyfikacje atrybutów: wywoływane po dodaniu lub usunięciu atrybutu w obecnie wybranym węźle albo gdy zmieni się jego wartość.
- Usuwanie węzła: wywoływane po usunięciu aktualnie wybranego węzła.
Punkty przerwania żądań XHR/pobrania
Użyj punktu przerwania żądań XHR/pobrania, gdy chcesz przerwać działanie, gdy adres URL żądania XHR zawiera określony ciąg znaków. Narzędzia deweloperskie wstrzymają się na wierszu kodu, w którym wywołanie XHR to send().
Może się to przydać np. wtedy, gdy zauważysz, że Twoja strona wysyła żądanie do nieprawidłowego adresu URL, a Ty chcesz szybko znaleźć kod źródłowy AJAX lub Fetch, który powoduje nieprawidłowe żądanie.
Aby ustawić punkt przerwania żądań XHR/pobrania:
- Kliknij panel Źródła.
- Rozwiń panel Punkty przerwania żądań XHR.
- Kliknij
Dodaj punkt przerwania. - Wpisz ciąg znaków, który chcesz podzielić. Narzędzia deweloperskie wstrzymują się, gdy ten ciąg znaków występuje w dowolnym miejscu w adresie URL żądania XHR.
- Aby potwierdzić, naciśnij Enter.
Ten przykład pokazuje, jak utworzyć punkt przerwania żądań XHR/pobrania w sekcji Punkty przerwania żądań XHR/pobrania dla dowolnego żądania zawierającego w adresie URL ciągorg.
Punkty przerwania detektora zdarzeń
Jeśli chcesz wstrzymać działanie kodu odbiornika po wywołaniu zdarzenia, używaj punktów przerwania detektora zdarzeń. Możesz wybrać konkretne zdarzenia, np. click, lub kategorie zdarzeń, np. wszystkie zdarzenia myszy.
- Kliknij panel Źródła.
- Rozwiń panel Punkty przerwania detektora zdarzeń. Narzędzia deweloperskie wyświetlają listę kategorii zdarzeń, takich jak Animacja.
- Zaznacz jedną z tych kategorii, aby wstrzymać działanie reklamy, gdy zostanie wywołane dowolne zdarzenie z tej kategorii, lub rozwiń kategorię i zaznacz konkretne zdarzenie.
Ten przykład pokazuje, jak utworzyć punkt przerwania detektora zdarzeń dla deviceorientation.
Dodatkowo debuger wstrzymuje działanie na zdarzeniach, które występują w elementach roboczych sieci lub elementach roboczych dowolnego typu, w tym elementach roboczych udostępnionego miejsca na dane.
Ten przykład pokazuje Debuger wstrzymany na zdarzeniu setTimer, które miało miejsce w usługowym workerze.
Listę detektorów zdarzeń znajdziesz też w panelu Elementy > Detektory zdarzeń.
Punkty przerwania wyjątków
Użyj punktów przerwania wyjątku, gdy chcesz wstrzymać działanie programu na linii kodu, która powoduje wyjątek złapany lub niezłapany. Możesz wstrzymywać działanie obu tych wyjątków niezależnie w dowolnej sesji debugowania innej niż Node.js.
W sekcji Punkty przerwania w panelu Źródła włącz jedną lub obie z tych opcji, a następnie wykonaj kod:
Zaznacz
Wstrzymaj przy niewykrytych wyjątkach.
W tym przykładzie wykonanie jest wstrzymywane przy niewykrytym 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 asynchroniczności Debuger wyszukuje w obietnicach obsługi odrzucenia, aby określić, kiedy się zatrzymać.
Przechwycone wyjątki i ignorowany kod
Gdy włączona jest lista ignorowanych, debuger zatrzymuje się na wyjątkach wykrytych w ramkach nieignorowanych lub przechodzących przez taki element w zbiorze wywołań.
Następujący przykład pokazuje Debuger wstrzymany na wyjętym z uwzględnienia wyjątku library.js, który przechodzi przez niewyjęty z uwzględnienia mycode.js.
Aby dowiedzieć się więcej o działaniu Debuggera w trudnych przypadkach, przetestuj zbiór scenariuszy na tej stronie demonstracyjnej.
Punkty przerwania funkcji
Wywołaj funkcję debug(functionName), gdzie functionName to funkcja, którą chcesz debugować, gdy chcesz wstrzymać działanie programu po wywołaniu określonej funkcji. Możesz wstawić debug() do kodu (np. jako instrukcję console.log()) lub wywołać go z konsoli Narzędzi deweloperskich. debug() jest równoznaczne z ustawieniem punktu przerwania kodu na 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();
Upewnij się, że funkcja docelowa znajduje się w zakresie
Jeśli funkcja, którą chcesz debugować, nie jest uwzględniona w zakresie, narzędzia deweloperskie zwraca błąd ReferenceError.
(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 znajduje się w zakresie, może być trudne, jeśli wywołujesz funkcję debug() z poziomu konsoli DevTools. Oto jedna z nich:
- Ustaw punkt przerwania w kodzie w miejscu, w którym funkcja jest widoczna.
- Wywołaj punkt przerwania.
- Wywołaj
debug()w konsoli Narzędzia deweloperskie, gdy kod jest nadal wstrzymany na punkcie przerwania w linii kodu.
Punkty przerwania zaufanych typów
Interfejs Trusted Type API zapewnia ochronę przed lukami w zabezpieczeniach, które są wykorzystywane w atakach cross-site scripting (XSS).
W sekcji Punkty kontrolne w panelu Źródła przejdź do sekcji Punkty kontrolne naruszenia zasad CSP i włącz jedną lub obie z tych opcji, a potem wykonaj kod:
Sprawdź
Naruszenie ujścia.
W tym przykładzie wykonanie jest wstrzymane z powodu naruszenia dotyczącego zlewania.
Sprawdź
Naruszenia zasad.
W tym przykładzie wykonanie jest wstrzymane z powodu naruszenia zasad. Zasady zaufanych typów są konfigurowane za pomocą
trustedTypes.createPolicy.
Więcej informacji o korzystaniu z interfejsu API:
- Aby uzyskać więcej informacji o bezpieczeństwie, przeczytaj artykuł Zapobieganie lukom w zabezpieczeniach związanych z cross-site scriptingiem w DOM za pomocą zaufanych typów.
- Aby debugować, zapoznaj się z artykułem Wdrażanie CSP i debugowanie zaufanych typów w narzędziach Chrome DevTools.