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.

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

Wstrzymywanie kodu za pomocą punktów przerwania

Ustaw punkt przerwania, aby móc wstrzymać kod w trakcie jego wykonywania. Aby dowiedzieć się, jak ustawiać punkty przerwania, przeczytaj artykuł Wstrzymywanie kodu za pomocą punktów przerwania.

Sprawdzanie wartości w sytuacji, gdy subskrypcja jest wstrzymana

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 obok odpowiednich deklaracji.

Za pomocą Konsoli możesz wysyłać zapytania dotyczące ocenionych zmiennych, stałych i obiektów.

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.

Przeglądanie kodu

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

Gdy zatrzymasz odtwarzanie na linii kodu zawierającej funkcję, która nie ma związku z rozwiązywanym problemem, kliknij Pomiń , aby wykonać funkcję bez wchodzenia w jej skład.

Załóżmy na przykład, że debugujesz ten 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
}

Twoje konto zostało wstrzymane A. Po naciśnięciu Przejdź dalej narzędzia deweloperskie wykonają cały kod w funkcjach, które chcesz pominąć, czyli B i C. Narzędzia deweloperskie zostaną wstrzymane na urządzeniu D.

Wczytywanie linii kodu

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

Załóżmy na przykład, że debugujesz następujący 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;
}

Twoje konto zostało wstrzymane A. Gdy klikniesz Wejdź, Narzędzia deweloperskie wykonają ten wiersz kodu, a potem zatrzymają się na B.

Wyjście z linii kodu

Jeśli wstrzymasz działanie w funkcji, która nie jest związana z problemami, które debugujesz, kliknij Przejdź do następnego poziomu , aby wykonać pozostałą część kodu funkcji.

Załóżmy na przykład, że debugujesz ten 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
}

Twoje konto zostało wstrzymane A. Po naciśnięciu Wyjdź narzędzia DevTools wykonają pozostałą część kodu w getName(), który w tym przykładzie to tylko B, a potem zatrzymają się na C.

Uruchomienie całego kodu do określonej linii

Podczas debugowania długiej funkcji może się okazać, że zawiera ona dużo kodu, który nie ma związku z rozwiązywanym problemem.

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 interesujący Cię wiersz kodu i wybierz Dalej tutaj. Narzędzia deweloperskie uruchamiają cały kod do tego momentu, a następnie zatrzymują się na tym wierszu.

Wznów wykonywanie skryptu

Aby wznowić wykonywanie skryptu po jego 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 wykonywanie skryptu , a następnie wybierz Wymuś wykonanie skryptu .

Zmiana kontekstu wątku

Podczas pracy z procesami web worker lub service worker kliknij kontekst wymieniony na panelu Wątek, aby przełączyć się na ten kontekst. Ikona niebieskiej strzałki 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 masz zatrzymany punkt w skrypcie głównym i skrypcie usługi. Chcesz wyświetlić właściwości lokalne i globalne kontekstu skryptu service worker, ale w panelu Źródła widać główny kontekst skryptu. Aby przełączyć się na ten kontekst, kliknij wpis skryptu service worker w panelu Wątki.

Przechodzenie przez wyrażenia rozdzielone przecinkami

Przechodzenie przez wyrażenia rozdzielone przecinkami umożliwia debugowanie zminifikowanego kodu. Oto przykładowy kod:

function foo() {}

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

bar();

Po zwinifikowaniu zawiera wyrażenie foo(),foo(),42 rozdzielone przecinkami:

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.
• Gdy używasz map źródeł do debugowania zminifikowanego kodu w powiązaniu z oryginalnym kodem. Innymi słowy, gdy widzisz średniki, możesz zawsze oczekiwać, że będziesz je przechodzić, nawet jeśli rzeczywiste źródło, które debugujesz, jest zminiaturyzowane.

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

Gdy zatrzymasz kursor na linii kodu, możesz użyć panelu Zakres, aby wyświetlić i zmodyfikować wartości właściwości i zmiennych w zakresie lokalnym, zamkniętym i globalnym.

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

Na zrzucie ekranu powyżej panel Zakres jest obrysowany na niebiesko.

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

Gdy zatrzymasz kursor na wierszu kodu, możesz wyświetlić panel zbiór wywołań, aby zobaczyć zbiór wywołań, który doprowadził do tego punktu.

Kliknij wpis, aby przejść do wiersza kodu, w którym wywołana została ta funkcja. Niebieska strzałka wskazuje funkcje, które są obecnie wyróżnione w Narzędziach deweloperskich.

Na powyższym zrzucie ekranu panel Zbiór wywołań jest obrysowany 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. Innymi słowy, 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łania kliknij prawym przyciskiem myszy funkcję i w menu kliknij Restart frame (Restartuj ramkę).

   

Aby zrozumieć, jak działa ramka Restart, zobacz ten kod:

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

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

foo(0);

Funkcja foo() przyjmuje jako argument funkcję 0, rejestruje ją i wywołuje funkcję bar(). Funkcja bar() zwiększa argument.

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

