Dokumentacja debugowania JavaScript

Kayce Basques
Kayce Basques
Sofia Emelianowa
Sofia Emelianova

Zapoznaj się z nowymi przepływami pracy dotyczącymi debugowania dzięki tej kompleksowej dokumentacji funkcji debugowania w Narzędziach deweloperskich w Chrome.

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

Wstrzymywanie kodu z punktami przerwania

Ustaw punkt przerwania, by wstrzymać kod w trakcie jego wykonywania. Informacje o ustawianiu punktów przerwania znajdziesz w artykule Wstrzymywanie kodu z użyciem punktów przerwania.

Sprawdź wartości po wstrzymaniu

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

Wbudowane oceny są wyświetlane obok deklaracji.

Do wysyłania zapytań dotyczących ocenionych zmiennych, stałych i obiektów możesz użyć konsoli.

Korzystanie z konsoli do wysyłania zapytań dotyczących ocenionych zmiennych, stałych i obiektów.

Wyświetlanie podglądu właściwości klas/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.

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

Kodowanie krok po kroku

Po wstrzymaniu kodu przejdź przez niego po kolei wyrażenia, sprawdzając po drodze wartości przepływu sterowania i właściwości.

Przejdź nad wierszem kodu

Gdy wstrzymasz wiersz kodu zawierający funkcję niezwiązaną z debugowanym problemem, kliknij Przejdź Wykonaj, aby wykonać tę funkcję bez wchodzenia do niej.

Wybierz „Przejdź”.

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 jest wstrzymane na urządzeniu A. Gdy klikniesz Step over, DevTools uruchomi cały kod w używanej przez Ciebie funkcji, czyli B i C. Następnie Narzędzia deweloperskie wstrzymują się D.

Wejdź w wiersz kodu

Po wstrzymaniu na wierszu kodu zawierającym wywołanie funkcji związanej z debugowanym problemem kliknij Wejdź do Wejdź do, by dokładniej przeanalizować tę funkcję.

Wybierz „Wejdź do”.

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;
}

Twoje konto jest wstrzymane na urządzeniu A. Klikając Wejdź na stronę, Narzędzia deweloperskie uruchamiają ten wiersz kodu i przerywają działanie B.

Wyjdź poza wiersz kodu

Jeśli wstrzymasz działanie funkcji, która nie jest związana z debugowanym problemem, kliknij Krok wyjściowy Wyjdź, aby wykonać resztę kodu funkcji.

Wybierz „Wyjście”.

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 jest wstrzymane na urządzeniu A. Klikając Step out, DevTools wykonuje resztę kodu w getName(), czyli w tym przykładzie jest tylko B, i zatrzymuje się na C.

Uruchamianie całego kodu do określonego wiersza

Podczas debugowania długiej funkcji może pojawić się dużo kodu niezwiązanego z debugowanym problemem.

Możesz przejść przez wszystkie etapy, ale może to być kłopotliwe. Możesz ustawić punkt przerwania wiersza kodu w odpowiednim wierszu, a następnie nacisnąć Wznów wykonywanie skryptu Wznów wykonywanie skryptu, ale jest to szybszy sposób.

Kliknij prawym przyciskiem myszy wiersz kodu, który Cię interesuje, i wybierz Przejdź do tego miejsca. W Narzędziach deweloperskich uruchamia cały kod do tego momentu, a następnie zatrzymuje się na tym wierszu.

Kliknij „Przejdź do tego miejsca”.

Wznów wykonywanie skryptu

Aby kontynuować wykonywanie skryptu po wstrzymaniu, kliknij Wznów wykonywanie skryptu Wznawianie wykonywania skryptu. DevTools będzie uruchamiać skrypt aż do następnego punktu przerwania, jeśli taki istnieje.

Wybierz „Wznów wykonywanie skryptu”.

Wymuś wykonanie skryptu

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

Wybierz „Wymuś wykonanie skryptu”.

Zmienianie kontekstu wątku

Podczas pracy z instancjami roboczymi lub skryptami service worker kliknij kontekst wymieniony w panelu Wątki, aby się na niego przełączyć. Niebieska strzałka wskazuje aktualnie wybrany kontekst.

