Debugowanie JavaScriptu

Kayce Basques

Sofia Emelianova

W tym samouczku poznasz podstawowy proces debugowania problemów z JavaScriptem w DevTools. Przeczytaj lub obejrzyj filmową wersję tego samouczka.

Odtworzenie błędu

Znalezienie sekwencji działań, które konsekwentnie powodują błąd, to zawsze pierwszy krok w procesie debugowania.

1. Otwórz ten pokaz demo w nowej karcie.
2. W polu Numer 1 wpisz 5.
3. W polu Numer 2 wpisz 1.
4. Kliknij Dodaj numer 1 i numer 2. Etykieta pod przyciskiem to 5 + 1 = 51. Wynik powinien wynosić 6. To jest błąd, który chcesz naprawić.

W tym przykładzie wynik działania wyrażenia 5 + 1 wynosi 51. Powinien wynosić 6.

Poznawanie interfejsu panelu Źródła

Narzędzia deweloperskie zawierają wiele różnych narzędzi do różnych zadań, takich jak zmiana CSS, profilowanie szybkości wczytywania strony i monitorowanie żądań sieciowych. W panelu Źródła możesz debugować kod JavaScript.

1. Otwórz Narzędzia deweloperskie i otwórz panel Źródła.

   

Panel Źródła składa się z 3 sekcji:

1. Karta Strona z drzewem plików. Tutaj znajduje się lista wszystkich plików, których potrzebuje strona.
2. Sekcja Edytor kodu. Po wybraniu pliku na karcie Strona wyświetla się jego zawartość.

3. Sekcja Debuger. różne narzędzia do sprawdzania kodu JavaScript strony.

   Jeśli okno Narzędzi deweloperskich jest szerokie, domyślnie Debugger znajduje się po prawej stronie Edytowania kodu. W tym przypadku karty Zakres i Obserwuj dołączają do sekcji Punkty przerwania, Stos wywołania i innych jako sekcje z możliwością zwijania.

Wstrzymanie kodu w punkcie przerwania

Typową metodą debugowania takiego problemu jest wstawianie do kodu wielu instrukcji console.log(), aby sprawdzać wartości podczas wykonywania skryptu. Na przykład:

function updateLabel() {
  var addend1 = getNumber1();
  console.log('addend1:', addend1);
  var addend2 = getNumber2();
  console.log('addend2:', addend2);
  var sum = addend1 + addend2;
  console.log('sum:', sum);
  label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
}

Metoda console.log() może się sprawdzić, ale punkty zerwania mogą być szybsze. Punkt przerwania umożliwia wstrzymanie kodu w środku jego wykonywania i sprawdzenie wszystkich wartości w danym momencie. Punkty kontrolne mają kilka zalet w porównaniu z metodą console.log():

• W przypadku console.log() musisz ręcznie otworzyć kod źródłowy, znaleźć odpowiedni kod, wstawić instrukcje console.log(), a następnie ponownie załadować stronę, aby zobaczyć komunikaty w konsoli. Dzięki punktom przerwania możesz wstrzymać działanie programu w odpowiednim miejscu kodu, nawet nie znając jego struktury.
• W instrukcjach console.log() musisz wyraźnie określić każdą wartość, którą chcesz sprawdzić. Dzięki punktom kontrolnym DevTools wyświetla wartości wszystkich zmiennych w danym momencie. Czasami na kod wpływają zmienne, o których nawet nie wiesz.

Krótko mówiąc, punkty przerwania mogą pomóc Ci znaleźć i naprawić błędy szybciej niż metoda console.log().

Jeśli zastanowisz się nad działaniem aplikacji, możesz założyć, że nieprawidłowa suma (5 + 1 = 51) jest obliczana w słuchaczu zdarzeń click powiązanym z przyciskiem Dodaj liczbę 1 i 2. Dlatego warto wstrzymać kod w okresie, w którym wykonywany jest odbiorca click. Punkty przerwania detektora zdarzeń umożliwiają to:

1. W sekcji Debugger kliknij Przystanki detektora zdarzeń, aby rozwinąć tę sekcję. Narzędzia deweloperskie wyświetlają listę rozwijanych kategorii zdarzeń, takich jak Animacja i Schowek.
2. Obok kategorii zdarzeń Mysz kliknij arrow_right Rozwiń. Narzędzia deweloperskie wyświetlają listę zdarzeń myszy, takich jak click i mousedown. Obok każdego zdarzenia znajduje się pole wyboru.

