Dokumentacja debugowania JavaScript

Sofia Emelianova
Sofia Emelianova

Poznaj nowe procesy debugowania dzięki temu obszernemu przewodnikowi po funkcjach debugowania w Chrome DevTools.

Aby dowiedzieć się więcej o podstawach debugowania, przeczytaj artykuł Pierwsze kroki w debugowaniu kodu JavaScript 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 trybie wstrzymania

Podczas wstrzymania wykonywania debugger ocenia 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.

Oceny w tekście wyświetlane obok deklaracji.

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

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

Podgląd właściwości klasy i funkcji po najechaniu kursorem

Podczas wstrzymania wykonania najedź kursorem na nazwę klasy lub funkcji, aby wyświetlić podgląd jej właściwości.

Podgląd właściwości klasy i funkcji.

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.

Przechodzenie do następnego wiersza kodu

Gdy zatrzymasz odtwarzanie na wierszu kodu zawierającym funkcję, która nie ma związku z problemem, który debugujesz, kliknij Pomiń step_over, aby wykonać funkcję bez przechodzenia do niej.

Wybierz Wykonaj.

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 step_over narzędzia DevTools wykonają cały kod w funkcji, którą pomijasz, czyli BC. Narzędzia deweloperskie zostaną wstrzymane o D.

Wczytywanie linii kodu

Gdy zatrzymasz działanie programu na wywołaniu funkcji, które jest związane z rozwiązywanym przez Ciebie problemem, kliknij Wejdź , aby zbadać tę funkcję.

Kliknij „Wejdź”.

Załóżmy, ż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 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

Gdy funkcja jest wstrzymana, a problem, który debugujesz, nie jest z nią powiązany, kliknij step_out, aby wykonać pozostałą część kodu funkcji.

Wybranie opcji „Wyjdź”.

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 kliknięciu step_out Narzędzia deweloperskie wykonują pozostałą część kodu w getName(), która w tym przykładzie to tylko B, a potem zatrzymuje 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 przejrzeć wszystkie wiersze, ale może to być żmudne. Możesz ustawić punkt przerwania w kodzie na interesującym Cię wierszu, a potem nacisnąć Wznowienie, ale istnieje szybszy sposób.

Kliknij prawym przyciskiem myszy interesujący Cię wiersz kodu i wybierz Dalej tutaj. Narzędzie DevTools wykonuje cały kod do tego momentu, a potem się zatrzymuje.

Wybierz „Kontynuuj do tego miejsca”.

Wznów wykonywanie skryptu

Aby wznowić wykonywanie skryptu po wstrzymaniu, kliknij Wznów. Narzędzie DevTools wykona skrypt do następnego punktu przerwania (jeśli taki występuje).

Wybierz „Wznów wykonywanie skryptu”.

Wymuszanie wykonywania skryptu

Aby zignorować wszystkie punkty przerwania i zmusić skrypt do wznowienia wykonywania, kliknij i przytrzymaj Wznów wykonywanie skryptu resume, a następnie wybierz Wykonaj skrypt do końca play_arrow.

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 go przełączyć. Ikona niebieskiej strzałki wskazuje, który kontekst został wybrany.

Panel Wątki
Panel Wątki jest obrysowany na niebiesko.

Załóżmy na przykład, że wstrzymasz działanie w punkcie przerwania zarówno w głównym skrypcie, jak i w skrypcie usługi. Chcesz wyświetlić właściwości lokalne i globalne kontekstu service workera, ale panel Źródła pokazuje kontekst głównego skryptu. Klikając wpis dotyczący serwisu workera w panelu Wątek, możesz przełączyć się do tego kontekstu.

Przechodzenie przez wyrażenia rozdzielone przecinkami

Możesz debugować skompresowany kod, przechodząć przez wyrażenia rozdzielone przecinkami. Na przykład:

function foo() {}

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

bar();

Po zwinifikowaniu zawiera rozdzielone 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.

