Debugowanie JavaScriptu

Kayce Basques

Sofia Emelianova

W tym samouczku omawiamy podstawowy przepływ pracy związany z debugowaniem wszelkich problemów z JavaScriptem w Narzędziach deweloperskich. Przeczytaj ten samouczek lub obejrzyj go w wersji wideo.

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 wyglądać tak: 6. To jest błąd, który chcesz naprawić.

W tym przykładzie wynik działania wyrażenia 5 + 1 to 51. Powinna to być 6.

Poznaj interfejs panelu Źródła

Narzędzie DevTools udostępnia wiele różnych narzędzi do różnych zadań, takich jak zmiana CSS, profilowanie wydajności wczytywania strony i monitorowanie żądań sieci. 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 strona wymaga.
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 na stronie.

   Jeśli okno Narzędzi deweloperskich jest szerokie, domyślnie Debugger znajduje się po prawej stronie Edytatora kodu. W takim przypadku karty Zakres i Oglądaj łączą się w zwijanych sekcjach Punkty przerwania, Stos wywołań i inne.

Wstrzymywanie kodu za pomocą punktu 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 wykonać zadanie, ale punkty przerwania można wykonać szybciej. Punkt przerwania umożliwia wstrzymanie kodu w środku jego wykonywania i sprawdzenie wszystkich wartości w danym momencie. Punkty przerwania mają kilka zalet w porównaniu z metodą console.log():

• Aby zobaczyć wiadomości w konsoli, musisz ręcznie otworzyć kod źródłowy, znaleźć odpowiedni kod, wstawić instrukcje console.log(), a następnie ponownie załadować stronę.console.log() 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 przerwania Narzędzia deweloperskie pokazują wartości wszystkich zmiennych w danym momencie. Czasami na Twój kod wpływają zmienne, o których nie wiesz nawet.

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 ją rozwinąć. W Narzędziach deweloperskich znajduje się lista rozwijanych kategorii zdarzeń, np. Animacja i Schowek.
2. Obok kategorii zdarzeń Mysz kliknij arrow_right Rozwiń. W Narzędziach deweloperskich wyświetli się lista zdarzeń myszy, np. kliknięcie i w dół. 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 zdarzeń click.

   

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

   function onClick() {
   

   Jeśli wstrzymasz działanie w innym wierszu kodu, naciskaj Wznów Wznów wykonywanie skryptu, aż zatrzymasz się na odpowiednim wierszu.

Punkty przerwania detektora zdarzeń to tylko jeden z wielu typów punktów przerwania dostępnych w narzędziach programistycznych. 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 analizie kodu możesz zapoznać się z jego wykonaniem po jednym wierszu i sprawdzić, gdzie jest wykonywany w innej kolejności niż powinna. 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 w jego skład. 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 występuje prawdopodobnie w funkcji updateLabel(). Zamiast przechodzić przez każdy wiersz kodu, możesz użyć innego typu punktu przerwania, aby wstrzymać kod bliżej prawdopodobnej lokalizacji błędu.

Ustaw punkt przerwania wiersza kodu

Punkty przerwania w postaci wiersza kodu to najczęstszy typ punktów przerwania. Gdy masz konkretny wiersz kodu, na którym chcesz wstrzymać odtwarzanie, użyj punktu przerwania wiersza kodu:

1. Spójrz na ostatni wiersz kodu w 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 w tym wierszu znajduje się punkt przerwania wiersza kodu. DevTools zawsze zatrzymuje się 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 addend1, addend2 i sum obok 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 zebrać więcej 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 zawiera też zmienne zamknięcia. Gdy nie wstrzymasz działania żadnego wiersza kodu, karta Zakres będzie pusta.

Kliknij dwukrotnie wartość zmiennej, aby ją edytować.

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 obserwowane wyrażenie.
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ą. Udało Ci się potwierdzić, że to było przyczyną 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ć. Otwiera się on na dole okna Narzędzi deweloperskich.
2. W Konsoli wpisz parseInt(addend1) + parseInt(addend2). Ta instrukcja działa, ponieważ wstrzymałeś(-aś) się w wierszu kodu, w którym addend1 i addend2 są w zakresie.
3. Naciśnij Enter. Narzędzia deweloperskie oceniają instrukcję i wyświetlają 6, czyli wynik, który według Ciebie powinna wygenerować wersja demonstracyjna.

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

Napraw problem

Udało Ci się znaleźć rozwiązanie błędu. Teraz wystarczy wypróbować rozwiązanie, edytując kod i ponownie uruchamiając wersję demonstracyjną. Aby zastosować poprawkę, nie musisz zamykać 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. Naciśnij Command + S (Mac) lub Control + S (Windows, Linux), aby zapisać zmianę.
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. W wersji demonstracyjnej dostępne są prawidłowe obliczenia.

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 są wywoływane tylko wtedy, gdy podany przez Ciebie warunek jest spełniony.
• punkty przerwania w przypadku wykrytych lub niewykrytych wyjątków.
• Punkty przerwania XHR, które są aktywowane, gdy żądany adres URL pasuje do podanego podłańcucha.

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 działa kilka elementów sterujących krokami w kodzie. Więcej informacji znajdziesz w artykule Przejdź kursorem nad linią kodu.