Dokumentacja debugowania JavaScript

Kayce Basques

Sofia Emelianova

Poznaj nowe procesy debugowania dzięki temu obszernemu przewodnikowi po funkcjach debugowania w Narzędziach deweloperskich w Chrome.

Przeczytaj artykuł Pierwsze kroki z debugowaniem JavaScriptu w Narzędziach deweloperskich w Chrome, aby poznać podstawy debugowania.

Wstrzymaj kod z punktami przerwania

Ustaw punkt przerwania, aby móc wstrzymywać kod w trakcie jego wykonywania. Aby dowiedzieć się, jak ustawiać punkty przerwania, zapoznaj się z sekcją Pause Your Code with Breakpoints (Wstrzymywanie kodu za pomocą punktów przerwania).

Sprawdź wartości po wstrzymaniu

Gdy wykonywanie jest wstrzymane, debuger sprawdza wszystkie zmienne, stałe i obiekty w bieżącej funkcji aż do punktu przerwania. Debuger wyświetla bieżące wartości w tekście obok odpowiednich deklaracji.

Za pomocą Konsoli możesz wysyłać zapytania o ocenione zmienne, stałe i obiekty.

Wyświetlanie podglądu właściwości klasy/funkcji po najechaniu kursorem

Gdy wykonanie jest wstrzymane, najedź kursorem na nazwę klasy lub funkcji, aby wyświetlić podgląd jej właściwości.

Kod kroku

Gdy kod zostanie wstrzymany, przejdź przez niego krok po kroku, badając po drodze przepływ sterowania i wartości właściwości.

Przejdź nad wiersz kodu

po wstrzymaniu w wierszu kodu zawierającego funkcję nieistotną dla problemu, z którym masz do czynienia kliknij Przejdź. w celu wykonania funkcji bez wchodzenia w interakcję.

Załóżmy na przykład, że debugujesz następujący kod:

function updateHeader() {
  var day = new Date().getDay();
  var name = getName(); // A
  updateName(name); // D
}
function getName() {
  var name = app.first + ' ' + app.last; // B
  return name; // C
}

Twój kanał A został wstrzymany. Po naciśnięciu przycisku Przejdź przez Narzędzia deweloperskie uruchamiają cały kod w funkcji, która przekraczasz granicę, czyli B i C. Narzędzia deweloperskie wstrzymają działanie w miejscu D.

Wejdź do wiersza kodu

Gdy zatrzymasz się na wierszu kodu zawierającym wywołanie funkcji związane z rozwiązywanym problemem, kliknij Wejdź , aby dokładniej zbadać tę funkcję.

Załóżmy na przykład, że debugujesz ten kod:

function updateHeader() {
  var day = new Date().getDay();
  var name = getName(); // A
  updateName(name);
}
function getName() {
  var name = app.first + ' ' + app.last; // B
  return name;
}

Twój kanał A został wstrzymany. Po naciśnięciu przycisku Wejdź do Narzędzia deweloperskie uruchamiają ten wiersz kodu, a następnie zatrzymują się B

Wyjdź poza wiersz kodu

Po wstrzymaniu w obrębie funkcji niezwiązanej z problemem, który debugujesz, kliknij przycisk Krok wykonać , by wykonać resztę do kodu funkcji.

Załóżmy na przykład, że debugujesz następujący kod:

function updateHeader() {
  var day = new Date().getDay();
  var name = getName();
  updateName(name); // C
}
function getName() {
  var name = app.first + ' ' + app.last; // A
  return name; // B
}

Twój kanał A został wstrzymany. Gdy naciśniesz Wyloguj się, Narzędzia deweloperskie wykona resztę kodu w getName(), czyli tylko B w tym przykładzie. Kończy się C.

Uruchom cały kod do określonego wiersza

Podczas debugowania długiej funkcji może być wiele kodu niezwiązanego z problemem, z którym masz do czynienia. i debugowaniu.

Możesz przejść wszystkie linie, ale to może być uciążliwe. Możesz ustawić punkt przerwania w linii kodu, która Cię interesuje, a potem nacisnąć Wznów wykonywanie skryptu, ale istnieje szybszy sposób.