Okienko Threads.

Okienko Wątki na zrzucie ekranu powyżej jest zaznaczone na niebiesko.

Załóżmy na przykład, że Twoje działanie jest wstrzymane w punkcie przerwania zarówno w skrypcie głównym, jak i w skrypcie service worker. Chcesz wyświetlić właściwości lokalne i globalne kontekstu skryptu service worker, ale panel Źródła pokazuje kontekst skryptu głównego. Aby przełączyć się na ten kontekst, kliknij wpis skryptu service worker w panelu Threads.

Przejdź przez wyrażenia rozdzielane przecinkami

Możesz debugować zminifikowany kod, przechodząc przez wyrażenia rozdzielane przecinkami. Przeanalizujmy ten przykładowy kod:

function foo() {}

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

bar();

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

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

Debuger używa takich wyrażeń w taki sam sposób.

Przechodzenie przez wyrażenie rozdzielane przecinkami.

Sposób działania kroków jest taki sam:

  • między zminifikowanym a autorem;
  • Gdy używasz map źródłowych do debugowania zminifikowanego kodu w kontekście pierwotnego kodu. Innymi słowy, gdy widzisz średniki, możesz się spodziewać, że trzeba je przejść, nawet jeśli źródło, które debugujesz, jest zminimalizowane.

Wyświetlanie i edytowanie usług lokalnych, zamkniętych i globalnych

Gdy Twoje urządzenie jest wstrzymane w wierszu kodu, otwórz panel Zakres, aby wyświetlić i edytować wartości właściwości i zmiennych w zakresach lokalnych, zamkniętych i globalnych.

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

Okienko Zakres.

Okienko Zakres na zrzucie ekranu powyżej jest zaznaczone na niebiesko.

Wyświetl bieżący stos wywołań

Gdy wstrzymasz wiersz kodu, otwórz panel Stos wywołań, aby wyświetlić stos wywołań, który pozwolił Ci przejść do tego miejsca.

Kliknij wpis, aby przejść do wiersza kodu, w którym wywołano daną funkcję. Niebieska ikona strzałki wskazuje, którą funkcję są obecnie wyróżniane w Narzędziach deweloperskich.

Okienko Stosów.

Okienko Stos wywołań na zrzucie ekranu powyżej jest zaznaczone na niebiesko.

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

Aby obserwować zachowanie funkcji i uruchamiać ją ponownie bez konieczności ponownego uruchamiania całego procesu debugowania, możesz jeszcze raz uruchomić wykonanie wybranej funkcji, gdy ta funkcja jest 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łań kliknij funkcję prawym przyciskiem myszy i z menu wybierz Uruchom ponownie ramkę.

    Wybierz z menu polecenie Uruchom ponownie ramkę.

Aby zrozumieć, jak działa Ramka ponownego uruchamiania, zapoznaj się z tym kodem:

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

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

foo(0);

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

Spróbuj ponownie uruchomić ramki obu funkcji w następujący 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. Bieżąca wartość obok deklaracji funkcji.
  3. Ponownie uruchom ramkę bar().Ponownie uruchamiam ramkę bar().
  4. Przejdź przez instrukcję zwiększania wartości, naciskając F9. Zwiększam bieżącą wartość. Zwróć uwagę, że bieżąca wartość wzrasta: value = 2.
  5. Opcjonalnie w panelu Zakres kliknij dwukrotnie wartość, aby ją edytować i ustawić.Edytowanie wartości w panelu Zakresy.
  6. Zrestartuj ramkę bar() i jeszcze kilka razy wykonaj instrukcję przyrostu. Wartość będzie stale rosnąć.Ponownie uruchamiam ramkę bar().

Ponowne uruchomienie ramki nie powoduje zresetowania argumentów. Oznacza to, że ponowne uruchomienie nie przywraca stanu początkowego podczas wywołania funkcji. Zamiast tego przenosi po prostu wskaźnik wykonania na początek funkcji.

