In diesem Artikel werden wir erklären, wie JavaScript mit Devtools schrittweise in Chrome debuggen. Wenn Sie Ihren JavaScript -Code in Chrome debuggen möchten, müssen Sie diese Schritte befolgen, wie unten erwähnt.

Projektübersicht

Ich werde ein Beispiel dafür demonstrieren, wie Javascript -Code in Chrome debuggen. In diesem Schritt werde ich eine grundlegende Beschreibung des Codes geben. In diesem Projekt geht es um den Computermodulo -Betrieb zwischen zwei Zahlen. In diesem Beispiel können Sie den Wert von Dividenden und Divisor bestehen. Anschließend dauert es eine Minute, um den Mod zwischen zwei Zahlen zu berechnen, und gibt Ihnen die Ausgabe eine Minute, um Mod zu berechnen. Die Syntax des Modulo -Betriebs lautet wie folgt:

x mod y = r

Wobei x = Dividende, y = Divisor und r = Rest

In diesem Projekt gibt es zwei Dateien, .html und .JS -Datei. Die JavaScript -Datei enthält 5 Funktionen, um den Mod von zwei Zahlen zu berechnen:

1. Klicken Sie auf Handler: Es gibt eine Warnmeldung, wenn eine oder beide Eingabefelder leer sind
2. Eingänge sind leer (): Diese Funktion wird verwendet, um zu überprüfen, ob die Eingabefelder leer sind oder nicht
3. updatelabel (): Diese Funktion wird verwendet, um den Mod von zwei Zahlen zu berechnen
4. GetNumber1 (): Wird verwendet, um den Wert der ersten Zahl zu erhalten
5. GetNumber2 (): Wird verwendet, um den Wert der zweiten Zahl zu erhalten

Der JavaScript -Code ist unten dargestellt:

Funktion onclick ()
if (InputSareEmpty ())
Etikett.textContent = 'alarm: Sie müssen Zahlen in beide Felder eingeben.';
zurückkehren;

updatelabel ();

Funktion InputSareEmpty ()
if (getnum1 () === "|| getNum2 () ===")
zurückkehren;
anders
falsch zurückgeben;


Funktion updatelabel ()
var value1 = getnum1 ();
var value2 = getnum2 ();
var mod = "value1" % "value2"
Etikett.textContent = value1 + ' %' + value2 + '=' + mod;

Funktion getNum1 ()
Rückgabeeingänge [0].Wert;

Funktion getNum2 ()
Rückgabeeingänge [1].Wert;

Der HTML -Dateicode ist unten dargestellt:

Berechnen Sie den Mod zwischen zwei Zahlen

Geben Sie den Wert der Dividende ein

Geben Sie den Wert des Divisors ein

Berechnen Sie Mod (%)

Ausgabe des Projekts:

Fehlererkennung

Der traurige Teil ist, wann immer wir diesen Code ausführen, er würde Ihnen einige Fehler zeigen. Wie Sie im folgenden Beispiel eindeutig beobachten können, ist die Ausgabe, wenn wir die Werte einfügen, und definiert anstelle eines tatsächlichen Ergebniss. Jetzt müssen wir jetzt die ursprüngliche Ursache des Fehlers erkennen, der später kurz im selben Artikel erklärt wird.

Beispiel

In diesem Beispiel werden wir Werte übergeben, die die undefinierte Ausgabe ergeben, wie im Bild unten gezeigt.

Jetzt müssen wir diesen Fehler schnell beheben. In diesem Schritt ist unser Hauptziel, die Quelle von Fehler zu erkennen. Für die schnelle Erkennung des Fehlers sollten Sie den JavaScript -Code in Chrome debuggen.

Dazu müssen Sie die Anwendung auf Chrome ausführen, und dann müssen Sie Devtool öffnen, indem Sie die kurzen Schlüssel drücken Strg+Verschiebung+i. Nach dem Öffnen des Devtool können Sie den unten gezeigten Bildschirm sehen. Neben vielen von Devtool ausgeführten Aufgaben kann es auch Anfragen überwachen, CSS ändern.

Entwickler -Toolüberblick

Sie können Ihren JavaScript -Code auf der Registerkarte Quellpanel debuggen. Es hat 3 Teile, wie unten gezeigt:

1. Datei Navigator -Seite: Anfragen jeder Datei können auf dieser Registerkarte aufgeführt werden.
2. Code Editor: Es zeigt den Dateiinhalt an
3. JavaScript -Debugging -Bereich: Wird verwendet, um JavaScript zu inspizieren

Code -Debugging

Der einfachste Weg, um einen Fehler in Ihrem Code zu debuggen, besteht darin, dass Sie die einfügen müssen Konsole.Protokoll() Funktionieren Sie in Ihrem Code zum gleichzeitigen Überprüfen von Werten.

Funktion updatelabel ()
var value1 = getnum1 ();
Konsole.log ('value1:', value1);
var value2 = getnum2 ();
Konsole.log ('value2:', value2);
var mod = parseInt (value1) % parseInt (value2);
Konsole.log ('Ergebnis:', mod);
Etikett.textContent = value1 + ' %' + value2 + '=' + mod;

Obwohl die Konsole.Protokoll() Die Funktion kann eine gute Option zum Erkennen der Fehler sein, aber Haltepunkte können eine effektiver. Darüber hinaus ist ein Haltepunkt besser als Konsole.log (), weil die Arbeit mit Konsole arbeitet.log () Sie müssen viele Schritte beobachten, die manuell durchgeführt werden müssen, um Werte im Konsolenfenster anzuzeigen, während Breakpoints es einfacher machen, indem sie direkt arbeiten.

Einfügen von Haltepunkten in Code

Falls Sie zurückkommen und sich die Funktionalität der Anwendung ansehen, werden Sie wissen, dass das Ergebnis der Modulo -Operation nach dem Klicken auf die Schaltfläche „Berechnen“ anscheinend falsch ist. Daher müssen Sie vor dem Klickereignis einen Haltepunkt einstellen.

Die Haltepunkte des Event -Hörers helfen Ihnen, das spezifische Ereignis zu finden, das Sie einstellen möchten, indem Sie die entsprechende Gruppe wie unten gezeigt erweitern. Wie das Bild deutlich zeigt, wird durch Überprüfen des Click-Box die Ausführung überall dort stoppt, wo das Click-Listener-Ereignis vorhanden ist.

Treten Sie in Ihren Code ein

Das folgende Bild zeigt, dass, wenn Sie die Ausführung einer bestimmten Zeile e stoppen möchten.G. Wir sagen Zeile 21, dann klicken wir darauf und beobachten einen blauen Marker in dieser spezifischen Zeile, die sicherstellt, dass die Ausführung automatisch aufhört, wenn sie Zeile 21 erreicht.

Erkennen der Ursache eines Fehlers

Wenn wir einen Haltepunkt in Zeile 21 einstellen, bedeutet der Code immer in der Pause, wenn die Ausführung des Codes diese Zeile erreicht. Wenn der Code in einer bestimmten Zeile unterbrochen wird, gibt das Scope -Panel seine lokalen und globalen Variablen an.

Wie Sie im Bild unten sehen, sind beide Werte keine Ganzzahlen. Sie sind in Anführungszeichen eingeschlossen, wie Sie im Bild unten sehen, und der Modwert erscheint auch misstrauisch. Schließlich wird die Quelle des Fehlers erkannt.

Bugfixing

Jetzt können Sie den Code ändern und erneut testen. Klicken Sie auf das Lebenslaufsymbol wie rechts auf dem Fensterbildschirm angezeigt. Ersetzen Sie nun Zeile 20 durch die unten erwähnte Linie und speichern Sie die Änderungen.

var mod = parseInt (value1) % parseInt (value2);

Deaktivieren Sie dann die Haltepunkte und testen Sie den Code mit unterschiedlichen Werten, um die richtigen Ergebnisse zu überprüfen.

Die Ausgabe von 24%9 ist wie folgt:

Der Ausgang von 5%3 ist wie folgt:

Abschluss

JavaScript ist die beliebteste Sprache und sein Bedürfnis nimmt von Tag zu Tag zu. Fast überall wird JavaScript verwendet. In diesem Artikel haben wir das Debuggen des JavaScript -Code in Chrome erklärt. Anschließend haben wir jeden Schritt eingehend besprochen. Beispielbilder werden auch für jeden Schritt bereitgestellt, um Ihnen beim Verständnis zu helfen.