JavaScript-Debugging

Fehler passieren immer, wenn Sie neue Computercode schreiben.

JavaScript-Debugging

Das Schreiben von JavaScript ohne Debugger ist schwierig.

Es könnte in Ihrem Code Syntaxfehler oder Logikfehler geben, die schwer zu diagnostizieren sind.

Normalerweise passiert nichts, wenn JavaScript-Code Fehler enthält. Es gibt keine Fehlermeldungen und keine Anweisungen, wie man den Fehler finden kann.

Normalerweise passiert ein Fehler, wenn Sie neue JavaScript-Code schreiben.

JavaScript Debugger

Fehler im Programmcode zu finden wird als Code-Debugging bezeichnet.

Debugging ist nicht einfach. Glücklicherweise haben alle modernen Browser einen integrierten Debugger.

Der integrierte Debugger kann geöffnet oder geschlossen werden und zwingt Fehlerberichte an den Benutzer weiterzuleiten.

Mit dem Debugger können Sie auch Breakpoints (Orte, an denen der Code angehalten wird) setzen und Variablen während der Ausführung des Codes überprüfen.

Normalerweise wird der Debugger im Browser über die Taste F12 gestartet und im Debugger-Menü "Console" ausgewählt.

console.log() Methode

Wenn Ihr Browser das Debugging unterstützt, können Sie console.log() Zeigen Sie den Wert von JavaScript im Debug-Fenster an:

Beispiel

<!DOCTYPE html>
<html>
<body>
<h1>Meine erste Webseite</h1>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>
</html>

Probieren Sie es selbst aus

Tipp:Besuchen Sie unser JavaScript Console Referenzhandbuch, um mehr über die Informationen der console.log() Methode zu erfahren.

Breakpoint setzen

Im Debug-Fenster können Sie Breakpoints im JavaScript-Code setzen.

An jedem Breakpoint wird JavaScript angehalten, damit Sie die Werte von JavaScript überprüfen können.

Nachdem Sie den Wert überprüft haben, können Sie die Ausführung des Codes wieder aufnehmen.

debugger Schlüsselwort

debugger Der Schlüsselwort stoppt die Ausführung von JavaScript und ruft (falls vorhanden) die Debugging-Funktion auf.

Das ist gleichbedeutend mit dem Setzen eines Breakpoints im Debugger.

Wenn der Debugger nicht verfügbar ist,debugger Der Befehl hat keine Wirkung.

Wenn der Debugger geöffnet ist, wird dieser Code vor der Ausführung des dritten Zeils angehalten.

Beispiel

var x = 15 * 5;
debugger;
document.getElementById("demo").innerHTML = x;

Probieren Sie es selbst aus

Debugging-Tools der gängigsten Browser

Normalerweise aktivieren Sie die F12-Taste im Browser, um das Debuggen zu starten, und wählen Sie im Debugger-Menü „Konsole“.

Andernfalls folgen Sie den folgenden Schritten:

Chrome

  • Öffnen Sie den Browser
  • Wählen Sie aus dem Menü die Werkzeuge
  • Wählen Sie aus den Werkzeugen die Entwicklertools
  • Letztlich wählen Sie die Konsole

Firefox Firebug

  • Öffnen Sie den Browser
  • Besuchen Sie die Webseite: http://www.getfirebug.com
  • Nachfolgend die Anweisungen: Wie installiert man Firebug

Internet Explorer

  • Öffnen Sie den Browser
  • Wählen Sie aus dem Menü die Werkzeuge
  • Wählen Sie aus den Werkzeugen die Entwicklertools
  • Letztlich wählen Sie die Konsole

Opera

  • Öffnen Sie den Browser
  • Besuchen Sie die Webseite: http://dev.opera.com
  • Nachfolgend die Anweisungen: Wie installiert man Firebug Lite

Safari Entwicklungs-Menü

  • Klicken Sie auf das Safari-Menü, Einstellungen, Erweitert.
  • Aktivieren Sie „Entwicklungsmenü in der Menüleiste aktivieren“.
  • Wählen Sie „Zeige Fehler-Konsole“ aus dem neuen Menüpunkt „Entwicklung“ im Menü.

Wissen Sie das?

Das Debuggen ist der Prozess des Testens, Findens und Reduzierens von Bugs (Fehlern) in Computerprogrammen.

Der erste bekannte Computer-Bug war ein echtes Insekt, das in einem elektronischen Gerät feststeckte (ein Insekt).