ten poradnik nauczy Cię podstawowego przepływu pracy do debugowania wszelkich problemów JavaScript w narzędziach DevTools. Czytaj dalej lub obejrzyj wersję wideo tego samouczka poniżej.

# Krok 1: Odtwórz błąd

znalezienie serii działań, które konsekwentnie odtwarza błąd, jest zawsze pierwszym krokiem do debugowania.

1. Kliknij Otwórz Demo. Demo otwiera się w nowej karcie.

   Otwórz Demo

2. wpisz 5 w polu tekstowym numer 1.

3. wpisz 1 w polu tekstowym numer 2.

4. kliknij dodaj numer 1 i numer 2. Etykieta poniżej przycisku mówi 5 + 1 = 51. Wynik powinien wynosić 6. To jest błąd, który zamierzasz naprawić.

   

   Rysunek 1. Wynik 5 + 1 wynosi 51. Powinno być 6.

# Krok 2: Zapoznaj się z interfejsem Panelu Źródła

DevTools zapewnia wiele różnych narzędzi do różnych zadań, takich jak zmiana CSS, profilowanie wydajności ładowania strony i monitorowanie żądań sieciowych. Panel Źródła jest miejscem, w którym debugujesz JavaScript.

1. Otwórz DevTools naciskając Command+Option+I (Mac) lub Control+Shift+I (Windows, Linux). Ten skrót otwiera panel konsoli.

   

   Rysunek 2. Panel Konsoli

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

   

   Rysunek 3. Panel Źródła

interfejs panelu źródeł składa się z 3 części:

Rysunek 4. 3 części interfejsu Panelu Źródła

1. panel nawigatora plików. Każdy plik żądany przez Stronę jest tutaj wymieniony.
2. panel edytora kodu. Po wybraniu pliku w panelu nawigatora plików wyświetlana jest jego zawartość.
3. Panel debugowania JavaScript. Różne narzędzia do sprawdzania JavaScript strony. Jeśli okno DevTools jest szerokie, to panel ten jest wyświetlany po prawej stronie okna edytora kodu.

# Krok 3: Wstrzymaj kod za pomocą punktu przerwania

powszechną metodą debugowania takiego problemu jest wstawienie wielu instrukcji console.log() do kodu, w celu sprawdzenia 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 mogą to zrobić szybciej. Punkt przerwania umożliwia wstrzymanie kodu w trakcie jego wykonywania i sprawdzenie wszystkich wartości w danym momencie. Punkty przerwania mają kilka zalet w stosunku do metody 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ć wiadomości w konsoli. Dzięki punktom przerwania możesz wstrzymać pracę nad odpowiednim kodem, nawet nie wiedząc, jak jest on skonstruowany.
• w instrukcjach console.log() musisz jawnie określić każdą wartość, którą chcesz sprawdzić. Z punktami przerwania, DevTools pokazuje wartości wszystkich zmiennych w danym momencie w czasie. Czasami istnieją zmienne wpływające na kod, 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 zrobisz krok wstecz i pomyślisz o tym, jak działa aplikacja, możesz zgadnąć, że Niepoprawna suma (5 + 1 = 51) zostanie obliczona w słuchaczu zdarzeń click powiązanym z przyciskami dodaj liczbę 1 i liczbę 2. Dlatego prawdopodobnie chcesz wstrzymać kod w czasie, gdy słuchacz click wykonuje. Punkty przerwania detektora zdarzeń pozwalają ci to zrobić:

1. w okienku debugowania JavaScript kliknij punkty przerwania detektora zdarzeń, aby rozwinąć sekcję. DevTools ujawnia listę rozszerzalnych kategorii zdarzeń, takich jak animacja i schowek.

2. obok kategorii zdarzenia myszy kliknij rozwiń . DevTools ujawnia listę zdarzeń myszy, takich jak click I mousedown. Każde zdarzenie ma pole wyboru obok.

3. zaznacz pole wyboru kliknij. DevTools jest teraz skonfigurowany tak, aby automatycznie pauzował, gdy dowolny detektor zdarzeń click zostanie uruchomiony.

   

   Rysunek 5. Pole wyboru Kliknij jest włączone