3. Zaznacz pole Klik. Narzędzia deweloperskie są teraz skonfigurowane tak, aby automatycznie się wstrzymywać, gdy zostanie wykonany dowolny detektor zdarzenia click.

   

4. W wersji demonstracyjnej ponownie kliknij Dodaj numer 1 i numer 2. Narzędzia deweloperskie wstrzymuje demonstrację i wyróżnia wiersz kodu w panelu Źródła. Narzędzia deweloperskie powinny być wstrzymane na tym wierszu kodu:

   function onClick() {
   

   Jeśli masz wstrzymany kod na innym wierszu, naciśnij resume (w tłumaczeniu „wznów”) Resume Script Execution (w tłumaczeniu „Wznów wykonywanie skryptu”) do momentu, aż wstrzymasz kod na właściwym wierszu.

Punkty przerwania detektora zdarzeń to tylko jeden z wielu typów punktów przerwania dostępnych w DevTools. Warto zapoznać się ze wszystkimi typami, ponieważ każdy z nich pomaga jak najszybciej debugować różne scenariusze. Aby dowiedzieć się, kiedy i jak używać poszczególnych typów punktów przerwania, przeczytaj artykuł Wstrzymywanie kodu za pomocą punktów przerwania.

Przeglądanie kodu

Jedną z częstych przyczyn błędów jest nieprawidłowa kolejność wykonywania skryptów. Dzięki tej funkcji możesz krok po kroku śledzić wykonywanie kodu, wiersz po wierszu, i dowiedzieć się, gdzie dokładnie jest on wykonywany w innej kolejności niż oczekiwałeś/oczekiwałaś. Wypróbuj tę funkcję już teraz:

1. W panelu Źródła w DevTools kliknij step_into Przejdź do następnego wywołania funkcji, aby krok po kroku sprawdzać wykonywanie funkcji onClick(). Narzędzia deweloperskie podświetlają ten wiersz kodu:

   if (inputsAreEmpty()) {
   

2. Kliknij step_over Pominij następne wywołanie funkcji.

   Narzędzia deweloperskie wykonują inputsAreEmpty() bez wchodzenia do nich. Zauważ, że Narzędzia deweloperskie pomijają kilka wierszy kodu. Dzieje się tak, ponieważ wartość zwracana przez instrukcję inputsAreEmpty() to fałsz, więc blok kodu instrukcji if nie został wykonany.

To podstawowa koncepcja przechodzenia przez kod. Jeśli spojrzysz na kod w funkcji get-started.js, zobaczysz, że błąd znajduje się prawdopodobnie w funkcji updateLabel(). Zamiast przechodzić przez każdy wiersz kodu, możesz użyć innego typu punktu przerwania, aby wstrzymać kod bliżej prawdopodobnego miejsca błędu.

Ustawianie punktu przerwania w kodzie

Punkty przerwania w kodzie to najczęstszy typ punktu przerwania. Jeśli chcesz wstrzymać odtwarzanie w określonym miejscu kodu, użyj punktu przerwania w kodzie:

1. Sprawdź ostatni wiersz kodu w pliku updateLabel():

   label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
   

2. Po lewej stronie kodu widać numer tego konkretnego wiersza kodu, którym jest 32. Kliknij 32. Narzędzia deweloperskie umieszczają niebieską ikonę nad 32. Oznacza to, że na tej linii znajduje się punkt przerwania kodu. Narzędzie DevTools zawsze wstrzymuje działanie przed wykonaniem tego wiersza kodu.

3. Kliknij Wznów Wznów wykonywanie skryptu. Skrypt będzie się wykonywać, dopóki nie dotrze do wiersza 32. W wierszach 29, 30 i 31 Narzędzia deweloperskie wyświetlają wartości zmiennych addend1, addend2 i sum w pobliżu ich deklaracji.

W tym przykładzie DevTools zatrzymuje się na punkcie kontrolnym w wierszu kodu na linii 32.

Sprawdzanie wartości zmiennych

Wartości addend1, addend2 i sum wyglądają podejrzanie. Są ujęte w cudzysłowie, co oznacza, że są to ciągi znaków. To dobra hipoteza wyjaśniająca przyczynę błędu. Teraz czas na zebranie dodatkowych informacji. W DevTools znajdziesz wiele narzędzi do analizowania wartości zmiennych.

Metoda 1. Sprawdź zakres

Gdy wstrzymasz działanie w danym wierszu kodu, na karcie Zakres zobaczysz, jakie zmienne lokalne i globalne są zdefiniowane w tym momencie wykonania, wraz z wartością każdej z nich. W razie potrzeby wyświetla też zmienne zamknięcia. Jeśli nie wstrzymasz działania żadnego wiersza kodu, karta Zakres będzie pusta.

Aby edytować wartość zmiennej, kliknij ją dwukrotnie.

Metoda 2. Obserwowanie wyrażeń

Za pomocą karty Obserwuj możesz sprawdzać wartości zmiennych na przestrzeni czasu. Watch nie ogranicza się tylko do zmiennych. Na karcie Obserwuj możesz zapisać dowolne poprawne wyrażenie JavaScript.

Wypróbuj tę funkcję już teraz:

1. Kliknij kartę Oglądaj.
2. Kliknij Dodaj Dodaj wyrażenie do obserwacji.
3. Wpisz typeof sum.
4. Naciśnij Enter. Narzędzia deweloperskie wyświetlają typeof sum: "string". Wartość po prawej stronie dwukropka to wynik wyrażenia.

Zrzut ekranu pokazujący kartę Oglądaj (w prawym dolnym rogu) po utworzeniu wyrażenia typeof sum.

Jak podejrzewaliśmy, zmienna sum jest interpretowana jako ciąg znaków, podczas gdy powinna być liczbą. Potwierdziłeś/Potwierdziłaś, że jest to przyczyna błędu.

Sposób 3. Konsola

Oprócz wyświetlania wiadomości console.log() możesz też używać konsoli do wykonywania dowolnych instrukcji JavaScript. Jeśli chodzi o debugowanie, możesz używać konsoli do testowania potencjalnych poprawek błędów. Wypróbuj tę funkcję już teraz:

1. Jeśli panel konsoli nie jest otwarty, naciśnij Escape, aby go otworzyć. Otworzy się ono u dołu okna narzędzi dla deweloperów.
2. W Konsoli wpisz parseInt(addend1) + parseInt(addend2). To polecenie działa, ponieważ jesteś wstrzymany(-a) na wierszu kodu, w którym zakres obejmuje instrukcje addend1 i addend2.
3. Naciśnij Enter. Narzędzie DevTools analizuje instrukcję i wypisuje wartość 6, która jest oczekiwanym wynikiem demo.

Zrzut ekranu pokazujący panel Konsoli po ocenie parseInt(addend1) + parseInt(addend2).

Stosowanie poprawki

Znaleziona została poprawka błędu. Teraz wystarczy wypróbować rozwiązanie, edytując kod i ponownie uruchamiając wersję demonstracyjną. Aby zastosować poprawkę, nie musisz opuszczać DevTools. Kod JavaScriptu możesz edytować bezpośrednio w interfejsie DevTools. Wypróbuj tę funkcję już teraz:

1. Kliknij Wznów Wznów wykonywanie skryptu.
2. W Edytorze kodu zastąp wiersz 31, var sum = addend1 + addend2, wierszem var sum = parseInt(addend1) + parseInt(addend2).
3. Aby zapisać zmiany, naciśnij Command + S (Mac) lub Control + S (Windows, Linux).
4. Kliknij label_off Wyłącz punkty przerwania. Jego kolor zmieni się na niebieski, co oznacza, że jest aktywny. Gdy to ustawienie jest włączone, Narzędzia deweloperskie ignorują wszystkie ustawione przez Ciebie punkty kontrolne.
5. Wypróbuj wersję demonstracyjną z różnymi wartościami. Demo oblicza teraz poprawnie.

Dalsze kroki

W tym samouczku pokazaliśmy tylko 2 sposoby ustawiania punktów przerwania. Narzędzia deweloperskie oferują wiele innych sposobów, m.in.:

• Warunkowe punkty przerwania, które są uruchamiane tylko wtedy, gdy podany przez Ciebie warunek jest spełniony.
• punkty przerwania w przypadku wykrytych lub niewykrytych wyjątków.
• punkty kontrolne XHR, które są uruchamiane, gdy żądany adres URL pasuje do podanego przez Ciebie podciągu.

Aby dowiedzieć się, kiedy i jak używać poszczególnych typów punktów przerwania, przeczytaj artykuł Wstrzymywanie kodu za pomocą punktów przerwania.

W tym samouczku nie omówiliśmy kilku opcji kroków kodu. Więcej informacji znajdziesz w artykule Przejdź kursorem nad linią kodu.