Kliknij prawym przyciskiem myszy wiersz kodu, który Cię interesuje, i wybierz Przejdź do tego miejsca. DevTools uruchamia cały kod do tego punktu, a potem zatrzymuje się na tej linii.

Wznów wykonywanie skryptu

Aby kontynuować wykonywanie skryptu po wstrzymaniu, kliknij Wznów wykonywanie skryptu DevTools wykona skrypt do następnego punktu przerwania (jeśli taki istnieje).

Wymuszanie wykonywania skryptu

Aby zignorować wszystkie punkty przerwania i wymusić wznowienie wykonywania skryptu, kliknij i przytrzymaj Wznów skrypt Wykonanie a następnie wybierz Wymuś wykonanie skryptu

Zmienianie kontekstu wątku

Podczas pracy ze skryptami internetowymi lub service workerami kliknij kontekst wymieniony w panelu Wątki, aby lub przełączenia się do tego kontekstu. Niebieska strzałka wskazuje, który kontekst jest obecnie wybrany.

Na powyższym zrzucie ekranu panel Wątek jest obrysowany na niebiesko.

Załóżmy na przykład, że jesteś wstrzymany w punkcie przerwania zarówno w głównym skrypcie, jak i w usłudze skrypt instancji roboczej. Chcesz wyświetlić właściwości lokalne i globalne w kontekście usługi, ale panel Źródła pokazuje główny kontekst skryptu. Klikając wpis skryptu service worker w w panelu Wątki, możesz przełączyć się na ten kontekst.

Przejdź przez wyrażenia rozdzielane przecinkami

Interpretacja wyrażeń rozdzielanych przecinkami pozwala debugować zminifikowany kod. Weźmy na przykład ten kod:

function foo() {}

function bar() {
  foo();
  foo();
  return 42;
}

bar();

Po zmniejszeniu zawiera rozdzielane przecinkami wyrażenie foo(),foo(),42:

function foo(){}function bar(){return foo(),foo(),42}bar();

Debuger przetwarza takie wyrażenia w taki sam sposób.

Dlatego sposób działania jest identyczny:

• Pomiędzy zminiaturyzowanym a autorskim kodem.
• Jeśli używasz map źródłowych do debugowania zminifikowanego kodu pod kątem kodu oryginalnego. Inaczej mówiąc, jeśli widzisz średniki, możesz je zawsze pominąć, nawet jeśli rzeczywiste źródło, które debugujesz, jest zminimalizowane.

Wyświetlanie i edytowanie nieruchomości lokalnych, zamkniętych i globalnych

Po wstrzymaniu w wierszu kodu możesz w panelu Zakres wyświetlać i edytować wartości właściwości oraz w zakresach lokalnych, zamkniętych i globalnych.

• Aby zmienić wartość właściwości, kliknij ją dwukrotnie.
• Właściwości, których nie można wyliczać, są wyszarzone.

Panel Zakres na zrzucie ekranu powyżej jest zaznaczony na niebiesko.

Wyświetlanie bieżącego stosu wywołań

Gdy zatrzymasz kursor na wierszu kodu, możesz wyświetlić panel Wyraźnie ustrukturyzowany kod, aby zobaczyć wywołania, które doprowadziły do tego miejsca.

Kliknij wpis, aby przejść do wiersza kodu, w którym wywołana została ta funkcja. Ikona niebieskiej strzałki reprezentuje funkcję, która jest obecnie podświetlana w Narzędziach deweloperskich.

Panel Stosu wywołań na zrzucie ekranu powyżej jest zaznaczony na niebiesko.

Ponowne uruchamianie funkcji (ramki) w stosie wywołań

Aby obserwować działanie funkcji i ponowić jej wykonywanie bez konieczności ponownego uruchamiania całego procesu debugowania, możesz wznowić wykonywanie pojedynczej funkcji, gdy jest ona wstrzymana. Inaczej mówiąc, możesz ponownie uruchomić ramkę funkcji w stosie wywołań.

Aby ponownie uruchomić ramkę:

1. Wstrzymaj wykonywanie funkcji w punkcie przerwania. Panel Stos wywołań rejestruje kolejność wywołań funkcji.

2. W panelu Stos wywołań kliknij funkcję prawym przyciskiem myszy i wybierz z menu Uruchom ponownie ramkę.

   

