Debugowanie kodu JavaScript

Bez względu na to, ile jesteś doświadczonym programistą, napotkasz błędy. To tylko ludzka natura, aby popełniać błędy. Czasami popełniamy błąd składni lub jakiś błąd logiczny. Bez względu na błąd, chcesz go naprawić jak najszybciej.

Debugowanie Czy ten proces znajdowania błędów i naprawy ich podczas badania kodu lub programu. Chociaż mówi się, że JavaScript jest trudny do debugowania, ułatwimy twoje życie. Dzisiaj w tym artykule porozmawiamy o tym, jak debugować kod JavaScript.

JavaScript Debugger

Wszystkie nowoczesne przeglądarki mają wbudowanych debuggerów JavaScript. Ci debugery pomagają nam, pokazując te błędy. Ci debugery mogą być również włączone lub wyłączone w zależności od naszych potrzeb.

Interesującą rzeczą w tych debuggerach jest to, że dzięki temu możemy również ustawić punkty przerwania. Punkty przerwania są umieszczone w naszym kodzie, w którym zatrzymujemy wykonywanie kodu. Po zatrzymaniu kodu możemy sprawdzić błędy i zbadać zmienne.

Ponieważ Google Chrome jest bardzo znaną przeglądarką, użyjemy Chrome do większości części tego artykułu. Jednak ostatecznie pokażemy, jak włączyć debugowanie JavaScript w innych przeglądarkach.

Aby rozpocząć debugowanie w Google Chrome, naciśnij F12 klucz. Możemy również nacisnąć Ctrl+Shift+I otworzyć debuggera. Jednak nawet jeśli te dwa nie działają, spróbuj kliknąć prawym przyciskiem myszy z myszy w dowolnym miejscu w oknie zakładki przeglądarki. Kliknij sprawdzać A potem przejdź do konsoli.

Za pomocą konsoli.Metoda log ()

Google Chrome obsługuje debugowanie Dlatego możemy użyć konsola.dziennik() w naszym kodzie JavaScript, aby wyświetlić go w naszym oknie konsoli.

Przykład

const str = "Let's Debug in Console";
// Zobaczmy to w oknie konsoli
konsola.log (str);

Teraz, gdy klikniemy F12 i przejdziemy do naszej konsoli, zobaczymy:

Jak ustawić punkty przerwania

Możemy również ustawić punkty przerwania w oknie debuggera. Jak wspomniano wcześniej, z każdym ustawionym punktem przerwania, wykonywanie kodu zatrzyma się. Następnie zbadamy nasz kod i znajdziemy błąd. Jeśli nie znaleźliśmy błędu w tym punkcie przerwania, dodamy kolejny punkt przerwania. Jest to bardzo łatwe, ponieważ możemy kontynuować kod wykonania za pomocą przycisku kliknięcia (normalnie przycisk odtwarzania).

Załóżmy, że mamy przycisk. Za każdym razem, gdy klikamy przycisk, dodaje wartość do poprzedniej wartości. Wartość domyślna wynosi 0. Teraz, jeśli chcemy to debugować za pomocą punktu przerwania, musimy ustawić punkt przerwania. Jeśli wartość licznika nie rośnie przy kliknięciu, wiemy, że problem dotyczy kliknięcia słuchacza zdarzenia.

Aby umieścić punkt przerwania na słuchaczu zdarzeń, kliknij F12. To skieruje Cię do okna konsoli. Po stronie konsoli kliknij kartę źródeł, a następnie przejdź do punktu przerwania dla słuchaczy zdarzeń. W tym kliknij zdarzenia myszy, a następnie zaznacz opcję kliknięcia.

Gratulacje, które ustaliłeś swój pierwszy punkt przerwania. Za każdym razem, gdy wykonasz program, zatrzyma się on na wydarzeniu kliknięcia Hartera Myse Event Click. Możemy to wznowić, klikając przycisk CV u góry karty źródeł.

HTML:

0

JavaScript:

const btn = dokument.getElementById („vanish-btn”);
Niech wartość = 1;
Btn.addEventListener („kliknij”, funkcja ()
Btn.innerHtml = wartość ++;
)

Za pomocą słów kluczowych Debuggera

Jest taki sam, jak wyjaśniony wcześniej punkt przerwania. Używamy słowa kluczowego debuggera, gdy tylko chcemy debugować kod. Słowa kluczowe debuggera zasadniczo zatrzymują przepływ wykonywania kodu, podobnie jak punkt przerwania. Po zatrzymaniu wykonania wywołuje wbudowaną funkcję debugowania. Ta funkcja debuggera działa tak samo jak punkt przerwania.

Załóżmy, że chcemy dodać dwie zmienne. Jednak przed wyświetleniem ich jako alarm, chcę je debugować. Poniższy kod zapewni rozwiązanie tego:

Niech Num1 = 5;
Niech Num2 = 10;
debugger;
alert (NUM1+NUM2);

Słowo kluczowe debuggera wymusza punkt przerwania lub zatrzymuje wykonywanie kodu i wywołuje funkcję debugowania. Jeśli wymagane jest jakiekolwiek debugowanie, wywoływana jest funkcja debuggera; W przeciwnym razie nic nie jest zrobione.

Debugowanie w różnych przeglądarkach

Powszechną praktyką do rozpoczęcia debugowania w JavaScript jest kliknięcie sprawdzać lub naciśnięcie klawisza F12 w przeglądarce. Jeśli jednak to nie działa, postępuj zgodnie z poniższymi poleceniami, aby otworzyć menu debuggera.

Google Chrome

• Kliknij przycisk menu w prawym górnym rogu Google Chrome
• Kliknij więcej narzędzi
• Kliknij narzędzia programistów
• Wybierz konsolę lub źródła zgodnie z potrzebami

Mozilla Firefox

• Po otwarciu przeglądarki kliknij menu
• Następnie kliknij programistę stron internetowych
• Kliknij konsolę internetową

Microsoft Edge

• Po otwarciu przeglądarki wybierz narzędzia programistów z menu
• Następnie wybierz konsolę

Opera

• Otwórz przeglądarkę
• Wybierz menu, a następnie Wybierz programistę
• Teraz wybierz narzędzia programistów
• Następnie kliknij konsolę

Safari

• Przejdź do menu głównego i kliknij Preferencje Safari
• Kliknij opcję Advanced
• Na pasku menu Wybierz Włącz Pokaż Menu Opracuj.
• Gdy opracowanie jest widoczne w menu Kliknij Pokaż konsolę błędu.

Wniosek

Istnieje wiele metod debugowania dostępnych w JavaScript. Wyjaśniliśmy najczęściej stosowane/wspólne i łatwe metody debugowania naszego kodu JavaScript. Po rozwijaniu w JavaScript będziesz musiał debugować wielokrotnie. Proponuję zapisać ten artykuł jako zakładkę w swojej przeglądarce, abyś nie musiał szukać wielokrotnie.