Debugowanie JavaScriptu

Kayce Basques

Twitter GitHub Usterka

Sofia Emelianova

GitHub

W tym samouczku omawiamy podstawowy przepływ pracy potrzebny do debugowania problemów z JavaScriptem za pomocą Narzędzi deweloperskich. Możesz przeczytać lub obejrzeć wersję wideo tego samouczka poniżej.

Krok 1. Odtwórz błąd

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

1. Otwórz tę wersję demonstracyjną w nowej karcie.
2. W polu tekstowym Numer 1 wpisz 5.
3. W polu tekstowym Numer 2 wpisz 1.
4. Kliknij Dodaj numery 1 i 2. Na etykiecie pod przyciskiem znajduje się napis 5 + 1 = 51. Wynik powinien wynosić 6. To błąd, który naprawisz.

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

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

W Narzędziach deweloperskich dostępnych jest wiele różnych narzędzi do różnych zadań, takich jak zmienianie CSS, profilowanie wydajności wczytywania stron i monitorowanie żądań sieciowych. W panelu Źródła debugujesz kod JavaScript.

1. Otwórz Narzędzia deweloperskie, naciskając Command + Option + J (Mac) lub Control + Shift + J (Windows, Linux). Ten skrót otwiera panel Konsola.

   

2. Kliknij kartę Źródła.

   

Interfejs panelu Źródła składa się z 3 części:

1. Okienko Nawigator plików. Tutaj są wymienione wszystkie pliki, których żąda strona.
2. Panel Edytora kodu. Gdy wybierzesz plik w panelu Nawigatora plików, tutaj pojawi się jego zawartość.
3. Panel Debugowanie JavaScript. Różne narzędzia do sprawdzania kodu JavaScript strony. Jeśli okno Narzędzi deweloperskich jest szerokie, ten panel jest wyświetlany po prawej stronie panelu Edytora kodu.

Krok 3. Wstrzymaj kod za pomocą punktu przerwania

Powszechną metodą debugowania takich problemów jest wstawienie w kodzie 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ą wykonać je szybciej. Punkt przerwania umożliwia wstrzymanie kodu w trakcie jego wykonywania i badanie wszystkich wartości w odpowiednim 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źć 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ć odtwarzanie danego kodu, nawet jeśli nie znasz 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 na kod 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 spoglądasz krok w tył i zastanowisz się, jak działa aplikacja, 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 warto wstrzymać kod na czas uruchomienia odbiornika click. Punkty przerwania detektora zdarzeń pozwalają to zrobić dokładnie tak:

1. W panelu Debugowanie JavaScript kliknij Punkty przerwania detektora zdarzeń, aby rozwinąć tę sekcję. Narzędzia deweloperskie zawierają listę rozwijanych kategorii zdarzeń, takich jak Animacja czy Schowek.
2. Obok kategorii zdarzenia Mysz kliknij Rozwiń . Narzędzia deweloperskie pokazują listę zdarzeń myszy, takich jak kliknięcie i mousedown. Przy każdym wydarzeniu znajduje się pole wyboru.

3. Zaznacz pole wyboru kliknij. Narzędzia deweloperskie są teraz skonfigurowane tak, aby automatycznie wstrzymywały działanie 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 Twoje działanie jest wstrzymane na innym wierszu kodu, naciskaj Wznów wykonywanie skryptu aż do wstrzymania we właściwym wierszu.

   Uwaga: jeśli wstrzymasz odtwarzanie na innym wierszu, masz rozszerzenie przeglądarki, które rejestruje detektor zdarzeń click na każdej stronie, którą odwiedzasz. Wstrzymano Twoje działanie nasłuchującym rozszerzenia w click. Jeśli używasz trybu incognito, aby przeglądać strony w trybie prywatnym, co powoduje wyłączenie wszystkich rozszerzeń, za każdym razem możesz zauważyć, że wstrzymujesz odtwarzanie we właściwym wierszu kodu.

Punkty przerwania detektora zdarzeń to tylko jeden z wielu typów punktów przerwania dostępnych w narzędziach deweloperskich. Warto zapamiętać wszystkie typy, ponieważ każdy z nich pomaga w jak najszybszym debugowaniu różnych sytuacji. Informacje o tym, kiedy i jak używać poszczególnych typów, znajdziesz w części Wstrzymywanie kodu z punktami przerwania.

Krok 4. Przeanalizuj kod

Jedną z częstych przyczyn błędów jest nieprawidłowe wykonywanie skryptu. Kodowanie pozwala zapoznać się ze sposobem wykonywania kodu po jednym wierszu i ustalić, gdzie dokładnie jest wykonywane w innej kolejności niż oczekiwano. Wypróbuj tę funkcję już teraz:

1. W panelu Źródła narzędzi deweloperskich kliknij Step to next function call , aby wykonać funkcję onClick() po kolei w wierszu. W Narzędziach deweloperskich wyróżniamy ten wiersz kodu:

   if (inputsAreEmpty()) {
   

2. Kliknij Przejdź do następnego wywołania funkcji . DevTools wykonuje polecenie inputsAreEmpty() bez wchodzenia do niego. Zwróć uwagę, że Narzędzia deweloperskie pomijają kilka wierszy kodu. Dzieje się tak, ponieważ funkcja inputsAreEmpty() otrzymała wartość fałsz, więc blok kodu instrukcji if nie został wykonany.

To jest podstawowa koncepcja przechodzenia przez kod. Gdy spojrzysz na kod w get-started.js, zauważysz, ż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 miejsca, w którym znajduje się błąd.

Krok 5. Ustaw punkt przerwania wiersza kodu

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

1. Spójrz na ostatni wiersz kodu w języku: updateLabel():

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

2. Po lewej stronie kodu jest widoczny numer tego wiersza, czyli 32. Kliknij 32. W Narzędziach deweloperskich nad ikoną 32 zostanie umieszczona niebieska ikona. Oznacza to, że na tej linii znajduje się punkt przerwania wiersza kodu. Obecnie w Narzędziach deweloperskich zawsze następuje wstrzymanie przed wykonaniem tego wiersza kodu.

3. Kliknij Wznów wykonywanie skryptu . Skrypt będzie wykonywany, aż 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 Narzędzia deweloperskie zatrzymują się na punkcie przerwania wiersza kodu w wierszu 32.

Krok 6. Sprawdź wartości zmiennych

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

Metoda 1. Panel Zakres

Gdy wstrzymasz wiersz kodu, w panelu Zakres zobaczysz, jakie zmienne lokalne i globalne są aktualnie zdefiniowane, a także wartości każdej z nich. Pokazuje też zmienne zamknięcia (w stosownych przypadkach). Kliknij dwukrotnie wartość zmiennej, aby ją edytować. Jeśli nie wstrzymasz działania na danym wierszu kodu, panel Zakres będzie pusty.

Metoda 2. Obserwowanie wyrażeń

Karta Obserwowane wyrażenia umożliwia monitorowanie wartości zmiennych w czasie. Jak sama nazwa wskazuje, wyrażenia obserwacyjne nie ograniczają się tylko do zmiennych. W wyrażeniu obserwacyjnym możesz przechowywać dowolne prawidłowe wyrażenie JavaScript. Wypróbuj tę funkcję już teraz:

1. Kliknij kartę Obejrzyj.
2. Kliknij Dodaj 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 jest wynikiem wyrażenia obserwacyjnego.

Zrzut ekranu powyżej pokazuje panel Watch Expression (w prawym dolnym rogu) po utworzeniu wyrażenia oglądania typeof sum. Jeśli okno Narzędzi deweloperskich jest duże, panel Watch Expression znajduje się po prawej stronie, nad panelem Punkty przerwania detektora zdarzeń.

Zgodnie z oczekiwaniami funkcja sum jest oceniana jako ciąg znaków, gdy powinna być liczbą. Udało się nam potwierdzić, że to ono jest przyczyną 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 testować 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ć. Pojawia 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 są wstrzymane.
3. Naciśnij Enter. DevTools ocenia wyrażenie i wyświetla 6, czyli wynik, jakiego oczekujesz od wersji demonstracyjnej.

Zrzut ekranu powyżej pokazuje panel Konsola po sprawdzeniu funkcji parseInt(addend1) + parseInt(addend2).

Krok 7. Wprowadź poprawkę

Udało Ci się znaleźć rozwiązanie błędu. Teraz musisz tylko wypróbować poprawkę, edytując kod i uruchomiając wersję demonstracyjną ponownie. Aby zastosować poprawkę, nie musisz zamykać Narzędzi deweloperskich. Kod JavaScript można edytować bezpośrednio w interfejsie Narzędzi deweloperskich. Wypróbuj tę funkcję już teraz:

1. Kliknij 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. Aby zapisać zmiany, naciśnij Command + S (Mac) lub Control + S (Windows, Linux).
4. Kliknij Dezaktywuj punkty przerwania . Kolor zmieni się na niebieski, aby wskazać, że jest aktywny. Przy tej wartości Narzędzia deweloperskie ignoruje wszystkie ustawione punkty przerwania.
5. Wypróbuj wersję demonstracyjną z różnymi wartościami. Dane w wersji demonstracyjnej są teraz prawidłowo obliczane.

Uwaga: ten proces służy tylko do poprawiania kodu w przeglądarce. Nie spowoduje to poprawienia kodu u wszystkich użytkowników odwiedzających Twoją stronę. Aby to zrobić, musisz naprawić kod, który znajduje się na Twoich serwerach. Możesz jednak edytować pliki w Narzędziach deweloperskich i zapisywać je w źródłach za pomocą obszarów roboczych.

Ważne: od Chrome w wersji 105 możesz edytować wstrzymaną funkcję w czasie rzeczywistym.

Dalsze kroki

Gratulacje! Wiesz już, jak najlepiej wykorzystać Narzędzia deweloperskie w Chrome podczas debugowania JavaScriptu. Narzędzia i metody poznane w tym samouczku pomogą Ci zaoszczędzić mnóstwo godzin.

W tym samouczku pokazane są tylko 2 sposoby ustawiania punktów przerwania. Narzędzia deweloperskie zapewniają wiele innych sposobów, w tym:

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

Informacje o tym, kiedy i jak używać poszczególnych typów, znajdziesz w części Wstrzymywanie kodu z punktami przerwania.

Istnieje kilka ustawień kroku, które nie zostały omówione w tym samouczku. Więcej informacji znajdziesz w sekcji Etap poza wierszem kodu.