Debugowanie JavaScript
Błędy mogą (będą) się zdarzać za każdym razem, gdy napiszesz nowy kod komputerowy.
Debugowanie kodu
Kod programistyczny może zawierać błędy składniowe lub błędy logiczne.
Wiele z tych błędów jest trudnych do zdiagnozowania.
Często, gdy kod programowania zawiera błędy, nic się nie stanie. Nie ma komunikatów o błędach i nie otrzymasz żadnych wskazówek, gdzie szukać błędów.
Wyszukiwanie (i naprawianie) błędów w kodzie programistycznym nazywa się debugowaniem kodu.
Debugery JavaScript
Debugowanie nie jest łatwe. Ale na szczęście wszystkie nowoczesne przeglądarki mają wbudowany debuger JavaScript.
Wbudowane debuggery można włączać i wyłączać, wymuszając zgłaszanie błędów użytkownikowi.
Za pomocą debuggera można również ustawić punkty przerwania (miejsca, w których można zatrzymać wykonywanie kodu) i badać zmienne podczas wykonywania kodu.
Normalnie, w przeciwnym razie postępuj zgodnie z instrukcjami na dole tej strony, aktywuj debugowanie w przeglądarce za pomocą klawisza F12 i wybierz "Konsola" w menu debugera.
Metoda console.log()
Jeśli Twoja przeglądarka obsługuje debugowanie, możesz użyć console.log()do wyświetlenia wartości JavaScript w oknie debugera:
Przykład
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>
</html>
Wskazówka: przeczytaj więcej o tej console.log()metodzie w naszej dokumentacji dotyczącej konsoli JavaScript .
Ustawianie punktów przerwania
W oknie debuggera możesz ustawić punkty przerwania w kodzie JavaScript.
W każdym punkcie przerwania JavaScript przestanie się wykonywać i pozwoli ci sprawdzić wartości JavaScript.
Po zbadaniu wartości możesz wznowić wykonywanie kodu (zwykle za pomocą przycisku odtwarzania).
Słowo kluczowe debugera
Słowo debuggerkluczowe zatrzymuje wykonywanie JavaScript i wywołuje (jeśli jest dostępna) funkcję debugowania.
Ma to tę samą funkcję, co ustawianie punktu przerwania w debugerze.
Jeśli debugowanie nie jest dostępne, instrukcja debuggera nie ma żadnego efektu.
Gdy debugger jest włączony, ten kod przestanie się wykonywać przed wykonaniem trzeciego wiersza.
Przykład
let x = 15 * 5;
debugger;
document.getElementById("demo").innerHTML = x;
Narzędzia do debugowania głównych przeglądarek
Zwykle aktywujesz debugowanie w przeglądarce za pomocą klawisza F12 i wybierasz "Konsola" w menu debugera.
W przeciwnym razie wykonaj następujące kroki:
Chrom
- Otwórz przeglądarkę.
- Z menu wybierz „Więcej narzędzi”.
- Z narzędzi wybierz "Narzędzia programistyczne".
- Na koniec wybierz Konsola.
Firefox
- Otwórz przeglądarkę.
- Z menu wybierz "Programista WWW".
- Na koniec wybierz „Konsola internetowa”.
Krawędź
- Otwórz przeglądarkę.
- Z menu wybierz „Narzędzia programistyczne”.
- Na koniec wybierz „Konsola”.
Opera
- Otwórz przeglądarkę.
- Z menu wybierz „Programista”.
- Z „Programisty” wybierz „Narzędzia programistyczne”.
- Na koniec wybierz „Konsola”.
Safari
- Przejdź do Safari, Preferencje, Zaawansowane w menu głównym.
- Zaznacz „Włącz Pokaż menu rozwijania na pasku menu”.
- Gdy w menu pojawi się nowa opcja „Rozwój”:
Wybierz „Pokaż konsolę błędów”.
Czy wiedziałeś?
Debugowanie to proces testowania, znajdowania i redukowania błędów (błędów) w programach komputerowych.
Pierwszym znanym błędem komputerowym był prawdziwy błąd (owad) tkwiący w elektronice.