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. Odczytano lub obejrzyj wersję wideo tego samouczka.

Odtwórz błąd

Znalezienie serii działań, które konsekwentnie odtwarza błąd, jest zawsze pierwszym krokiem i debugowaniu.

1. Otwórz tę wersję demonstracyjną w nowej karcie.
2. W polu Liczba 1 wpisz 5.
3. W polu Liczba 2 wpisz 1.
4. Kliknij Dodaj numer 1 i numer 2. Etykieta pod przyciskiem to 5 + 1 = 51. Wynik powinna wynosić 6. To błąd, który zostanie naprawiony.

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

Poznaj interfejs panelu Źródła

Narzędzia deweloperskie oferują wiele różnych narzędzi do różnych zadań, takich jak zmiana CSS, profilowanie strony. wydajność wczytywania i monitorowanie żądań sieciowych. Panel Źródła służy do debugowania JavaScriptu.

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. Na tej liście znajdują się wszystkie pliki, których dotyczą żądania stron.
2. Sekcja Edytor kodu. Po wybraniu pliku na karcie Strona zawartość plików i pliku, który chcesz wyświetlić.

3. W sekcji Debuger. Różne narzędzia do sprawdzania kodu JavaScript na stronie.

   Jeśli okno Narzędzi deweloperskich jest szerokie, domyślnie Debuger znajduje się po prawej stronie Edytora 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 wstawienie wielu instrukcji console.log() do kodu, by zbadać 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 można wykonać szybciej. O pozwala wstrzymać kod w trakcie jego wykonywania i sprawdzić dosłownie wszędzie. Punkty przerwania mają kilka zalet w porównaniu z metodą console.log():

• Korzystając z console.log(), musisz ręcznie otworzyć kod źródłowy, znaleźć odpowiedni kod, wstawić go console.log(), a następnie załaduj ponownie stronę, aby zobaczyć wiadomości w Konsola. Dzięki punktom przerwania możesz wstrzymać odtwarzanie na odpowiednim kodzie, nawet nie wiedząc, jak działa. mają dobrą strukturę.
• W instrukcjach console.log() musisz wyraźnie określić każdą wartość, która ma być 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 pozwalają szybciej znajdować i naprawiać błędy niż metoda console.log().

Jeśli spojrzysz na tył i zastanowisz się, jak działa aplikacja, możesz wyciągnąć wnioski, na podstawie których w detektorze zdarzeń click powiązanym z parametrem jest obliczana nieprawidłowa suma (5 + 1 = 51). Dodaj przyciski 1 i 2. Dlatego prawdopodobnie najlepiej będzie wstrzymać działanie kodu na mniej czas uruchamiany przez detektor click. Punkty przerwania detektora zdarzeń umożliwiają wykonanie tej czynności:

1. W sekcji Debuger kliknij Punkty przerwania detektora zdarzeń, aby rozwinąć . W Narzędziach deweloperskich znajduje się lista rozwijanych kategorii zdarzeń, takich jak Animacja czy 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 wydarzenia znajduje się pole wyboru.

3. Zaznacz pole wyboru click. Narzędzia deweloperskie są teraz skonfigurowane tak, aby automatycznie wstrzymywać działanie dowolnego click wykonywanych przez detektor zdarzeń.

   

4. Po powrocie do wersji demonstracyjnej ponownie kliknij Add Number 1 and Number 2. Narzędzia deweloperskie wstrzymują wersję demonstracyjną, zaznaczy odpowiedni wiersz kodu w panelu Źródła. Narzędzia deweloperskie powinny zostać wstrzymane w tym wierszu kod:

   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 deweloperskich. Jest warto przyjrzeć się różnym typom, ponieważ każdy z nich pomaga debugować jak najszybciej. Przeczytaj sekcję Wstrzymywanie kodu z punktami przerwania, aby dowiedzieć się, kiedy i jak korzystanie z każdego typu pliku.

Przeanalizuj kod

Jedną z częstych przyczyn błędów jest wykonywanie skryptu w niewłaściwej kolejności. Analiza kodu pozwala przejrzeć wykonywanie kodu po jednym wierszu i sprawdzić, gdzie jest jest wykonywany w innej kolejności niż powinna. Wypróbuj tę funkcję już teraz:

