JavaScript -Debugging
Fehler können (werden) jedes Mal passieren, wenn Sie neuen Computercode schreiben.
Code-Debugging
Programmiercode kann Syntaxfehler oder logische Fehler enthalten.
Viele dieser Fehler sind schwer zu diagnostizieren.
Wenn Programmiercode Fehler enthält, passiert oft nichts. Es gibt keine Fehlermeldungen und Sie erhalten keine Hinweise, wo Sie nach Fehlern suchen müssen.
Das Suchen (und Beheben) von Fehlern im Programmiercode wird als Code-Debugging bezeichnet.
JavaScript-Debugger
Das Debuggen ist nicht einfach. Aber glücklicherweise haben alle modernen Browser einen eingebauten JavaScript-Debugger.
Eingebaute Debugger können ein- und ausgeschaltet werden, was die Meldung von Fehlern an den Benutzer erzwingt.
Mit einem Debugger können Sie auch Haltepunkte setzen (Stellen, an denen die Codeausführung gestoppt werden kann) und Variablen untersuchen, während der Code ausgeführt wird.
Normalerweise, ansonsten befolgen Sie die Schritte unten auf dieser Seite, aktivieren Sie das Debugging in Ihrem Browser mit der Taste F12 und wählen Sie im Debugger-Menü "Konsole".
Die Methode console.log()
Wenn Ihr Browser Debugging unterstützt, können Sie console.log()mit JavaScript-Werte im Debugger-Fenster anzeigen:
Beispiel
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>
</html>
Tipp: Lesen Sie mehr über die console.log()Methode in unserer Referenz zur JavaScript-Konsole .
Haltepunkte setzen
Im Debugger-Fenster können Sie Breakpoints im JavaScript-Code setzen.
An jedem Haltepunkt wird die Ausführung von JavaScript beendet und Sie können JavaScript-Werte untersuchen.
Nachdem Sie die Werte untersucht haben, können Sie die Ausführung des Codes fortsetzen (normalerweise mit einer Wiedergabeschaltfläche).
Das Debugger-Schlüsselwort
Das debuggerSchlüsselwort stoppt die Ausführung von JavaScript und ruft (falls verfügbar) die Debugging-Funktion auf.
Dies hat die gleiche Funktion wie das Setzen eines Breakpoints im Debugger.
Wenn kein Debugging verfügbar ist, hat die Debugger-Anweisung keine Auswirkung.
Wenn der Debugger eingeschaltet ist, stoppt dieser Code die Ausführung, bevor er die dritte Zeile ausführt.
Beispiel
let x = 15 * 5;
debugger;
document.getElementById("demo").innerHTML = x;
Debugging-Tools der wichtigsten Browser
Normalerweise aktivieren Sie das Debugging in Ihrem Browser mit F12 und wählen im Debugger-Menü "Console".
Andernfalls befolgen Sie diese Schritte:
Chrom
- Öffnen Sie den Browser.
- Wählen Sie im Menü „Weitere Tools“ aus.
- Wählen Sie unter Tools „Entwicklertools“ aus.
- Wählen Sie abschließend Konsole aus.
Feuerfuchs
- Öffnen Sie den Browser.
- Wählen Sie im Menü „Webentwickler“ aus.
- Wählen Sie abschließend „Web Console“ aus.
Kante
- Öffnen Sie den Browser.
- Wählen Sie im Menü „Entwicklertools“ aus.
- Wählen Sie abschließend „Konsole“ aus.
Oper
- Öffnen Sie den Browser.
- Wählen Sie im Menü „Entwickler“ aus.
- Wählen Sie unter „Entwickler“ „Entwicklertools“ aus.
- Wählen Sie abschließend „Konsole“ aus.
Safari
- Gehen Sie im Hauptmenü zu Safari, Einstellungen, Erweitert.
- Aktivieren Sie „Menü „Entwicklung“ in der Menüleiste anzeigen“ aktivieren.
- Wenn die neue Option „Entwickeln“ im Menü erscheint:
Wählen Sie „Fehlerkonsole anzeigen“.
Wussten Sie?
Debugging ist der Prozess des Testens, Findens und Reduzierens von Fehlern (Fehlern) in Computerprogrammen.
Der erste bekannte Computerfehler war ein echter Fehler (ein Insekt), der in der Elektronik steckte.