In diesem Tutorial lernen Sie anhand von Beispielen das Debuggen in JavaScript.
Beim Schreiben von Programmen können und werden Fehler auftreten. Fehler sind nicht unbedingt schlecht. Tatsächlich helfen sie uns meistens dabei, Probleme mit unserem Code zu identifizieren. Es ist wichtig, dass Sie wissen, wie Sie Ihren Code debuggen und Fehler beheben.
Beim Debuggen wird das Programm untersucht, der Fehler gefunden und behoben.
Es gibt verschiedene Möglichkeiten, wie Sie Ihr JavaScript-Programm debuggen können.
1. Verwenden von console.log ()
Sie können die console.log()Methode verwenden, um den Code zu debuggen. Sie können den Wert, den Sie einchecken möchten, an die console.log()Methode übergeben und überprüfen, ob die Daten korrekt sind.
Die Syntax lautet:
console.log(object/message);
Sie können das Objekt console.log()oder einfach eine Nachrichtenzeichenfolge übergeben.
Im vorherigen Tutorial haben wir die console.log()Methode zum Drucken der Ausgabe verwendet. Sie können diese Methode jedoch auch zum Debuggen verwenden. Beispielsweise,
let a = 5; let b = 'asdf'; let c = a + b; // if you want to see the value of c console.log(c); // then do other operations if(c) ( // do something )
Die Verwendung der console.log()Methode im Browser öffnet den Wert im Debugger-Fenster.
Funktionieren der Methode console.log () im Browser
Das console.log()ist nicht spezifisch für Browser. Es ist auch in anderen JavaScript-Engines verfügbar.
2. Debugger verwenden
Das debuggerSchlüsselwort stoppt die Ausführung des Codes und ruft die Debugging-Funktion auf.
Das debuggerist in fast allen JavaScript-Engines verfügbar.
Sehen wir uns ein Beispiel an:
let a = 6; let b = 9; let c = a * b; // stops the execution debugger; console.log(c);
Mal sehen, wie Sie den Debugger in einem Chrome-Browser verwenden können.
Funktionieren des Debuggers im Browser
Das obige Programm unterbricht die Ausführung des Programms in der Zeile, die das enthält debugger.
Sie können dann die Flusskontrolle fortsetzen, nachdem Sie das Programm überprüft haben.
Der Rest des Codes wird ausgeführt, wenn Sie das Skript durch Drücken von Play in der Konsole fortsetzen.
Funktionieren des Debuggers im Browser
3. Haltepunkte setzen
Sie können Haltepunkte für JavaScript-Code im Debugger-Fenster festlegen.
JavaScript wird an jedem Haltepunkt nicht mehr ausgeführt und Sie können die Werte überprüfen. Anschließend können Sie die Ausführung des Codes fortsetzen.
Sehen wir uns ein Beispiel an, indem Sie im Chrome-Browser einen Haltepunkt festlegen.
Arbeiten von Haltepunkten im Browser
Sie können Haltepunkte über das Entwicklertool an einer beliebigen Stelle im Code festlegen.
Das Festlegen von Haltepunkten ähnelt dem Einfügen eines Debuggers in den Code. Hier setzen Sie einfach Haltepunkte, indem Sie auf die Zeilennummer des Quellcodes klicken, anstatt die Debugger-Funktion manuell aufzurufen.
Bei den oben genannten Methoden haben wir den Chrome-Browser verwendet, um die Debugging-Prozesse der Einfachheit halber anzuzeigen. Dies ist jedoch nicht Ihre einzige Option.
Alle guten IDEs bieten Ihnen die Möglichkeit, den Code zu debuggen. Der Debugging-Prozess mag etwas anders sein, aber das Konzept hinter dem Debugging ist das gleiche.
