Dokumentacja debugowania JavaScript

Odkryj nowe przepływy pracy debugowania dzięki kompleksowemu omówieniu funkcji 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 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 Twój kod zostanie wstrzymany, przechodź przez niego, po kolei, badając po drodze wartości przepływu ustawień i właściwości.

Przejdź nad wiersz kodu

Po wstrzymaniu wiersza kodu zawierającego funkcję, która nie jest związana z debugowanym problemem, kliknij Przejdź przez , aby wykonać tę funkcję bez wchodzenia w nią.

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. Gdy naciśniesz przycisk Przejdź przez, Narzędzia deweloperskie wykonują cały kod w funkcji, którą wykonujesz, czyli B i C. Narzędzia deweloperskie zostaną wstrzymane na urządzeniu D.

Wejdź do wiersza kodu

Po wstrzymaniu wiersza kodu zawierającego wywołanie funkcji, które jest związane z debugowanym problemem, kliknij Przejdź do , 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;
}

Twój kanał A został wstrzymany. Klikając Wejdź do, Narzędzia deweloperskie uruchamiają ten wiersz kodu, a następnie zatrzymują się na B.

Wyjdź poza wiersz kodu

W przypadku wstrzymania w funkcji niezwiązanej z problemem, który debugujesz, kliknij Wyjdź , aby wykonać pozostałą część 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 uruchomią pozostałą część kodu w pliku getName(), czyli w tym przykładzie tylko B, a następnie zatrzymują się na C.

Uruchom cały kod do określonego wiersza

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

Możesz przejść wszystkie linie, ale to może być uciążliwe. Możesz ustawić punkt przerwania wiersza kodu w wierszu, który Cię interesuje, a następnie kliknąć Wznów wykonywanie skryptu , ale jest szybszy sposób.

Kliknij prawym przyciskiem myszy wiersz kodu, który Cię interesuje, i wybierz Przejdź do tego miejsca. Narzędzia deweloperskie uruchamiają cały kod do tego momentu, a następnie zatrzymują się na tym wierszu.

Wznów wykonywanie skryptu

Aby kontynuować wykonywanie skryptu po wstrzymaniu, kliknij Wznów wykonywanie skryptu . Narzędzia deweloperskie uruchamiają skrypt do następnego punktu przerwania, jeśli taki istnieje.

Wymuś wykonanie 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 .

Zmienianie kontekstu wątku

Podczas pracy z mechanizmami roboczymi WWW lub Service Workerami kliknij kontekst wymieniony w panelu Wątki, aby przełączyć się na ten kontekst. Niebieska strzałka wskazuje, który kontekst jest obecnie wybrany.

Panel Wątki na zrzucie ekranu powyżej jest zaznaczony na niebiesko.

Załóżmy na przykład, że jesteś w punkcie przerwania zarówno w skrypcie głównym, jak i skrypcie service worker. 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.

Przejdź przez wyrażenia rozdzielane przecinkami

Interpretowanie 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 wykonuje takie wyrażenia tak samo.

W związku z tym sposób kroków jest taki sam:

• Od zminifikowanego i utworzonego kodu.
• 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 na wierszu kodu możesz w panelu Zakres wyświetlać 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 niewymienione są wyszarzone.

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

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

Po wstrzymaniu na linii kodu możesz skorzystać z panelu Stos wywołań, aby wyświetlić stos wywołań, który przekierował Cię do tego miejsca.

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.

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

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

Aby obserwować zachowanie funkcji i uruchomić ją ponownie bez konieczności ponownego uruchamiania całego procesu debugowania, możesz ponownie uruchomić wykonanie pojedynczej funkcji, gdy ta funkcja jest 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 uruchomić klatki 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.
3. Uruchom ponownie ramkę bar().
4. Aby przejść do instrukcji przyrostu 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 ustaw odpowiednią wartość.

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

Ponowne uruchomienie ramki nie resetuje argumentów. Inaczej mówiąc, ponowne uruchomienie nie przywraca stanu początkowego w momencie wywołania funkcji. Zamiast tego przenosi wskaźnik wykonania na początek funkcji.

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

1. Teraz ponownie uruchom ramkę foo() w stosie wywołań. Zwróć uwagę, że ponownie wartość to 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 przypadku Twojego kodu, oraz pomijane są skrypty dodane do sekcji Ustawienia > Lista ignorowanych.

Aby wyświetlić pełny stos wywołań wraz z ramkami innych firm, włącz opcję Pokaż klatki z listy ignorowanych w sekcji Stos wywołań.

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świetl ramki asynchroniczne

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

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

Skopiuj zrzut stosu

Kliknij prawym przyciskiem myszy w dowolnym miejscu panelu Stos wywołań i wybierz Kopiuj zrzut stosu, 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

W panelu Strona możesz poruszać się po drzewie plików.

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

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

Aby ułatwić Ci poruszanie się po źródłach, w panelu Źródła > Strona możesz pogrupować 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żono. Rzeczywiste pliki odczytywane przez przeglądarkę. Zwykle te pliki są zminimalizowane.

Aby włączyć grupowanie, włącz opcję > 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 utworzonym kodzie, panel Źródła > Strona domyślnie wyszarzy wszystkie skrypty i katalogi dodane do sekcji Ustawienia > Lista ignorowanych.

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. Jeśli zostanie zignorowany, skrypt jest zasłonięty w panelu Stos wywołań i nigdy nie wchodzisz w funkcje skryptu podczas wykonywania 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 jest związany z biblioteką zewnętrzną, warto 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 myszy katalog lub plik skryptu.
2. Wybierz Dodaj katalog/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ąć z listy 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 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łań

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

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

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 wielokrotnie używasz w konsoli tego samego kodu debugowania, rozważ użycie fragmentów. 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 obserwować dowolne prawidłowe wyrażenie JavaScript.

• Kliknij Add Expression (Dodaj wyrażenie), aby utworzyć nowe wyrażenie obserwacyjne.
• Kliknij Odśwież , aby odświeżyć wartości wszystkich istniejących wyrażeń. 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, Narzędzia deweloperskie wyświetlą 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.

Zezwól na czytanie zminifikowanego pliku

Domyślnie w panelu Źródła wyświetlają się zminimalizowane pliki „style's”. 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ć zminifikowany plik w miarę jego wczytywania, kliknij { } w lewym dolnym rogu Edytora.

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ć takie działanie, wybierz Ustawienia > Preferencje > Ź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 potem ponownie wczytywać 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 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.

Obejrzyj film poniżej, by poznać ten proces.

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 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órym chcesz go zastąpić, a następnie kliknij Zamień lub Zamień wszystko.

Wyłącz JavaScript

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