W tym artykule wyjaśnimy, jak debugować JavaScript za pomocą DevTools w Chrome krok po kroku. Jeśli chcesz debugować kod JavaScript w Chrome, musisz wykonać te kroki, jak wspomniano poniżej.

Przegląd projektu

Zamierzam zademonstrować przykład debugowania kodu JavaScript w Chrome. Na tym etapie podam podstawowy opis kodu. Ten projekt dotyczy obliczania operacji modulo między dwiema liczbami. Ten przykład pozwala ci przekazać wartość dywidendy i dzielnika. Następnie, po kliknięciu przycisku obliczeniowego, obliczenie MOD między dwiema liczbami zajmie minutę i da wyjście. Składnia operacji modulo jest następująca:

x mod y = r

Gdzie x = dywidenda, y = dzielnik i r = reszta

W tym projekcie są dwa pliki, .HTML i .plik JS. Plik JavaScript zawiera 5 funkcji w celu obliczenia modu dwóch liczb:

1. Kliknij Handler: Podaje komunikat ostrzegawczy, jeśli jedno lub oba pola wejściowe są puste
2. Wejścia są puste (): Ta funkcja służy do sprawdzenia, czy pola wejściowe są puste, czy nie
3. UpdateLabel (): Ta funkcja służy do obliczenia modu dwóch liczb
4. getNumber1 (): Używane do uzyskania wartości pierwszej liczby
5. getNumber2 (): Używane do uzyskania wartości drugiej liczby

Kod JavaScript ilustruje się poniżej:

funkcja onClick ()
if (inputSareEmpty ())
etykieta.textContent = 'Alert: Musisz wprowadzić liczby w obu polach.';;
powrót;

UpdateLabel ();

funkcja wejściowaSareEmpty ()
if (getNum1 () === "|| getNum2 () ===")
zwrócić true;
w przeciwnym razie
zwrócić fałsz;


funkcja updateLabel ()
var value1 = getNum1 ();
var value2 = getNum2 ();
var mod = "wartość1" % "wartość2"
etykieta.TextContent = wartość1 + ' %' + wartość2 + '=' + mod;

funkcja getNum1 ()
Zwróć dane wejściowe [0].wartość;

funkcja getNum2 ()
zwracane dane wejściowe [1].wartość;

Kod pliku HTML jest zilustrowany poniżej:

Oblicz mod między dwiema liczbami

Wprowadź wartość dywidendy

Wprowadź wartość Divisor

Mod obliczeniowy (%)

Wyjście projektu:

Wykrywanie błędów

Smutna część jest to, że kiedy tylko uruchomimy ten kod, pokazuje ci to pewne błędy. Jak można wyraźnie obserwować w poniższym przykładzie, gdy wkładamy wartości, wyjście jest niezdefiniowane zamiast rzeczywisty wynik. Więc teraz musimy wykryć pierwotną przyczynę błędu, który został wyjaśniony krótko w tym samym artykule później.

Przykład

W tym przykładzie przekazamy wartości, które podają niezdefiniowane dane wyjściowe, jak pokazano na poniższym zdjęciu.

Więc teraz musimy szybko naprawić ten błąd. Na tym etapie naszym głównym celem jest wykrycie źródła błędów. Aby szybko wykryć błąd, powinieneś debugować kod JavaScript w Chrome.

W tym celu musisz uruchomić aplikację na Chrome, a następnie musisz otworzyć DevTool, naciskając krótkie klucze Ctrl+Shift+I. Po otwarciu DevTool będziesz mógł zobaczyć ekran pokazany poniżej. Oprócz wielu zadań wykonanych przez DevTool, może również monitorować żądania, zmieniać CSS.

Przegląd narzędzi programistów

Możesz debugować kod JavaScript na karcie panelu źródłowego. Ma 3 części, jak pokazano poniżej:

1. Strona nawigatora plików: Żądania każdego pliku można wymienić na tej karcie.
2. Edytor kodu: Wyświetla zawartość pliku
3. JavaScript debugowanie panelu: Służy do kontroli JavaScript

Debugowanie kodu

Najprostszym sposobem na debugowanie błędu w kodzie jest to, że musisz wstawić konsola.dziennik() Funkcja w swoim kodzie w celu jednoczesnego sprawdzania wartości.

funkcja updateLabel ()
var value1 = getNum1 ();
konsola.log („wartość1: ', wartość1);
var value2 = getNum2 ();
konsola.log („wartość2: ', wartość2);
var mod = parseint (wartość1) % parseint (wartość2);
konsola.log („wynik:”, mod);
etykieta.TextContent = wartość1 + ' %' + wartość2 + '=' + mod;

Chociaż konsola.dziennik() Funkcja może być dobrą opcją do wykrywania błędów, ale punkty przerwania mogą być bardziej skuteczną opcją, ponieważ pozwala zatrzymać kod podczas jego wykonywania i analizować odpowiednią wartość. Ponadto punkt przerwania jest lepszy niż konsola.log (), ponieważ praca z konsolą.log () musisz obserwować wiele kroków, które należy wykonać ręcznie, aby wyświetlić wartości w oknie konsoli, a punkty przerwania ułatwiają bezpośrednio pracując.

Wstawienie punktów przerwania w kodzie

Jeśli wrócisz i spojrzysz na funkcjonalność aplikacji, dowiesz się, że wynik operacji modulo wydaje się niepoprawny po kliknięciu przycisku „Oblicz”. Dlatego musisz umieścić punkt przerwania przed wydarzeniem kliknięcia.

Punkty przerwania słuchacza zdarzeń pomagają znaleźć konkretne zdarzenie, które chcesz zaprzestać, rozszerzając odpowiednią grupę, jak pokazano poniżej. Jak wyraźnie pokazuje obraz, sprawdzając kliknij skrzynkę, zatrzyma wykonanie wszędzie tam, gdzie występuje zdarzenie detektora kliknięcia.

Wejdź w swój kod

Poniższy obraz ilustruje, że jeśli chcesz zatrzymać wykonanie określonego wiersza E.G. Mówimy wiersz 21, a następnie klikniemy i będziemy obserwować niebieski znacznik na tej konkretnej linii, która upewnia się, że wykonanie automatycznie zatrzyma się, gdy osiągnie wiersz 21.

Wykrywanie przyczyny błędu

Gdy umieszczamy punkt przerwania w wierszu 21, co oznacza, że ​​kod zawsze zatrzymuje. Gdy kod jest zatrzymany na określonej linii, panel zakresu określa jego zmienne lokalne i globalne.

Jak widać na poniższym zdjęciu, obie wartości nie są liczbami całkowitych. Są one zamknięte w cytatach, jak widać na poniższym zdjęciu, a także wartość modów wydaje się podejrzana. Wreszcie źródło błędu jest wykrywane.

Naprawa błędów

Teraz możesz zmodyfikować kod i ponownie go przetestować. Kliknij ikonę CV, jak pokazano po prawej stronie ekranu okna. Teraz wymień wiersz 20 na linię wymienioną poniżej i zapisz zmiany.

var mod = parseint (wartość1) % parseint (wartość2);

Następnie dezaktywuj punkty przerwania i przetestuj kod z różnymi wartościami, aby sprawdzić prawidłowe wyniki.

Wyjście 24%9 jest następujące:

Wyjście 5%3 jest następujące:

Wniosek

JavaScript jest najpopularniejszym językiem, a jego potrzeba rośnie z dnia na dzień. Niemal wszędzie używane jest JavaScript. W tym artykule wyjaśniliśmy debugowanie kodu JavaScript w Chrome. Następnie omówiliśmy każdy krok szczegółowo. Przykładowe zdjęcia są również podane dla każdego kroku, aby pomóc Ci zrozumieć.