W związku z tym bieżąca wartość argumentu pozostaje w pamięci po ponownym uruchomieniu tej samej funkcji.

  1. Teraz ponownie uruchom ramkę foo() w stosie wywołań. Ponownie uruchamiam ramkę foo(). Zwróć uwagę, że wartość ponownie to 0. ALT_TEXT_HERE

W przypadku kodu JavaScript zmiany argumentów nie są widoczne (odzwierciedlone) poza funkcją. Funkcje zagnieżdżone otrzymują wartości, a nie lokalizacje w pamięci. 1. Aby ukończyć ten samouczek, wznów wykonywanie skryptu (F8).

Pokaż zignorowane klatki

Domyślnie w panelu Stos wywołań widoczne są tylko ramki związane z Twoim kodem, a wszystkie skrypty dodane do sekcji Ustawienia. Ustawienia > Lista ignorowanych są pomijane.

Stos wywołań.

Aby wyświetlić pełny stos wywołań wraz z ramkami innych firm, włącz opcję Pokaż ramki, które znajdują się na liście ignorowanych, w sekcji Stos wywołań.

Pokaż zignorowane klatki.

Wypróbuj tę funkcję na tej 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 Stos wywołań zaznacz lub odznacz pole wyboru Pokaż ramki, które znajdują się na liście ignorowanych, i zobacz odpowiednią lub pełną listę ramek w stosie wywołań.

Wyświetl ramki asynchroniczne

Jeśli Twoja platforma obsługuje tę platformę, Narzędzia deweloperskie mogą śledzić operacje asynchroniczne, łącząc ze sobą obie części kodu asynchronicznego.

W takim przypadku Stos wywołań pokazuje całą historię połączeń, w tym asynchroniczne ramki wywołań.

Asynchroniczne ramki wywołań.

Kopiuj zrzut stosu

Kliknij prawym przyciskiem myszy w dowolnym miejscu w panelu Stos wywołań i wybierz Kopiuj zrzut stosu, aby skopiować bieżący stos wywołań do schowka.

Wybierz „Kopiuj zrzut stosu”.

Oto przykład wyników:

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

Poruszanie się po drzewie plików

Aby poruszać się po drzewie plików, używaj panelu Strona.

Pliki utworzone i wdrożone w grupie w drzewie plików

Podczas tworzenia aplikacji internetowych przy użyciu platform (takich jak React czy Angular) poruszanie się po źródłach może być trudne ze względu na zmniejszone pliki wygenerowane przez narzędzia do kompilacji (takie jak webpack czy Vite).

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

  • Ikona kodu Utworzone. Podobne do plików źródłowych wyświetlanych w IDE. Narzędzia deweloperskie generują te pliki na podstawie map źródeł dostarczonych przez Twoje narzędzia do kompilacji.
  • Ikona Wdrożono. Wdrożono. Rzeczywiste pliki, które są odczytywane przez przeglądarkę. Zwykle te pliki są zmniejszone.

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

Grupowanie plików według autora / wdrożenia.

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

Aby ułatwić Ci skoncentrowanie się tylko na utworzonym kodzie, panel Źródła > Strona domyślnie wyszarzy wszystkie skrypty i katalogi dodane do Ustawienia. Ustawienia > Lista ignorowanych.

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

Przed i po ukryciu źródeł z listy ignorowanych.

Ignorowanie skryptu lub wzorca skryptów

Zignoruj skrypt, aby pominąć go podczas debugowania. W przypadku zignorowania skrypt jest ukryty w panelu Stos wywołań i nie musisz nigdy wchodzić do jego funkcji podczas przechodzenia przez kod.

Załóżmy na przykład, że przechodzisz między tym kodem:

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 z drzewa 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.

Ignoruj opcje w przypadku katalogu lub pliku skryptu.

Jeśli źródła z listy ignorowanych nie zostały przez Ciebie ukryte, możesz je wybrać w drzewie plików i na banerze z ostrzeżeniem Ostrzeżenie. kliknij Usuń z listy ignorowanych lub Skonfiguruj.

Przy wybranym zignorowanym pliku widoczne są przyciski Usuń i Skonfiguruj.