1. Skopiuj kod powyżej do nowego fragmentu kodu i go uruchom. Wykonywanie zostaje zatrzymane w punkcie przerwania w kodzie debugger.
2. Zauważ, że obok deklaracji funkcji value = 1 debuger wyświetla bieżącą wartość.
3. Ponownie uruchom ramkę bar().
4. Aby przejść do instrukcji zwiększania wartości, naciśnij F9. Zauważ, ż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 kilka razy przejść przez instrukcję zwiększania. 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 ona wskaźnik wykonania do początku 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 JavaScript zmiany argumentów nie są widoczne (nie są odzwierciedlane) poza funkcją. Funkcje zagnieżdżone otrzymują wartości, a nie ich lokalizację w pamięci. 1. Aby ukończyć ten samouczek, wznów wykonywanie skryptu (F8).

Pokaż ramki z listy ignorowanych

Domyślnie panel Stos wywołania zawiera tylko ramki istotne dla Twojego kodu i nie uwzględnia skryptów dodanych do 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 to na stronie demonstracyjnej:

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

Wyświetlanie ramek asynchronicznych

Jeśli używana przez Ciebie platforma obsługuje to, DevTools może śledzić operacje asynchroniczne, łącząc ze sobą obie części kodu asynchronicznego.

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

Kopiowanie zrzutu 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ład danych wyjściowych:

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. Podobnie jak pliki źródłowe w Twoim środowisku IDE. Narzędzia deweloperskie generują te pliki na podstawie map źródeł udostępnionych przez narzędzia do kompilacji.
• Wdrożony. Rzeczywiste pliki odczytywane przez przeglądarkę. Zwykle są one zminifikowane.

Aby włączyć grupowanie, w menu z 3 kropkami u góry drzewa plików włącz opcję  > Grupuj pliki według autora lub wersji .

Ukrywanie źródeł z listy ignorowanych w drzewie plików

Aby ułatwić Ci skupienie się tylko na tworzonym kodzie, panel Źródła > Strona domyślnie przyciemnia wszystkie skrypty lub katalogi dodane do Ustawień > Listy ignorowania.

Aby całkowicie ukryć takie skrypty, wybierz Źródła > Strona > > Ukryj źródła z listy ignorowanych .

Ignorowanie skryptu lub wzorca skryptów

Zignoruj skrypt, aby go pominąć podczas debugowania. Ignorowany skrypt jest zaciemniony w panelu zbiór wywołań, a podczas przechodzenia po kodzie nigdy nie wchodzisz w funkcje skryptu.

Załóżmy, że analizujesz ten kod:

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

A to zaufana biblioteka innej firmy. Jeśli masz pewność, że problem, który debugujesz, nie jest związany z biblioteką zewnętrzną, możesz 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 katalog lub plik skryptu.
2. Wybierz Dodaj katalog/skrypt do listy ignorowanych.

Jeśli nie ukryjesz źródła na liście ignorowanych, możesz je wybrać w drzewie plików, a na banerze kliknąć Usuń z listy ignorowanych lub Skonfiguruj.

Możesz też usunąć ukryte i ignorowane katalogi oraz skrypty z listy w sekcji Ustawienia > Lista ignorowania.

Ignorowanie skryptu w panelu Edytor

Aby zignorować skrypt w panelu Edytor:

1. Otwórz plik.
2. Kliknij prawym przyciskiem w dowolnym miejscu.
3. Wybierz Dodaj skrypt do listy ignorowanych.

Aby usunąć skrypt z listy ignorowanych, kliknij Ustawienia > Lista ignorowanych.

Ignorowanie skryptu w panelu Stos wywołania

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.

Aby usunąć skrypt z listy ignorowanych, kliknij 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 kodu to skrypty do wykonania, 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

Wartości wyrażeń niestandardowych możesz obserwować w panelu Obserwowanie. Możesz oglądać dowolne poprawne wyrażenie JavaScript.

• Kliknij Add Expression (Dodaj wyrażenie), aby utworzyć nowe wyrażenie obserwacyjne.
• 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 je 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.

Dodatkowo możesz 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 ładowanego Edytor może wyświetlić jeden długi wiersz kodu w kilku wierszach, przy czym - wskazuje, że jest to kontynuacja wiersza.

Aby zobaczyć zminiaturyzowany plik w postaci, w której został załadowany, w lewym dolnym rogu Edytora kliknij { }.

Zwiń bloki 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

Gdy naprawiasz błąd, często chcesz przetestować kilka zmian w kodzie JavaScript. Nie musisz wprowadzać zmian w zewnętrznej przeglądarce, a następnie ponownie wczytywać strony. Możesz edytować skrypt w Narzędziach deweloperskich.

Aby edytować skrypt:

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

3. Aby zapisać, naciśnij Command+S (Mac) lub Ctrl+S (Windows, Linux). Narzędzia deweloperskie wstawiają cały plik JS do mechanizmu JavaScriptu w Chrome.

   

   Na zrzucie ekranu powyżej panel Edytor jest obrysowany na niebiesko.

Edytuj wstrzymaną funkcję na żywo

Podczas wstrzymania wykonania możesz edytować bieżącą funkcję i stosować zmiany na żywo z tymi ograniczeniami:

• Możesz edytować tylko funkcję najwyższego poziomu w zbiorze wywołań.
• W dalszej części stosu nie może być wywołań rekurencyjnych tej samej funkcji.

Aby edytować funkcję na żywo:

1. Wstrzymaj wykonywanie za pomocą punktu przerwania.
2. Edytuj wstrzymaną funkcję.
3. Aby zastosować zmiany, naciśnij Command lub Control + S. Debuger ponownie uruchamia funkcję automatycznie.
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 zapytanie uwzględniało wielkość liter, kliknij Zgodność wielkości liter.
   • Aby wyszukiwać 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.