JavaScript-Debugging


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


Jedes Mal, wenn Sie neuen Computercode schreiben, können (werden) Fehler passieren.


Code-Debugging

Der Programmiercode kann Syntaxfehler oder logische Fehler enthalten.

Viele dieser Fehler sind schwer zu diagnostizieren.

Wenn der Programmiercode Fehler enthält, passiert oft nichts. Es gibt Es gibt keine Fehlermeldungen und Sie erhalten keine Hinweise, wo Sie nach Fehlern suchen können.

Das Suchen (und Beheben) von Fehlern im Programmiercode wird als Code-Debugging bezeichnet.


JavaScript-Debugger

Das Debuggen ist nicht einfach. Aber glücklicherweise verfügen alle modernen Browser über eine integrierte Funktion JavaScript-Debugger.

Integrierte Debugger können ein- und ausgeschaltet werden, sodass Fehler gemeldet werden müssen der Benutzer.

Mit einem Debugger können Sie auch Haltepunkte (Orte, an denen Code ausgeführt wird) festlegen kann gestoppt werden) und Variablen untersuchen, während der Code ausgeführt wird.

Normalerweise (andernfalls folgen Sie den Schritten unten auf dieser Seite) aktivieren Sie das Debuggen in Ihrem Browser mit Drücken Sie die F12-Taste und wählen Sie im Debugger-Menü „Konsole“ aus.


Die Methode console.log()

Wenn Ihr Browser das Debuggen unterstützt, können Sie dazu console.log() verwenden 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>

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>

<p>Activate debugging in your browser (Chrome, IE, Firefox) with F12, and select "Console" in the debugger menu.</p>

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

</body>
</html> 

Tipp: Lesen Sie mehr über die Methode console.log() in unserer JavaScript-Konsolenreferenz.


Haltepunkte setzen

Im Debugger-Fenster können Sie Haltepunkte im JavaScript-Code setzen.

An jedem Haltepunkt stoppt JavaScript die Ausführung und Sie können es untersuchen JavaScript-Werte.

Nachdem Sie die Werte untersucht haben, können Sie die Ausführung des Codes fortsetzen (normalerweise mit eine Play-Taste).



Das Debugger-Schlüsselwort

Das Schlüsselwort debugger stoppt die Ausführung von JavaScript, und ruft (falls verfügbar) die Debugging-Funktion auf.

Dies hat die gleiche Funktion wie das Setzen eines Haltepunkts im Debugger.

Wenn kein Debugging verfügbar ist, hat die Debugger-Anweisung keine Auswirkung.

Wenn der Debugger aktiviert ist, wird die Ausführung dieses Codes vorher gestoppt führt die dritte Zeile aus.

Beispiel

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

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Debugger</h2>

<p id="demo"></p>

<p>With the debugger turned on, the code below should stop executing before it executes the third line.</p>

<script>
let x = 15 * 5;
debugger;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Debugging-Tools der wichtigsten Browser

Normalerweise aktivieren Sie das Debuggen in Ihrem Browser mit F12 und wählen im Debugger-Menü „Konsole“.

Andernfalls befolgen Sie diese Schritte:

Chrom

  • Öffnen Sie den Browser.

  • Wählen Sie im Menü „Weitere Tools“ aus.

  • Wählen Sie unter den 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 „Webkonsole“ aus.

Rand

  • Öffnen Sie den Browser.

  • Wählen Sie im Menü „Entwicklertools“ aus.

  • Wählen Sie abschließend „Konsole“.

Oper

  • Öffnen Sie den Browser.

  • Wählen Sie im Menü „Entwickler“ aus.

  • Wählen Sie unter „Entwickler“ die Option „Entwicklertools“ aus.

  • Wählen Sie abschließend „Konsole“.

Safari

  • Gehen Sie im Hauptmenü zu Safari, Einstellungen, Erweitert.

  • Aktivieren Sie „Entwicklermenü in der Menüleiste anzeigen aktivieren“.

  • Wenn die neue Option „Entwickeln“ im Menü erscheint:
    Wählen Sie „Fehler anzeigen“. Konsole".


Wussten Sie?

Beim Debuggen handelt es sich um den Prozess des Testens, Findens und Reduzierens von Bugs (Fehlern) in Computerprogrammen.
Der erste bekannte Computerfehler war ein echter Käfer (ein Insekt), der in der Elektronik steckte.