Aby zrozumieć, jak działa opcja Uruchom ponownie ramkę, przeanalizuj ten kod:

function foo(value) {
    console.log(value);
    bar(value);
}

function bar(value) {
    value++;
    console.log(value);
    debugger;
}

foo(0);

Funkcja foo() przyjmuje 0 jako argument, rejestruje go i wywołuje funkcję bar(). Funkcja bar() z kolei zwiększa wartość argumentu.

Spróbuj ponownie utworzyć ramki obu funkcji w ten sposób:

1. Skopiuj powyższy kod do nowego fragmentu kodu i uruchom go. Wykonanie jest zatrzymywane w punkcie przerwania wiersza kodu debugger.
2. Zwróć uwagę, że debuger pokazuje bieżącą wartość obok deklaracji funkcji: value = 1.
3. Ponownie uruchom ramkę bar().
4. Aby przejść do instrukcji przyrostu wartości, naciśnij F9. Zwróć uwagę, że bieżąca wartość rośnie: value = 2.
5. Opcjonalnie w panelu Zakres kliknij dwukrotnie wartość, aby ją edytować i ustawić odpowiednią wartość.

6. Spróbuj ponownie uruchomić ramkę bar() i jeszcze kilka razy wykonać instrukcję przyrostu. Wartość stale rośnie.

Ponowna inicjalizacja ramki nie powoduje zresetowania argumentów. Inaczej mówiąc, ponowne uruchomienie nie przywraca początkowego stanu w przypadku wywołania funkcji. Zamiast tego przenosi wskaźnik wykonania na początek funkcji.

Dlatego bieżąca wartość argumentu pozostaje w pamięci podczas ponownego uruchamiania tej samej funkcji.

1. Teraz ponownie uruchom ramkę foo() w sekcji Stos wywołań. Zwróć uwagę, że wartość znowu wynosi 0.

W JavaScripcie zmiany w argumentach nie są widoczne (uwzględniane) poza funkcją. Funkcje zagnieżdżone otrzymują wartości, a nie ich lokalizacje w pamięci. 1. Aby ukończyć ten samouczek, wznów wykonywanie skryptu (F8).

Pokaż klatki z listy ignorowanych

Domyślnie w panelu Stos wywołań widoczne są tylko ramki, które mają zastosowanie w kodzie, z pominięciem skryptów dodanych do sekcji Ustawienia > Lista ignorowanych.

Aby wyświetlić pełny zrzut stosu wywołania, w tym ramki zewnętrzne, w sekcji Zrzut stosu wywołania włącz opcję Pokaż ramki z listy ignorowanych.

Wypróbuj tę stronę demonstracyjną:

1. W panelu Źródła otwórz plik src > app > app.component.ts.
2. Ustaw punkt przerwania dla funkcji increment().
3. W sekcji Stos wywołań zaznacz lub odznacz pole wyboru Pokaż ramki na liście ignorowanych i zobacz odpowiednią lub pełną listę klatek w stosie wywołań.

Wyświetlanie asynchronicznych ramek

Jeśli Twoja platforma je obsługuje, Narzędzia deweloperskie mogą śledzić operacje asynchroniczne przez połączenie obu części kodu asynchronicznego.

W tym przypadku zbiór wywołań zawiera całą historię wywołań, w tym ramki wywołań asynchronicznych.

Skopiuj zrzut stosu

Kliknij prawym przyciskiem myszy dowolne miejsce w panelu Stos wywołań i wybierz Kopiuj ścieżkę wywołań, aby skopiować bieżący stos wywołań do schowka.

Oto przykładowe dane wyjściowe:

getNumber1 (get-started.js:35)
inputsAreEmpty (get-started.js:22)
onClick (get-started.js:15)

Poruszanie się po drzewie plików

Do poruszania się po drzewie plików używaj panelu Strona.

Grupowanie w drzewie plików utworzonych i wdrożonych plików

Podczas tworzenia aplikacji internetowych za pomocą frameworków (np. React lub Angular) może być trudno poruszać się po źródłach ze względu na zminiaturyzowane pliki wygenerowane przez narzędzia do kompilacji (np. webpack lub Vite).

Aby ułatwić Ci poruszanie się po źródłach, panel Źródła > Strona może grupować pliki w 2 kategorie:

• Autor. Są podobne do plików źródłowych, które wyświetlasz w IDE. Narzędzia deweloperskie generują te pliki na podstawie map źródłowych z narzędzi do kompilacji.
• Wdrożony. Rzeczywiste pliki odczytywane przez przeglądarkę. Zwykle są one zminifikowane.

Aby włączyć grupowanie, włącz > Grupuj pliki według autora/wdrożenia w menu z 3 kropkami u góry drzewa plików.

Ukryj źródła z listy ignorowanych w drzewie plików

Aby ułatwić Ci skupienie się tylko na tworzeniu kodu, otwórz sekcję Źródła > Okienko Strona wyszarzy wszystkie skrypty i katalogi dodane do Ustawień > . domyślnie Ignoruj listę.

Aby ukryć takie skrypty, wybierz Źródła > Strona >  > Ukryj źródła na liście ignorowanych .

Ignorowanie skryptu lub wzorca skryptów

Ignorowanie skryptu, aby go pominąć podczas debugowania. Zignorowanie skryptu ukryte w panelu Stos wywołań i nigdy nie przechodzisz do funkcji skryptu, za pomocą kodu.

Załóżmy na przykład, że pracujesz nad tym kodem:

function animate() {
  prepare();
  lib.doFancyStuff(); // A
  render();
}

A to zaufana biblioteka innej firmy. Jeśli masz pewność, że debugowany problem nie ma związku z biblioteką zewnętrzną, warto zignorować skrypt.

Ignorowanie skryptu lub katalogu w drzewie plików

Aby zignorować pojedynczy skrypt lub cały katalog:

1. W sekcji Źródła > Strona, kliknij prawym przyciskiem myszy katalog lub plik skryptu.
2. Wybierz Dodaj katalog lub skrypt do listy ignorowanych.

Jeśli nie ukryjesz źródeł z listy ignorowanych, możesz wybrać takie źródło w drzewie plików, a następnie na banerze ostrzegawczym kliknij Usuń z listy ignorowanych lub Skonfiguruj.

Możesz też usunąć ukryte i ignorowane katalogi oraz skrypty, wybierając Ustawienia > Lista ignorowanych.

Ignorowanie skryptu w panelu edytora

Aby zignorować skrypt w panelu Edytor:

1. Otwórz plik.
2. Kliknij prawym przyciskiem myszy dowolne miejsce.
3. Wybierz Dodaj skrypt do listy ignorowanych.

Skrypt można usunąć z listy ignorowanych, klikając Ustawienia > Lista ignorowanych.

Ignorowanie skryptu w panelu Stos wywołań

Aby zignorować skrypt w panelu Stos wywołań:

1. Kliknij prawym przyciskiem myszy funkcję w skrypcie.
2. Wybierz Dodaj skrypt do listy ignorowanych fragmentów kodu.

Skrypt można usunąć z listy ignorowanych, klikając Ustawienia > Lista ignorowanych.

Ignorowanie skryptu w Ustawieniach

Zobacz Ustawienia > Lista ignorowanych.

Uruchamiaj fragmenty kodu debugowania na dowolnej stronie

Jeśli zauważysz, że w konsoli ciągle uruchamiasz ten sam kod debugowania, rozważ użycie fragmentów kodu. Fragmenty to wykonywalne skrypty, które tworzysz, przechowujesz i uruchamiasz w Narzędziach deweloperskich.

Więcej informacji znajdziesz w artykule Uruchamianie fragmentów kodu z dowolnej strony.

Obserwowanie wartości niestandardowych wyrażeń JavaScript

W panelu Oglądaj możesz obserwować wartości wyrażeń niestandardowych. Możesz oglądać dowolne poprawne wyrażenie JavaScript.

• Aby utworzyć nowe wyrażenie dotyczące oglądania, kliknij Dodaj wyrażenie.
• Aby odświeżyć wartości wszystkich istniejących wyrażeń, kliknij Odśwież . Wartości są odświeżane automatycznie podczas przechodzenia przez kod.
• Najedź kursorem na wyrażenie i kliknij Usuń wyrażenie. aby ją usunąć.

Sprawdzanie i edytowanie skryptów

