Debugging JavaScript -Code
Debuggen Ist dieser Prozess des Findens von Fehlern und der Behebung, wenn Sie Ihren Code oder Ihr Programm untersuchen. Während JavaScript als schwierig zu debuggen soll, werden wir Ihr Leben leicht machen. In diesem Artikel werden wir heute darüber sprechen, wie der JavaScript -Code debuggen.
JavaScript -Debugger
Alle modernen Browser haben eingebaute JavaScript-Debugger. Diese Debugger unterstützen uns, indem wir diese Fehler zeigen. Diese Debugger können je nach unseren Bedürfnissen auch ein- oder ausgeschaltet werden.
Das Interessante an diesen Debuggen ist, dass wir damit auch Haltepunkte setzen können. Breakpoints werden in unserem Code platziert, wo wir die Ausführung des Codes stoppen. Wenn der Code gestoppt wird, können wir nach den Fehlern überprüfen und die Variablen untersuchen.
Da Google Chrome ein sehr berühmter Browser ist, werden wir Chrome für die meisten Teile dieses Artikels verwenden. Am Ende zeigen wir Ihnen jedoch, wie Sie JavaScript -Debugging auch in anderen Browsern ermöglichen können.
Um mit dem Debuggen in Google Chrome zu beginnen, drücken Sie die F12 Taste. Wir können auch drücken Strg+Verschiebung+i den Debugger zu öffnen. Selbst wenn diese beiden nicht funktionieren, klicken Sie mit der rechten Maustast. Klicke auf prüfen Und danach gehen Sie zur Konsole.
Konsole verwenden.log () Methode
Google Chrome unterstützt Debugging, daher können wir verwenden Konsole.Protokoll() In unserem JavaScript -Code, um ihn in unserem Konsolenfenster anzuzeigen.
Beispiel
const str = "Lassen Sie uns in der Konsole debuggen";// Lassen Sie uns dies im Konsolenfenster anzeigen
Konsole.log (str);
Wenn wir nun auf F12 klicken und zu unserer Konsole gehen, werden wir sehen:
So setzen Sie Bruchpunkte
Wir können auch Haltepunkte im Debugger -Fenster festlegen. Wie bereits erwähnt, wird die Codeausführung bei jedem von uns festgelegten Haltepunkt aufhören. Wir werden dann unseren Code untersuchen und den Fehler finden. Wenn wir den Fehler in diesem Haltepunkt nicht gefunden haben, werden wir einen weiteren Haltepunkt hinzufügen. Es ist sehr einfach, da wir den Ausführungscode mit nur einer Klick -Schaltfläche fortsetzen können (normalerweise mit der Schaltfläche Wiedergabe).
Angenommen, wir haben einen Knopf. Jedes Mal, wenn wir auf die Schaltfläche klicken, fügt es dem vorherigen Wert einen Wert hinzu. Der Standardwert beträgt 0. Wenn wir dies mit dem Breakpoint debuggen wollen, müssen wir einen Haltepunkt festlegen. Wenn der Zählerwert mit dem Klick nicht zunimmt.
Klicken Sie auf den Ereignishörer, um einen Haltepunkt aufzunehmen F12. Dies führt Sie zum Konsolenfenster. Klicken Sie auf der Seite der Konsole auf die Registerkarte Quellen und fahren Sie dann mit dem Haltepunkt für Ereignishörer fort. In diesem Klick auf die Mausereignisse und dann die Klickoption ankreuzen.
Herzlichen Glückwunsch, Sie haben Ihren ersten Haltepunkt festgelegt. Immer wenn Sie das Programm ausführen, wird es beim Mausereignis -Listener -Klick -Event eingestellt. Wir können es wieder aufnehmen, indem wir auf die Schaltfläche Lebenslauf oben auf der Registerkarte Quellen klicken.
HTML:
JavaScript:
const btn = dokument.GetElementById ("Vanish-Btn");Sei Wert = 1;
Btn.AddEventListener ("Click", function ()
Btn.Innerhtml = Wert ++;
)
Verwenden von Debugger -Schlüsselwort
Es ist dasselbe wie der zuvor erläuterte Haltepunkt, außer dass er über JavaScript -Code und nicht manuell durchgeführt wird. Wir verwenden das Debugger -Schlüsselwort, wenn wir einen Code debuggen möchten. Debugger -Schlüsselwörter stoppen im Grunde genommen den Durchführung des Codes wie ein Haltepunkt. Nachdem die Ausführung gestoppt wurde, ruft sie die integrierte Debugging-Funktion auf. Diese Debugger -Funktion funktioniert genauso wie ein Haltepunkt.
Angenommen, wir möchten zwei Variablen hinzufügen. Bevor ich sie jedoch als Alarm anzeige, möchte ich sie debuggen. Der folgende Code bietet die Lösung dafür:
sei num1 = 5;sei num2 = 10;
Debugger;
Alarm (Num1+Num2);
Das Debugger -Schlüsselwort erzwingt einen Haltepunkt oder stoppt die Ausführung des Codes und ruft die Debugging -Funktion auf. Wenn Debugging erforderlich ist, wird die Debugger -Funktion aufgerufen. Ansonsten wird nichts getan.
Debuggen in verschiedenen Browsern
Die übliche Praxis, um in JavaScript zu debuggen prüfen oder drücken Sie die F12 -Taste in Ihrem Browser. Wenn das jedoch nicht funktioniert, folgen Sie den folgenden Befehlen, um das Debugger -Menü zu öffnen.
Google Chrome
- Klicken Sie in der oberen rechten Ecke von Google Chrome auf die Menüschaltfläche
- Klicken Sie auf weitere Tools
- Klicken Sie auf Entwickler -Tools
- Wählen Sie Konsole oder Quellen nach Ihren Bedürfnissen aus
Mozilla Firefox
- Wenn Sie den Browser öffnen, klicken Sie auf das Menü
- Danach klicken Sie auf Webentwickler
- Klicken Sie auf die Webkonsole
Microsoft Edge
- Wenn Sie den Browser öffnen, wählen Sie im Menü Entwickler -Tools aus
- Wählen Sie dann eine Konsole
Oper
- Browser öffnen
- Menü auswählen und dann den Entwickler auswählen
- Wählen Sie nun Entwicklertools aus
- Klicken Sie dann auf die Konsole
Safari
- Gehen Sie zum Hauptmenü und klicken Sie auf Safari -Einstellungen
- Klicken Sie auf die erweiterte Option
- Wählen Sie in der Menüleiste das Menü "Entwickeln Sie das Menü anzeigen".
- Wenn sich die Entwicklung im Menü anzeigen, klicken Sie auf Fehlerkonsole anzeigen.
Abschluss
In JavaScript sind viele Debugging -Methoden verfügbar. Wir haben die verwendeten/häufigsten und einfachen Methoden erklärt, um unseren JavaScript -Code zu debuggen. Mit der Entwicklung in JavaScript müssen Sie immer wieder debuggen. Ich schlage vor, Sie speichern diesen Artikel als Lesezeichen in Ihrem Browser, damit Sie nicht immer wieder suchen müssen.