W przeciwnym razie możesz usunąć z listy ukryte i ignorowane katalogi oraz skrypty, klikając Ustawienia. Ustawienia > Lista ignorowanych.

Ignorowanie skryptu w panelu edytora

Aby zignorować skrypt z panelu Edytor:

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

Ignorowanie skryptu w panelu edytora.

Skrypt możesz usunąć z listy ignorowanych, klikając Ustawienia. 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.

Ignorowanie skryptu w panelu Stos wywołań.

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

Ignorowanie skryptu w Ustawieniach

Zobacz Ustawienia. Ustawienia > Lista ignorowanych.

Uruchamianie fragmentów kodu debugowania z dowolnej strony

Jeśli ciągle będziesz używać tego samego kodu debugowania w konsoli, rozważ użycie fragmentów kodu. Fragmenty to pliki wykonywalne, 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

Panel odtwarzania umożliwia obserwowanie wartości wyrażeń niestandardowych. Możesz oglądać dowolne poprawne wyrażenie JavaScript.

Okienko odtwarzania.

  • Kliknij Dodaj wyrażenie Dodaj wyrażenie, aby utworzyć nowe obserwowane wyrażenie.
  • Kliknij Odśwież Odśwież, aby odświeżyć wartości wszystkich istniejących wyrażeń. Wartości są automatycznie odświeżane podczas wpisywania kodu.
  • Najedź kursorem na wyrażenie i kliknij Usuń wyrażenie Usuń wyrażenie, aby je usunąć.

Sprawdzanie i edytowanie skryptów

Gdy otworzysz skrypt w panelu Strona, Narzędzia deweloperskie wyświetlą jego zawartość w panelu Edytor. Kod możesz przeglądać i edytować w panelu Edytor.

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.

Udostępnianie zminifikowanego pliku do odczytu

Domyślnie panel Źródła drukuje zminimalizowane pliki. Edytor może wyświetlać pojedynczy długi wiersz kodu w kilku wierszach, gdzie - oznacza kontynuację linii.

Długa, dobrze nadrukowana linia kodu wyświetlana w wielu wierszach ze znakiem „-” wskazującym kontynuację linii.

Aby zobaczyć zmniejszony plik podczas jego wczytywania, kliknij { } w lewym dolnym rogu Edytora.

Złóż bloki kodu

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

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

Aby skonfigurować to działanie, kliknij Ustawienia. Ustawienia > Preferencje > Źródła.

Edytowanie skryptu

Przy naprawianiu błędu często warto przetestować kilka zmian w kodzie JavaScript. Nie musisz wprowadzać zmian w zewnętrznej przeglądarce i ponownie załadować stronę. 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 instalują poprawkę całego pliku JS w mechanizmie JavaScript Chrome.

    Okienko edytora.

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

Edytowanie wstrzymanej funkcji na żywo

Gdy wykonanie jest wstrzymane, możesz edytować bieżącą funkcję i wprowadzać zmiany na bieżąco, z uwzględnieniem tych ograniczeń:

  • W stosie wywołań można edytować tylko funkcję najwyższego poziomu.
  • W dalszej części stosu nie mogą występować żadne rekurencyjne wywołania tej samej funkcji.

Aby edytować funkcję na żywo:

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

Aby dowiedzieć się więcej, 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 naprawić ten błąd, funkcje parseInt() są dodawane podczas edycji na żywo.

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. Wyszukaj. Opcjonalnie możesz:
    • Kliknij Uwzględniaj wielkość liter. Uwzględniaj wielkość liter, aby w zapytaniu uwzględniać wielkość liter.
    • Kliknij Przycisk Wyrażenie regularne. Użyj wyrażenia regularnego, aby wyszukać wyrażenie regularne.
  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 Zamień. Zastąp.Zamień.
  2. Wpisz tekst, który chcesz zastąpić, a następnie kliknij Zamień lub Zamień wszystko.

Wyłącz JavaScript

Zobacz Wyłączanie JavaScriptu za pomocą Narzędzi deweloperskich w Chrome.