Przeglądanie wyrażenia rozdzielonego przecinkami.

Dlatego sposób działania jest identyczny:

  • Pomiędzy zoptymalizowanym a autorskim kodem.
  • Gdy używasz map źródeł do debugowania zminifikowanego kodu w ujęciu kodu oryginalnego. Innymi słowy, gdy widzisz średniki, możesz zawsze oczekiwać, że będziesz przechodzić przez nie nawet wtedy, gdy źródło, które debugujesz, jest zminiaturyzowane.

Wyświetlanie i edytowanie właściwości lokalnych, zamkniętych i globalnych

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

  • Aby zmienić wartość właściwości, kliknij ją dwukrotnie.
  • Właściwości, których nie można wyliczać, są wyszarzone.
Panel Zakres.
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.

Wybierz wpis, aby przejść do wiersza kodu, w którym została wywołana dana funkcja. Niebieska strzałka wskazuje, która funkcja jest podświetlana przez DevTools.

Panel Stos wywołań
Panel Stos wywołań jest obrysowany na niebiesko.

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

Aby obserwować działanie funkcji i uruchamiać ją ponownie 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 steku wywołań.

Aby ponownie uruchomić ramkę:

  1. Wstrzymaj wykonywanie funkcji w punkcie przerwania. 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 (Ponowne uruchomienie ramki).Wybierz opcję Ponownie uruchom ramkę z menu.

Aby zrozumieć, jak działa ramka „Restart”, weź pod uwagę te kwestie:

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 uruchomić ramki obu funkcji w ten sposób:

  1. Skopiuj przykładowy kod do nowego fragmentu kodu i go uruchom. Wykonywanie zostaje wstrzymane na linii kodu debugger, która jest punktem przerwania.

  2. Zauważ, że debuger obok deklaracji funkcji value = 1 wyświetla bieżącą wartość. Bieżąca wartość obok deklaracji funkcji.

  3. Ponownie uruchom ramkę bar(). Ponowne uruchomienie ramki bar().

  4. Aby przejść do instrukcji zwiększania wartości, naciśnij F9. zwiększenie bieżącej wartości;Zauważysz, że bieżąca wartość rośnie: value = 2.

  5. Opcjonalnie w panelu Zakres kliknij dwukrotnie wartość, aby ją edytować i ustawić odpowiednią wartość. Edytowanie wartości w panelu Zakresy.

  6. Spróbuj ponownie uruchomić ramkę bar() i kilkakrotnie przejść przez instrukcję zwiększania. Wartość stale rośnie. Ponownie uruchamia ramkę bar().

  7. Ponownie uruchom ramkę foo() w zbiorze wywołań. Ponowne uruchomienie ramki foo().Zwróć uwagę, że wartość znowu wynosi 0.

  8. Aby ukończyć 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 pomija skrypty dodane do ustawieńUstawieniach > Lista ignorowanych.

Stos wywołań.

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.

Pokaż ramki z listy ignorowanych.

Wypróbuj to w tej prezentacji:

  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.

Ramki wywołania asynchronicznego.

Narzędzie Key Point DevTools implementuje funkcję „Tagowanie elementów asynchronicznych” na podstawie metody interfejsu API console.createTask(). Implementacja interfejsu API zależy od platformy. Na przykład Angular obsługuje tę funkcję.

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.

Kliknij „Kopiuj zrzut stosu”.

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

Aby poruszać się po drzewie plików, użyj 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) nawigacja po źródłach może być utrudniona z powodu zminiaturyzowanych plików wygenerowanych 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:

  • code Authored. Podobnie jak pliki źródłowe wyświetlane 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 u góry drzewa plików kliknij more_vert > Grupuj pliki według autora/wdrożonego .

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

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ń w sekcji Ustawienia > Lista ignorowanych.

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

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

Ignorowanie skryptu lub wzorca skryptów