Gdy otworzysz skrypt w panelu Strona, DevTools wyświetli jego zawartość w panelu Edytor. W panelu Edytor możesz przeglądać i edytować kod.

Możesz też zastąpić zawartość lokalnie lub utworzyć obszar roboczy i zapisać zmiany wprowadzone w Narzędziach deweloperskich bezpośrednio w źródłach lokalnych.

Ustawianie zminifikowanego pliku jako czytelnego

Domyślnie w panelu Źródła wyświetlają się zminifikowane pliki „styled”. W przypadku drukowania w formacie ładnym Edytor może wyświetlić pojedynczy wiersz kodu w kilku wierszach, przy czym - wskazuje, że jest to kontynuacja wiersza.

Aby zobaczyć zminifikowany plik w miarę jego wczytywania, kliknij { } w lewym dolnym rogu Edytora.

Zwijanie bloków kodu

Aby zwinąć blok kodu, najedź kursorem na numer wiersza w lewej kolumnie i kliknij Zwiń.

Aby rozwinąć blok kodu, kliknij obok niego {...}.

Aby skonfigurować to zachowanie, kliknij Ustawienia > Ustawienia > Źródła.

Edytowanie skryptu

Kiedy naprawiasz błąd, często chcesz przetestować kilka zmian w kodzie JavaScript. Nie potrzebujesz aby wprowadzić zmiany w przeglądarce zewnętrznej, a następnie ponownie załadować stronę. Możesz edytować skrypt w: Narzędzia deweloperskie.

Aby edytować skrypt:

1. Otwórz plik w panelu Edytor w panelu Źródła.
2. Wprowadź zmiany w panelu Edytor.

3. Naciśnij Command+S (Mac) lub Ctrl+S (Windows, Linux), aby zapisz. Narzędzia deweloperskie instalują poprawkę całego pliku JS do silnika JavaScript Chrome.

   

   Panel Edytor na zrzucie ekranu powyżej jest zaznaczony na niebiesko.

Edytuj wstrzymaną funkcję na żywo

Gdy wykonanie jest wstrzymane, możesz edytować bieżącą funkcję i wprowadzać zmiany w czasie rzeczywistym. Obowiązują następujące ograniczenia:

• Możesz edytować tylko funkcję najwyższego poziomu w stosie wywołań.
• Ta sama funkcja nie może powtarzać się w dalszej części stosu.

Aby edytować funkcję na żywo:

1. Wstrzymaj wykonanie za pomocą punktu przerwania.
2. Edytuj wstrzymaną funkcję.
3. Naciśnij Command / Control + S, aby zastosować zmiany. Debuger automatycznie ponownie uruchomi funkcję.
4. Kontynuuj wykonywanie.

Aby dowiedzieć się więcej o tym procesie, obejrzyj film poniżej.

W tym przykładzie zmienne addend1 i addend2 mają początkowo nieprawidłowy typ string. Zamiast więc dodawać liczby, ciągi znaków są łączone. Aby rozwiązać ten problem, podczas edytowania na żywo są dodawane funkcje parseInt().

Wyszukiwanie i zastępowanie tekstu w skrypcie

Aby wyszukać tekst w skrypcie:

1. Otwórz plik w panelu Edytor w panelu Źródła.
2. Aby otworzyć wbudowany pasek wyszukiwania, naciśnij Command + F (Mac) lub Ctrl + F (Windows, Linux).
3. Na pasku wpisz zapytanie. Opcjonalnie możesz:
   • Aby uwzględnić w zapytaniu wielkość liter, kliknij Uwzględniaj wielkość liter.
   • Aby wyszukać przy użyciu wyrażenia regularnego, kliknij  Użyj wyrażenia regularnego.
4. Naciśnij Enter. Aby przejść do poprzedniego lub następnego wyniku wyszukiwania, naciśnij przycisk w górę lub w dół.

Aby zastąpić znaleziony tekst:

1. Na pasku wyszukiwania kliknij przycisk Zastąp.
2. Wpisz tekst, który ma zastąpić wybrany fragment, a potem kliknij Zamień lub Zamień wszystko.

Wyłącz JavaScript

Zobacz Wyłączanie JavaScriptu w Narzędziach deweloperskich w Chrome.