4. z powrotem na demo, kliknij dodaj numer 1 i numer 2 ponownie. DevTools zatrzymuje demo i podświetla linię kodu w Panelu Źródła. DevTools powinno być wstrzymane w tej linii kodu:

   function onClick() {

   jeśli jesteś wstrzymany w innym wierszu kodu, naciśnij Wznów wykonywanie skryptu , aż zostaniesz wstrzymany w odpowiednim wierszu.

   Uwaga: jeśli zatrzymałeś się w innym wierszu, masz rozszerzenie przeglądarki, które rejestruje detektor zdarzeń click na każdej odwiedzanej stronie. Zostałaś zatrzymana w słuchaczu rozszerzenia click. Jeśli używasz trybu Incognito do przeglądania w trybie prywatnym, który wyłącza wszystkie rozszerzenia, możesz zobaczyć, że za każdym razem wstrzymujesz poprawną linię kodu.

punkty przerwania detektora zdarzeń są tylko jednym z wielu typów punktów przerwania dostępnych w narzędziach DevTools. Warto zapamiętać wszystkie różne typy, ponieważ każdy typ ostatecznie pomaga debugować różne scenariusze tak szybko, jak to możliwe. Zobacz wstrzymywanie kodu za pomocą punktów przerwania, aby dowiedzieć się, kiedy i jak używać każdego typu.

# Krok 4: przejdź przez kod

jedną z najczęstszych przyczyn błędów jest wykonanie skryptu w złej kolejności. Przechodząc przez KOD, możesz przejść przez jego wykonanie, jedną linię na raz i dowiedzieć się, gdzie jest on wykonywany w innej kolejności niż oczekiwano. Wypróbuj teraz:

1. w Panelu Źródła DevTools kliknij krok do następnego wywołania funkcji , aby przejść przez wykonywanie funkcji onClick(), jedna linia na raz. DevTools wyróżnia następujący wiersz kodu:

   if (inputsAreEmpty()) {

2. kliknij krok nad następnym wywołaniem funkcji . DevTools wykonuje inputsAreEmpty() bez wchodzenia w to. Zauważ, jak DevTools pomija kilka linii kodu. Dzieje się tak dlatego, że inputsAreEmpty() obliczono na false, więc blok kodu instrukcji if nie został wykonany.

to podstawowa idea przechodzenia przez kod. Jeśli spojrzysz na kod w get-started.js, zobaczysz, że błąd prawdopodobnie znajduje się gdzieś w funkcji updateLabel(). Zamiast przechodzić przez każdą linię kodu, możesz użyć innego typu punktu przerwania, aby zatrzymać kod bliżej prawdopodobnej lokalizacji błędu.

# Krok 5: Ustawia punkt przerwania linii kodu

punkty przerwania linii kodu są najczęstszym typem punktu przerwania. Jeśli masz określoną linię kodu, którą chcesz wstrzymać, użyj punktu przerwania linii kodu:

1. spójrz na ostatnią linijkę kodu w updateLabel():

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

2. po lewej stronie kodu możesz zobaczyć numer wiersza tego konkretnego wiersza kodu, który jest 32. Kliknij na 32. DevTools umieszcza niebieską ikonę na górze 32. Oznacza to, że na tej linii znajduje się punkt przerwania linii kodu. DevTools zawsze zatrzymuje się przed wykonaniem tej linii kodu.

3. kliknij Wznów wykonywanie skryptu . Skrypt kontynuuje wykonywanie, dopóki nie osiągnie linii 32. W wierszach 29, 30 i 31 DevTools wypisuje wartości addend1, addend2 i sum po prawej stronie średnika każdej linii.

   

   Rysunek 6. DevTools zatrzymuje się na linii kodu breakpoint on line 32

# Krok 6: Sprawdź wartości zmiennej

wartości addend1, addend2 i sum wyglądają podejrzanie. Są zawinięte w cudzysłowy, co oznacza, że są strunami. Jest to dobra hipoteza dla wyjaśnienia przyczyny błędu. Teraz nadszedł czas, aby zebrać więcej informacji. DevTools dostarcza wiele narzędzi do badania wartości zmiennych.

# Metoda 1: Panel zakres

po zatrzymaniu w wierszu kodu, panel zakres pokazuje, jakie zmienne lokalne i globalne są obecnie zdefiniowane, wraz z wartością każdej zmiennej. W stosownych przypadkach pokazuje również zmienne zamknięcia. Kliknij dwukrotnie wartość zmiennej, aby ją edytować. Gdy linia kodu nie jest wstrzymana, okienko zakres jest puste.

Rysunek 7. Panel zakres

# Metoda 2: Watch Expressions

Zakładka Watch Expressions pozwala monitorować wartości zmiennych w czasie. Jak sama nazwa wskazuje, wyrażenia zegarka nie ograniczają się tylko do zmiennych. W wyrażeniu zegarka można przechowywać dowolne prawidłowe wyrażenie JavaScript. Wypróbuj teraz:

1. kliknij kartę Obserwuj.

2. Kliknij Dodaj Wyrażenie .

3. wpisz typeof sum.

4. Naciśnij Enter. DevTools pokazuje typeof sum: "string". Wartość po prawej stronie dwukropka jest wynikiem wyrażenia zegarka.

   

   Rysunek 8. Panel Obserwuj wyrażenie (prawy dolny róg), po utworzeniu wyrażenia Obserwuj typeof sum. Jeśli okno DevTools jest duże, panel wyrażenia Obserwuj znajduje się po prawej stronie, nad panelem punktów przerwania detektora zdarzeń.

zgodnie z podejrzeniami, sum jest oceniana jako ciąg znaków, kiedy powinna być liczbą. Teraz potwierdziłeś, że to jest przyczyna błędu.

# Metoda 3: Konsola

oprócz wyświetlania wiadomości console.log(), Możesz również użyć konsoli do oceny dowolnych instrukcji JavaScript. Jeśli chodzi o debugowanie, możesz użyć konsoli, aby przetestować potencjalne poprawki błędów. Wypróbuj teraz:

1. jeśli nie masz otwartej szuflady konsoli, naciśnij klawisz Escape, aby ją otworzyć. Otwiera się na dole okna DevTools.

2. w konsoli wpisz parseInt(addend1) + parseInt(addend2). Ta instrukcja działa, ponieważ jesteś wstrzymany w linii kodu, gdzie addend1 i addend2 są w zasięgu.

3. Naciśnij Enter. DevTools ocenia instrukcję i wypisuje 6, co jest wynikiem, którego oczekuje się od wersji demonstracyjnej.

   

   Rysunek 9. Szuflada konsoli, po sprawdzeniu parseInt(addend1) + parseInt(addend2).

# Krok 7: Zastosuj poprawkę

znalazłeś poprawkę dla błędu. Wszystko, co pozostało, to wypróbować poprawkę, edytując kod i ponownie uruchamiając demo. Nie musisz opuszczać DevTools, aby zastosować poprawkę. Możesz edytować kod JavaScript bezpośrednio w interfejsie użytkownika DevTools. Wypróbuj teraz:

1. kliknij Wznów wykonywanie skryptu .
2. w edytorze kodu zamień linię 31, var sum = addend1 + addend2 na var sum = parseInt(addend1) + parseInt(addend2).
3. naciśnij Command + s (Mac) lub Control+S (Windows, Linux), aby zapisać zmianę.
4. kliknij Dezaktywuj punkty przerwania . Zmienia kolor na niebieski, aby wskazać, że jest aktywny. Podczas gdy jest to ustawione, DevTools ignoruje ustawione przez Ciebie punkty przerwania.
5. Wypróbuj demo z różnymi wartościami. Demo teraz oblicza się poprawnie.

Gratulacje! Teraz wiesz, jak w pełni wykorzystać narzędzia programistyczne Chrome podczas debugowania JavaScript. Narzędzia i metody, których nauczyłeś się w tym samouczku, mogą zaoszczędzić Ci niezliczone godziny.

ten samouczek pokazał tylko dwa sposoby ustawiania punktów przerwania. DevTools oferuje wiele innych sposobów, w tym:

• warunkowe punkty przerwania, które są wyzwalane tylko wtedy, gdy podany warunek jest prawdziwy.
• punkty przerwania dla przechwyconych lub nieprzestrzeganych WYJĄTKÓW.
• punkty przerwania XHR, które są wyzwalane, gdy żądany adres URL pasuje do podanego fragmentu.

Zobacz wstrzymywanie kodu za pomocą punktów przerwania, aby dowiedzieć się, kiedy i jak używać każdego typu.

istnieje kilka kontroli krokowych kodu, które nie zostały wyjaśnione w tym samouczku. Zobacz krok nad wierszem kodu, aby dowiedzieć się więcej.