Ignorowanie skryptu, aby go pominąć podczas debugowania. Gdy skrypt jest ignorowany, jest zaciemniony w panelu zbiór wywołań i nigdy nie przechodzisz do jego funkcji podczas przechodzenia po kodzie.

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

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

A to biblioteka innej firmy, której ufasz. 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 lub skrypt do listy ignorowanych.

Ignoruj opcje katalogu lub pliku skryptu.

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

Wybrany ignorowany plik zawiera przyciski Usuń i Skonfiguruj.

Możesz też usunąć ukryte i ignorowane katalogi oraz skrypty z listy w ustawieniach (Ustawienia > Lista ignorowanych).

Ignorowanie skryptu w panelu Edytor

Aby zignorować skrypt w panelu Edytor:

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

Ignorowanie skryptu w panelu Edytor.

Skrypt możesz usunąć z listy ignorowanych w ustawieniach: Ustawienia > Lista ignorowanych.

Ignorowanie skryptu w panelu Stos wywołania

Aby zignorować skrypt w panelu Stos wywołania:

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

Ignorowanie skryptu z panelu Zadania.

Skrypt możesz usunąć z listy ignorowanych w ustawieniach: Ustawienia > Lista ignorowanych.

Ignorowanie skryptu w Ustawieniach

Sprawdź ustawienia: Ustawienia > Lista ignorowanych.

uruchamiać fragmenty kodu debugującego z dowolnej strony.

Jeśli zauważysz, że w konsoli ciągle uruchamiasz ten sam kod debugowania, rozważ użycie fragmentów kodu. Fragmenty kodu to skrypty, które możesz tworzyć, przechowywać i uruchamiać 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 sprawdzać w panelu Obserwowanie. Możesz oglądać dowolne poprawne wyrażenie JavaScript.

Panel Oglądaj.

  • Aby utworzyć nowe wyrażenie obserwacji, kliknij Dodaj wyrażenie add.
  • Aby odświeżyć wartości wszystkich istniejących wyrażeń, kliknij Odśwież odśwież. Wartości są automatycznie odświeżane podczas przechodzenia przez kod.
  • 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, 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 czytelny

Domyślnie panel Źródła formatuje stylistycznie zminifikowane pliki. W trybie drukowania Edytor może wyświetlić jedną długą linię kodu na kilku wierszach, a - wskazuje, że jest to kontynuacja linii.

Długa linia kodu wyświetlana na wielu wierszach z znakami „-” oznaczającymi jej przedłużenie.

Aby zobaczyć zminiaturyzowany plik w stanie, w jakim został załadowany, w lewym dolnym rogu Edytora kliknij data_object.

Zwijanie bloków kodu

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

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

Aby skonfigurować to zachowanie, otwórz ustawienia: Ustawienia > Ustawienia > Źródła.

Edytowanie skryptu

Podczas naprawiania błędu często trzeba przetestować zmiany w kodzie JavaScript. Nie musisz wprowadzać zmian w zewnętrznej przeglądarce, a potem ponownie wczytywać strony. Skrypt możesz edytować 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ć zmiany, naciśnij Command + S (Mac) lub Ctrl + S (Windows, Linux). Narzędzie DevTools wstawia cały plik JavaScript do mechanizmu JavaScriptu w Chrome.

    Panel Edytor.
    Panel Edytor jest obrysowany na niebiesko.

Edytowanie funkcji wstrzymanej na żywo

Podczas wstrzymania wykonywania 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. Zmodyfikuj funkcję wstrzymaną.
  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.

W tym przykładzie zmienne addend1addend2 mają początkowo nieprawidłowy typ string. Zamiast dodawać liczby, łańcuchy są łączone. Aby rozwiązać ten problem, 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:
    • Aby zapytanie uwzględniało wielkość liter, kliknij Zgodność wielkości liter.
    • Aby wyszukać za pomocą 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  Zastąp. Zastąp.
  2. Wpisz tekst, który ma zastąpić wybrany fragment, a potem kliknij Zamień lub Zamień wszystko.

Wyłącz JavaScript

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