Debugowanie JavaScriptu

Kayce Basques

Sofia Emelianova

W tym samouczku omawiamy podstawowy przepływ pracy debugowania dowolnych problemów z językiem JavaScript za pomocą Narzędzi deweloperskich. Przeczytaj lub obejrzyj jego wersję wideo.

Powtórz czynności, które spowodowały błąd.

Pierwszym krokiem do debugowania jest zawsze znalezienie serii działań, które powodują wystąpienie błędu.

1. Otwórz wersję demonstracyjną w nowej karcie.
2. W polu Numer 1 wpisz 5.
3. W polu Numer 2 wpisz 1.
4. Kliknij Dodaj numery 1 i 2. Etykieta pod przyciskiem zawiera tekst 5 + 1 = 51. Wynik powinien wynosić 6. To jest błąd, który zamierzasz naprawić.

W tym przykładzie wynik 5 + 1 to 51. Powinna być 6.

Zapoznaj się z interfejsem panelu Źródła

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

1. Otwórz Narzędzia deweloperskie i przejdź do panelu Źródła.

   

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

1. Karta Strona z drzewem plików. Tutaj są wymienione wszystkie pliki, których żądają strony.
2. Sekcja Edytor kodu. Gdy wybierzesz plik na karcie Strona, tutaj pojawi się jego zawartość.

3. Sekcja Debugger. Różne narzędzia do sprawdzania kodu JavaScript strony.

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

Wstrzymywanie kodu za pomocą punktu przerwania

Typową metodą debugowania takich problemów jest wstawienie do kodu wielu instrukcji console.log() w celu sprawdzenia wartości w trakcie 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 mogą zrobić to szybciej. Punkt przerwania umożliwia wstrzymanie kodu w trakcie jego wykonywania i sprawdzanie wszystkich wartości w danym momencie. Punkty przerwania mają kilka zalet w porównaniu z metodą console.log():

• W przypadku console.log() musisz ręcznie otworzyć kod źródłowy, znaleźć właściwy kod, wstawić instrukcje console.log(), a następnie ponownie załadować stronę, aby zobaczyć wiadomości w konsoli. Dzięki punktom przerwania możesz zatrzymać się na danym kodzie, 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. Czasem w kodzie wpływają zmienne, o których nawet nie wiesz.

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

Jeśli cofniesz się i zastanowisz nad działaniem aplikacji, możesz zgadnąć, że w detektorze zdarzeń click powiązanym z przyciskiem Dodaj numery 1 i 2 obliczana jest nieprawidłowa suma (5 + 1 = 51). Dlatego prawdopodobnie warto wstrzymać kod na czas wykonywania przez odbiornik click. Punkty przerwania detektora zdarzeń służą właśnie do tego:

1. W sekcji Debuger kliknij Punkty przerwania detektora, aby ją rozwinąć. Narzędzia deweloperskie zawierają listę rozwijanych kategorii zdarzeń, na przykład Animacja i Schowek.
2. Obok kategorii zdarzenia Mysz kliknij arrow_right Rozwiń. Narzędzia deweloperskie pokazują listę zdarzeń myszy, takich jak kliknięcie i mousedown. Obok każdego wydarzenia znajduje się pole wyboru.

3. Zaznacz pole wyboru kliknij. Narzędzia deweloperskie są teraz skonfigurowane do automatycznego wstrzymywania po uruchomieniu dowolnego detektora zdarzeń click.

   