1. W panelu Sources (Źródła) w Narzędziach deweloperskich kliknij step_into Przejdź do następnego wywołania funkcji, aby przejść przez wykonanie funkcji onClick() (po jednym wierszu). W Narzędziach deweloperskich zaznaczono ten wiersz kodu:

   if (inputsAreEmpty()) {
   

2. Kliknij step_over Przejdź do następnego wywołania funkcji.

   Narzędzia deweloperskie uruchamiają polecenie inputsAreEmpty() bez przechodzenia do niego. Zwróć uwagę, że Narzędzia deweloperskie pomijają kilka wierszy w kodzie. Jest to spowodowane tym, że funkcja inputsAreEmpty() została oceniona jako fałsz, więc blok instrukcji if kod nie został uruchomiony.

To jest podstawowa koncepcja kodowania. Jeśli spojrzysz na kod w sekcji get-started.js, możesz zobaczysz, że błąd prawdopodobnie znajduje się gdzieś w funkcji updateLabel(). Zamiast przez nie przejść w każdym wierszu kodu, możesz użyć innego typu punktu przerwania, aby wstrzymać kod bliżej prawdopodobnych lokalizację błędu.

Ustaw punkt przerwania wiersza kodu

Punkty przerwania w postaci wiersza kodu to najczęstszy typ punktów przerwania. Jeśli masz określony wiersz w kodzie, 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 widoczny jest numer wiersza tego konkretnego wiersza, czyli 32 Kliknij 32. Narzędzia deweloperskie umieszczają niebieską ikonę nad wartością 32. Oznacza to, że istnieje punktu przerwania wiersza kodu w tym wierszu. Narzędzia deweloperskie zawsze są wstrzymywane przed tym wierszem kodu .

3. Kliknij Wznów Wznów wykonywanie skryptu. skrypt będzie wykonywany, dopóki nie osiągnie 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 Narzędzia deweloperskie zatrzymują się na punkcie przerwania wiersza kodu w wierszu 32.

Sprawdzanie wartości zmiennych

Wartości addend1, addend2 i sum wyglądają podejrzanie. Umieść je w cudzysłowie, że są to ciągi smyczkowe. To dobra hipoteza wyjaśniająca przyczynę błędu. Teraz czas zebrać więcej informacji. Narzędzia deweloperskie oferują wiele narzędzi do badania zmiennych .

Metoda 1. Sprawdź zakres

Gdy wstrzymasz odtwarzanie w wierszu kodu, na karcie Zakres zobaczysz, jakie zmienne lokalne i globalne definiowane na tym etapie, wraz z wartością każdej zmiennej. Pokazuje też zmienne zamknięcia, gdy mają zastosowanie. Jeśli nie wstrzymasz wiersza w kodzie, karta Zakres jest pusta.

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

Metoda 2. Obserwowanie wyrażeń

Karta Oglądaj umożliwia monitorowanie wartości zmiennych w czasie. Oglądanie nie ogranicza się tylko do zmiennych. Możesz zapisać dowolny prawidłowy kod JavaScript na karcie Obejrzyj.

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. W Narzędziach deweloperskich wyświetla się typeof sum: "string". Wartość po prawej stronie dwukropka to wyniku wyrażenia.

Ten zrzut ekranu przedstawia kartę Obejrzyj (w prawym dolnym rogu) po utworzeniu zegarka typeof sum i wyrażenia.

Zgodnie z podejrzeniami pole sum jest sprawdzane jako ciąg znaków, podczas gdy powinno być liczbą. Potwierdzono że to jest przyczyną błędu.

Metoda 3. Konsola

Oprócz wyświetlania wiadomości w języku console.log() możesz też za pomocą konsoli ocenić dowolne z nich instrukcje JavaScript. Jeśli chodzi o debugowanie, to w Konsoli możesz testować potencjalne poprawki. na robaki. Wypróbuj tę funkcję już teraz:

1. Jeśli panel konsoli nie jest otwarty, naciśnij Escape, aby go otworzyć. Otwiera się na dole w oknie Narzędzi deweloperskich.
2. W konsoli wpisz parseInt(addend1) + parseInt(addend2). Ta instrukcja działa, ponieważ są wstrzymane w wierszu kodu, gdzie addend1 i addend2 są w zakresie.
3. Naciśnij Enter. Narzędzia deweloperskie oceniają instrukcję i wyświetlają 6, czyli oczekiwany wynik. należy przygotować wersję demonstracyjną.

Ten zrzut ekranu pokazuje panel Konsola po sprawdzeniu funkcji parseInt(addend1) + parseInt(addend2).

Napraw problem

Udało Ci się znaleźć rozwiązanie błędu. Pozostaje Ci już tylko wypróbować poprawkę, edytując kod ponowne uruchomienie wersji demonstracyjnej. Aby zastosować poprawkę, nie musisz zamykać Narzędzi deweloperskich. Możesz edytować kod JavaScript bezpośrednio w interfejsie 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 ciągiem 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 zmienia się na niebieski, co wskazuje, że jest aktywne. Gdy ta opcja jest włączona, Narzędzia deweloperskie ignoruje ustawione punkty przerwania.
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 zapewniają wiele innych sposobów, w tym:

• Warunkowe punkty przerwania są wywoływane tylko wtedy, gdy podany przez Ciebie warunek jest spełniony.
• Punkty przerwania dotyczące wychwyconych lub niezarejestrowanych 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, przeczytaj sekcję Wstrzymywanie kodu z punktami przerwania.

W tym samouczku działa kilka elementów sterujących krokami w kodzie. Patrz sekcja Przejście , aby dowiedzieć się więcej.