Für Menschen wie mich, die JavaScript selbst studieren und keine Erfahrung im Erlernen anderer Sprachen haben, war das Debuggen von JavaScript auch ein relativ schwieriger Punkt. Viele grundlegende Dinge müssen von sich selbst untersucht werden, und dieser Prozess ist sehr deprimierend.
Ich überlegte, ob ich die Gelegenheit nutzte, um die Bilder des oben genannten Schließungs -Blog -Beitrags mit Firebug zu demonstrieren, die als Teilen von Debugging -Erfahrungen angesehen werden können.
Der Beispielcode lautet wie folgt:
Die Codekopie lautet wie folgt:
Funktion fn () {
var max = 10;
Rückgabefunktionsleiste (x) {
if (x> max) {
console.log (x);
}
}
}
var fl = fn (),
max = 100;
FL (15);
Wählen Sie Firebug - Skript
Die Überwachungsleiste rechts können Fensterobjekte und Variablen max, fl und fn sein.
Gleichzeitig können Sie auch die Eigenschaften des Fensters unten sehen. Wenn Sie als Beispiel den Standort annehmen, können Sie das Fenster direkt ausführen. Die Ausgabe der Lokalisierung in der "Konsole" und den HREF -Attributwert des Standorts weiter ausgeben. Wenn Sie sich auf Eigenschaften und Methoden von Fensterobjekten beziehen, müssen Sie natürlich nicht das Formular "window.xxx" verwenden, sondern direkt "xxx" verwenden.
Kehren Sie wieder auf den Punkt,
Gehen Sie zurück zur Spalte "Skript", debuggen Sie JavaScript und anzeigen Sie variable Werte an, indem Sie "Breakpoints" drücken.
Es gibt mehrere Konzepte, die Sie zuerst verstehen können: Breakpoints, Schritt-für-Schritt-Eintrag, Schritt-für-Schritt-Übersprung und Schritt-für-Schritt-Beenden. Ich werde es hier nicht beschreiben.
Dieses Mal verwenden wir hauptsächlich die Methode zum Einstellen von Haltepunkten und der Schritt -für -Schritt -Eingabe.
Sie können klicken, um einen Haltepunkt an der linken Linie zu setzen, und mit der rechten Maustaste, um ein reguläres Urteil zu fällen.
Mehrere Haltepunkte können festgelegt werden und die festgelegten Haltepunkte können in der Spalte "Breakpoint" gelöscht werden.
Hier brechen Sie den Punkt direkt am Anfang des Skript -Tags und aktualisieren die Seite.
zu diesem Zeitpunkt
1. Das ursprüngliche Fensterobjekt im Überwachungsbereich rechts wird zu diesem und zeigt auf das Fenster. Ausgabe dieser Ausgabe in der "Konsole" erhält das gleiche Ergebnis wie der Ort.
2. Die globalen Variablen max und FL werden auf undefiniert initialisiert
3.. Fn () ist eine Funktionserklärung, da der Parser die Funktionserklärung zuerst liest und sie vor der Ausführung eines Codes (zugänglich) zur Verfügung stellt.
Klicken Sie in der oberen rechten Ecke auf die Schaltfläche "Einstufige Eingabetaste"
Führen Sie den Code Schritt für Schritt aus und sehen Sie dies, die Änderungen des Wertes jeder Variablen und den Stapel im Überwachungsbereich an. Sie können sich auf das empfohlene Blog beziehen.
Dann kommen Sie ein weiteres Beispiel dafür
Der Code ist wie folgt:
Die Codekopie lautet wie folgt:
var name = 'das Fenster';
var obj = {
Name: 'der Einheimische',
GetNameFunc: function () {
console.log (this.name);
return function () {
console.log (this.name);
};
}
};
var c = obj.getNamefunc ();
C();
Noch "Schritt in" können Sie sehen, dass Sie bei der Ausführung der Codezeile c () GetNameFunc eingeben, dies ändert sich vom Hinweis auf das Fensterobjekt zu OBJ und die Konsole Ausgabe "The Local".
Mit Schritt-für-Schritt-Ausführung können Sie die laufende Logik des gesamten Code sehr deutlich sehen.
Das obige ist eine Zusammenfassung der Methode zur Verwendung von Firebugs Debugging -Funktion, um JavaScript -Schließungen und diese zu verstehen. Ich hoffe es gefällt euch