Dokumentacja debugowania JavaScript

Kayce Basques

Sofia Emelianova

Odkryj nowe przepływy pracy debugowania dzięki kompleksowemu omówieniu debugowania w Narzędziach deweloperskich w Chrome funkcje zabezpieczeń.

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 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 zostaną wstrzymane na urządzeniu D.

Wejdź do wiersza kodu

po wstrzymaniu na wierszu kodu zawierającym wywołanie funkcji, które są związane z problemem. kliknij Wejdź do w celu zbadania tej funkcji dalej.

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. 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. Przerwa w dniu 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ć wiersz kodu punkt przerwania w wierszu, który Cię interesuje, a następnie kliknij 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. 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 wykonuje skrypt do momentu 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 skrypt Wykonanie a następnie wybierz Wymuś wykonanie skryptu

Zmiana 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.

Panel Wątki na zrzucie ekranu powyżej jest zaznaczony 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 dla kontekstu mechanizmu Service Worker, ale w panelu Źródła widać 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

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

• 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 tej sprawy .

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ć 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. 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.

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 kodzie, z pominięciem skryptów dodanych 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 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 dowolne miejsce w panelu Stos wywołań i wybierz Kopiuj zrzut stosu, aby skopiować bieżące wywołanie i umieszczać je w schowku.

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 poruszać się po źródłach, otwórz sekcję Źródła > W panelu Strona można 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 > 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 samodzielnie utworzonym kodzie, otwórz sekcję Źródła > Okienko Strona wyszarzy wszystkie skrypty i katalogi dodane do Ustawień > . domyślnie Ignoruj listę.

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

Ignorowanie skryptu lub wzorca skryptów

Zignoruj skrypt, 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 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ąć 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 oglądać dowolny prawidłowy JavaScript i wyrażenia.

• Kliknij 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 ją 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ć to działanie, zobacz Ustawienia > Ustawienia > Źródła.

Edytowanie skryptu

Gdy 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.

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.