JavaScript Debugging

Wenn man JavaScript schreibt, kann es mühsam sein, wenn keine Debugging-Tools vorhanden sind.

JavaScript-Debugging

Ohne Debugging-Tools ist es schwierig, JavaScript-Programme zu schreiben.

Ihr Code kann Syntaxfehler und logische Fehler enthalten; ohne Debugging-Tools sind diese Fehler schwer zu finden.

Normalerweise gibt es bei JavaScript-Fehlern keine Meldungen, daher kann man die Position des Fehlers im Code nicht lokalisieren.

Note Oft treten Fehler auf, während du einen neuen JavaScript-Code schreibst.

JavaScript-Debugging-Tools

Das Auffinden von Fehlern im Programmcode nennt man Code-Debugging.

Debugging ist schwierig, aber zum Glück verfügen viele Browser über integrierte Debugging-Tools.

Integrierte Debugging-Tools können ein- oder ausgeschaltet werden, und schwerwiegende Fehlermeldungen werden an den Benutzer gesendet.

Mit Debugging-Tools können wir Haltepunkte setzen (Positionen, an denen die Codeausführung stoppt), und Variablen während der Ausführung des Codes überwachen.

Um Debugging-Tools in einem Browser zu aktivieren, drückt man im Allgemeinen die F12-Taste und wählt im Debug-Menü „Console“ aus.

console.log()-Methode

Wenn der Browser Debugging unterstützt, kannst du die Methode console.log() verwenden, um JavaScript-Werte im Debug-Fenster auszugeben:

Beispiel

a = 5; b = 6; c = a + b; console.log(c);

Selbst ausprobieren »

Haltepunkte setzen

Im Debug-Fenster kannst du Haltepunkte im JavaScript-Code setzen.

An jedem Haltepunkt wird die Ausführung des JavaScript-Codes angehalten, sodass wir die Werte von JavaScript-Variablen überprüfen können.

Nach der Überprüfung können Sie die Codeausführung fortsetzen (z. B. mit der Wiedergabetaste).

debugger-Schlüsselwort

debuggerDas Schlüsselwort wird verwendet, um die JavaScript-Ausführung zu stoppen und die Debugging-Funktion aufzurufen.

Dieses Schlüsselwort hat denselben Effekt wie das Setzen eines Haltepunkts in den Debugging-Tools.

Wenn kein Debugging verfügbar ist, funktioniert die debugger-Anweisung nicht.

Wenn der debugger aktiviert ist, stoppt der Code die Ausführung vor der dritten Zeile.

Beispiel

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

Selbst ausprobieren »

Debugging-Tools in wichtigen Browsern

Normalerweise aktivieren Sie die Debugging-Tools in einem Browser, indem Sie die Taste F12 drücken und im Debug-Menü "Konsole" auswählen.

Die Schritte für jeden Browser sind wie folgt:

Chrome-Browser

  • Öffnen Sie den Browser.
  • Wählen Sie im Menü"Weitere Tools" aus.。
  • Wählen Sie in"Weitere Tools"dann"Entwicklerwerkzeuge" aus.。
  • Wählen Sie schließlich Konsole aus.

Oder Sie können mit der rechten Maustaste klicken und"Untersuchen"auswählen, wie in der Abbildung unten gezeigt:

Firefox-Browser

  • Öffnen Sie den Browser.
  • Klicken Sie mit der rechten Maustaste und wählen Sie"Element untersuchen" aus.。

Safari

  • Öffnen Sie den Browser.
  • Klicken Sie mit der rechten Maustaste und wählen Sie Element untersuchen aus.
  • Wählen Sie in dem Fenster, das unten erscheint, "Konsole" aus.

Internet Explorer-Browser.

  • Öffnen Sie den Browser.
  • Wählen Sie im Menü Extras aus.
  • Wählen Sie unter Extras Entwicklertools aus.
  • Wählen Sie schließlich Konsole aus.

Opera

  • Öffnen Sie den Browser.
  • Klicken Sie auf die obere linke Ecke und wählen Sie"Entwicklerwerkzeuge", wählen Sie"Web-Inspektor" aus.。

Ein einfacherer Weg ist: Rechtsklick und wählen Sie"Inspect Element"

Andere Erweiterungen