4. Po powrocie do wersji demonstracyjnej ponownie kliknij Dodaj numery 1 i 2. Narzędzia deweloperskie wstrzymują wersję demonstracyjną i wyróżniają wiersz kodu w panelu Źródła. Należy wstrzymać Narzędzia deweloperskie w tym wierszu kodu:

   function onClick() {
   

   Jeśli wstrzymasz działanie na innym wierszu kodu, naciśnij Wznów Wznów wykonywanie skryptu, aż wstrzymasz działanie we właściwym wierszu.

Punkty przerwania detektora zdarzeń to tylko jeden z wielu typów punktów przerwania dostępnych w Narzędziach deweloperskich. Warto przyjrzeć się różnym typom, ponieważ każdy z nich pomaga w szybszym debugowaniu różnych scenariuszy. Informacje o tym, kiedy i jak używać poszczególnych typów punktów znajdziesz w części Wstrzymywanie kodu za pomocą punktów przerwania.

Zapoznaj się z kodem

Jedną z najczęstszych przyczyn błędów jest sytuacja, w której skrypt jest wykonywany w niewłaściwej kolejności. W ten sposób możesz prześledzić działanie kodu (po 1 wierszu) i zorientować się, gdzie jest on uruchamiany w innej kolejności niż oczekiwano. Wypróbuj tę funkcję już teraz:

1. W panelu Źródła Narzędzi deweloperskich kliknij step_into Step to next function (Krok do następnego wywołania funkcji), aby wykonać procedurę onClick() po kolei. W Narzędziach deweloperskich wyróżni ten wiersz kodu:

   if (inputsAreEmpty()) {
   

2. Kliknij step_over Przejdź następne wywołanie funkcji.

   DevTools uruchamia polecenie inputsAreEmpty() bez wchodzenia w jego odczyt. Zwróć uwagę, że DevTools pomija kilka wierszy kodu. Dzieje się tak, ponieważ funkcja inputsAreEmpty() ma wartość fałsz, więc blok kodu instrukcji if nie został wykonany.

To podstawowa koncepcja analizowania kodu. Po spojrzeniu na kod w narzędziu get-started.js widać, że błąd jest prawdopodobnie gdzieś 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.

Ustawianie punktu przerwania wiersza kodu

Punkty przerwania wiersza kodu to najczęściej spotykany typ punktów przerwania. Gdy masz wiersz kodu, w którym chcesz wstrzymać odtwarzanie, użyj punktu przerwania wiersza kodu:

1. Spójrz na ostatni wiersz kodu w pliku updateLabel():

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

2. Po lewej stronie kodu zobaczysz numer tego wiersza, czyli 32. Kliknij 32. Narzędzia deweloperskie umieszczają niebieską ikonę nad symbolem 32. Oznacza to, że w tej linii znajduje się punkt przerwania wiersza kodu. Obecnie Narzędzia deweloperskie zawsze są wstrzymywane przed wykonaniem tego wiersza kodu.

3. Kliknij Wznów Wznów wykonywanie skryptu. Skrypt będzie wykonywał działanie, dopóki nie osiągnie 32 wiersza. W wierszach 29, 30 i 31 Narzędzia deweloperskie wyświetlają wartości addend1, addend2 i sum obok deklaracji.

W tym przykładzie Narzędzia deweloperskie zatrzymują się w punkcie przerwania wiersza kodu w wierszu 32.

Sprawdzanie wartości zmiennych

Wartości addend1, addend2 i sum wyglądają podejrzanie. Są ujęte w cudzysłów, co oznacza, że są ciągami tekstowymi. To dobra hipoteza wyjaśniająca przyczynę błędu. Teraz czas zebrać więcej informacji. W Narzędziach deweloperskich dostępnych jest wiele narzędzi do badania wartości zmiennych.

Metoda 1. Sprawdź zakres

Gdy wstrzymasz odtwarzanie w wierszu kodu, na karcie Zakres zobaczysz, jakie zmienne lokalne i globalne są zdefiniowane w tym momencie wykonywania, a także wartość każdej z nich. Wskazuje też zmienne zamknięcia, jeśli są potrzebne. Jeśli nie wstrzymasz działania w odniesieniu do wiersza kodu, karta Zakres będzie pusta.

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

Metoda 2. Obserwowanie wyrażeń

Karta Obserwuj umożliwia monitorowanie wartości zmiennych w czasie. Raport Watch nie ogranicza się tylko do zmiennych. Na karcie Obejrzyj możesz przechowywać dowolne prawidłowe wyrażenie JavaScript.

Wypróbuj tę funkcję już teraz:

1. Kliknij kartę Obejrzyj.
2. Kliknij add Dodaj obserwowane wyrażenie.
3. Wpisz typeof sum.
4. Naciśnij Enter. W Narzędziach deweloperskich wyświetla się typeof sum: "string". Wartość na prawo od dwukropka jest wynikiem wyrażenia.

Na tym zrzucie ekranu widać kartę Oglądaj (w prawym dolnym rogu) po utworzeniu wyrażenia oglądania typeof sum.

Zgodnie z oczekiwaniami funkcja sum jest oceniana jako ciąg znaków, a powinna być liczbą. Potwierdziłeś, że to jest przyczyna błędu.

Metoda 3. Konsola

Oprócz wyświetlania wiadomości console.log() możesz też używać konsoli do oceny dowolnych instrukcji JavaScript. Jeśli chodzi o debugowanie, możesz za pomocą Konsoli przetestować potencjalne poprawki błędów. Wypróbuj tę funkcję już teraz:

1. Jeśli panel konsoli nie jest otwarty, naciśnij Escape, aby go otworzyć. który otworzy się u dołu okna Narzędzi deweloperskich.
2. W konsoli wpisz parseInt(addend1) + parseInt(addend2). Ta instrukcja działa, ponieważ wstrzymasz wiersz kodu, w którym zakres addend1 i addend2.
3. Naciśnij Enter. DevTools ocenia instrukcję i wydrukuje 6 – taki wynik, jakiego oczekujesz od wersji demonstracyjnej.

Ten zrzut ekranu przedstawia panel Konsola po ocenie funkcji parseInt(addend1) + parseInt(addend2).

Napraw problem

Udało Ci się znaleźć rozwiązanie błędu. Teraz musisz tylko wypróbować poprawkę – edytuj kod i uruchom wersję demonstracyjną ponownie. Aby zastosować poprawkę, nie musisz zamykać Narzędzi deweloperskich. Kod JavaScript można edytować bezpośrednio w interfejsie użytkownika Narzędzi deweloperskich. 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, wartością var sum = parseInt(addend1) + parseInt(addend2).
3. Naciśnij Command + S (Mac) lub Control + S (Windows, Linux), aby zapisać zmianę.
4. Kliknij label_off – Dezaktywuj punkty przerwania. Kolor zmieni się na niebieski, aby wskazać, że jest aktywny. Gdy to ustawienie jest skonfigurowane, Narzędzia deweloperskie ignoruje wszystkie ustawione punkty przerwania.
5. Wypróbuj wersję demonstracyjną z różnymi wartościami. Demonstracja oblicza teraz poprawnie.

Dalsze kroki

W tym samouczku omawialiśmy tylko 2 sposoby ustawiania punktów przerwania. W Narzędziach deweloperskich dostępnych jest na wiele innych sposobów, w tym:

• Warunkowe punkty przerwania, które są wyzwalane tylko wtedy, gdy podany warunek jest spełniony.
• Punkty przerwania w wykrytych lub niewykrytych wyjątkach.
• Punkty przerwania XHR, które są wyzwalane, gdy żądany adres URL pasuje do podanego podłańcucha.

Informacje o tym, kiedy i jak korzystać z poszczególnych typów, znajdziesz w artykule Wstrzymywanie kodu za pomocą punktów przerwania.

Istnieje kilka ustawień kroku, które nie zostały omówione w tym samouczku. Więcej informacji znajdziesz w sekcji Przejście na kolejny wiersz kodu.