Bevor wir komplexeren Code schreiben, sprechen wir über das Debuggen.
Beim Debuggen handelt es sich um den Prozess, Fehler innerhalb eines Skripts zu finden und zu beheben. Alle modernen Browser und die meisten anderen Umgebungen unterstützen Debugging-Tools – eine spezielle Benutzeroberfläche in Entwicklertools, die das Debuggen erheblich vereinfacht. Es ermöglicht auch, den Code Schritt für Schritt zu verfolgen, um zu sehen, was genau vor sich geht.
Wir werden hier Chrome verwenden, da es über genügend Funktionen verfügt, die meisten anderen Browser haben einen ähnlichen Prozess.
Ihre Chrome-Version sieht vielleicht etwas anders aus, aber es sollte trotzdem klar sein, was da ist.
Öffnen Sie die Beispielseite in Chrome.
Aktivieren Sie die Entwicklertools mit F12 (Mac: Cmd + Opt + I ).
Wählen Sie das Bedienfeld Sources aus.
Folgendes sollten Sie sehen, wenn Sie es zum ersten Mal tun:
Die Umschalttaste öffnet die Registerkarte mit Dateien.
Klicken wir darauf und wählen Sie hello.js in der Baumansicht aus. Folgendes sollte angezeigt werden:
Das Quellenfenster besteht aus drei Teilen:
Im Bereich „Dateinavigator“ werden HTML-, JavaScript-, CSS- und andere Dateien aufgelistet, einschließlich der an die Seite angehängten Bilder. Möglicherweise werden hier auch Chrome-Erweiterungen angezeigt.
Im Code-Editor- Bereich wird der Quellcode angezeigt.
Der Bereich „JavaScript-Debugging“ dient dem Debuggen. Wir werden ihn bald erkunden.
Jetzt können Sie auf denselben Umschalter klicken erneut, um die Ressourcenliste auszublenden und dem Code etwas Platz zu geben.
Wenn wir Esc drücken, öffnet sich unten eine Konsole. Wir können dort Befehle eingeben und zum Ausführen die Eingabetaste drücken.
Nachdem eine Anweisung ausgeführt wurde, wird ihr Ergebnis unten angezeigt.
Hier ergibt beispielsweise 1+2 3 , während der Funktionsaufruf hello("debugger") nichts zurückgibt, sodass das Ergebnis undefined ist:
Sehen wir uns an, was im Code der Beispielseite vor sich geht. Klicken Sie in hello.js auf Zeile Nummer 4 . Ja, direkt an der 4 Stelle, nicht am Code.
Glückwunsch! Sie haben einen Haltepunkt festgelegt. Bitte klicken Sie auch auf die Nummer für Zeile 8 .
Es sollte so aussehen (blau ist die Stelle, auf die Sie klicken sollten):
Ein Haltepunkt ist ein Punkt im Code, an dem der Debugger die JavaScript-Ausführung automatisch anhält.
Während der Code angehalten ist, können wir aktuelle Variablen untersuchen, Befehle in der Konsole ausführen usw. Mit anderen Worten, wir können ihn debuggen.
Im rechten Bereich finden Sie immer eine Liste der Haltepunkte. Das ist nützlich, wenn wir viele Haltepunkte in verschiedenen Dateien haben. Es ermöglicht uns:
Springen Sie schnell zum Haltepunkt im Code (indem Sie im rechten Bereich darauf klicken).
Deaktivieren Sie den Haltepunkt vorübergehend, indem Sie ihn deaktivieren.
Entfernen Sie den Haltepunkt, indem Sie mit der rechten Maustaste klicken und Entfernen auswählen.
…Und so weiter.
Bedingte Haltepunkte
Durch Klicken mit der rechten Maustaste auf die Zeilennummer können Sie einen bedingten Haltepunkt erstellen. Es wird nur ausgelöst, wenn der angegebene Ausdruck, den Sie beim Erstellen angeben sollten, wahr ist.
Das ist praktisch, wenn wir nur für einen bestimmten Variablenwert oder für bestimmte Funktionsparameter anhalten müssen.
Wir können den Code auch anhalten, indem wir den darin enthaltenen debugger -Befehl verwenden, etwa so:
Funktion hallo(name) {
let Phrase = `Hallo, ${name}!`;
Debugger; // <-- der Debugger stoppt hier
sagen(Satz);
}Ein solcher Befehl funktioniert nur, wenn die Entwicklungstools geöffnet sind, andernfalls wird er vom Browser ignoriert.
In unserem Beispiel wird hello() während des Ladens der Seite aufgerufen. Der einfachste Weg, den Debugger zu aktivieren (nachdem wir die Haltepunkte festgelegt haben), besteht darin, die Seite neu zu laden. Drücken wir also F5 (Windows, Linux) oder Cmd + R (Mac).
Wenn der Haltepunkt gesetzt ist, wird die Ausführung in der 4. Zeile angehalten:
Bitte öffnen Sie die Informations-Dropdowns auf der rechten Seite (mit Pfeilen gekennzeichnet). Sie ermöglichen Ihnen, den aktuellen Codestatus zu untersuchen:
Watch – zeigt aktuelle Werte für alle Ausdrücke an.
Sie können auf das Pluszeichen + klicken und einen Ausdruck eingeben. Der Debugger zeigt seinen Wert an und berechnet ihn während der Ausführung automatisch neu.
Call Stack – zeigt die verschachtelte Anrufkette.
Im Moment befindet sich der Debugger im Aufruf hello() , der von einem Skript in index.html aufgerufen wird (dort gibt es keine Funktion, daher heißt es „anonym“).
Wenn Sie auf ein Stack-Element klicken (z. B. „anonym“), springt der Debugger zum entsprechenden Code und alle seine Variablen können ebenfalls untersucht werden.
Scope – aktuelle Variablen.
Local zeigt lokale Funktionsvariablen an. Sie können ihre Werte auch direkt über der Quelle hervorgehoben sehen.
Global hat globale Variablen (von allen Funktionen).
Es gibt dort auch this Schlüsselwort, das wir noch nicht studiert haben, aber das werden wir bald tun.
Jetzt ist es an der Zeit, das Skript zu verfolgen .
Oben im rechten Bereich befinden sich Schaltflächen dafür. Lassen Sie uns sie engagieren.
– „Fortsetzen“: Fortsetzung der Ausführung, Hotkey F8 .
Setzt die Ausführung fort. Wenn keine zusätzlichen Haltepunkte vorhanden sind, wird die Ausführung einfach fortgesetzt und der Debugger verliert die Kontrolle.
Das sehen wir nach einem Klick darauf:
Die Ausführung wurde fortgesetzt, hat innerhalb say() einen weiteren Haltepunkt erreicht und dort angehalten. Schauen Sie sich den „Call Stack“ rechts an. Es hat sich um einen weiteren Anruf erhöht. Wir sind jetzt in say() .
– „Schritt“: Führen Sie den nächsten Befehl aus, Hotkey F9 .
Führen Sie die nächste Anweisung aus. Wenn wir jetzt darauf klicken, wird alert angezeigt.
Wenn Sie immer wieder darauf klicken, werden alle Skriptanweisungen nacheinander durchlaufen.
– „Schritt über“: Führen Sie den nächsten Befehl aus, aber gehen Sie nicht in eine Funktion , Hotkey F10 .
Ähnlich dem vorherigen „Step“-Befehl, verhält sich jedoch anders, wenn die nächste Anweisung ein Funktionsaufruf ist (kein integrierter Befehl wie alert , sondern eine eigene Funktion).
Wenn wir sie vergleichen, geht der Befehl „Step“ in einen verschachtelten Funktionsaufruf ein und pausiert die Ausführung in seiner ersten Zeile, während „Step over“ den verschachtelten Funktionsaufruf für uns unsichtbar ausführt und die Funktionsinterna überspringt.
Die Ausführung wird dann unmittelbar nach diesem Funktionsaufruf angehalten.
Das ist gut, wenn wir nicht daran interessiert sind, zu sehen, was innerhalb des Funktionsaufrufs passiert.
– „Eintreten“, Hotkey F11 .
Das ähnelt „Step“, verhält sich aber bei asynchronen Funktionsaufrufen anders. Wenn Sie gerade erst anfangen, JavaScript zu lernen, können Sie den Unterschied ignorieren, da wir noch keine asynchronen Aufrufe haben.
Beachten Sie für die Zukunft, dass der Befehl „Step“ asynchrone Aktionen wie setTimeout (geplanter Funktionsaufruf) ignoriert, die später ausgeführt werden. Der „Einstieg“ geht in ihren Code und wartet bei Bedarf auf sie. Weitere Einzelheiten finden Sie im DevTools-Handbuch.
– „Aussteigen“: Fortsetzung der Ausführung bis zum Ende der aktuellen Funktion, Hotkey Umschalt + F11 .
Setzen Sie die Ausführung fort und stoppen Sie sie in der allerletzten Zeile der aktuellen Funktion. Das ist praktisch, wenn wir versehentlich einen verschachtelten Anruf eingegeben haben , aber es interessiert uns nicht, und wir wollen es so schnell wie möglich zu Ende bringen.
– alle Haltepunkte aktivieren/deaktivieren.
Diese Schaltfläche verschiebt die Ausführung nicht. Nur eine Masse an/aus für Haltepunkte.
– Automatische Pause im Fehlerfall aktivieren/deaktivieren.
Wenn diese Option aktiviert ist und die Entwicklertools geöffnet sind, wird sie bei einem Fehler während der Skriptausführung automatisch angehalten. Dann können wir Variablen im Debugger analysieren, um zu sehen, was schief gelaufen ist. Wenn unser Skript also mit einem Fehler abstürzt, können wir den Debugger öffnen, diese Option aktivieren und die Seite neu laden, um zu sehen, wo es abstürzt und wie der Kontext in diesem Moment ist.
Weiter bis hierher
Ein Rechtsklick auf eine Codezeile öffnet das Kontextmenü mit der tollen Option „Weiter bis hierher“.
Das ist praktisch, wenn wir mehrere Schritte vorwärts zur Linie gehen wollen, aber zu faul sind, einen Haltepunkt festzulegen.
Um etwas aus unserem Code an die Konsole auszugeben, gibt es die Funktion console.log .
Dies gibt beispielsweise Werte von 0 bis 4 an die Konsole aus:
// Konsole öffnen, um zu sehen
for (sei i = 0; i < 5; i++) {
console.log("value,", i);
}Normale Benutzer sehen diese Ausgabe nicht, sie befindet sich in der Konsole. Um es anzuzeigen, öffnen Sie entweder das Konsolenfenster der Entwicklertools oder drücken Sie Esc , während Sie sich in einem anderen Fenster befinden. Dadurch wird die Konsole unten geöffnet.
Wenn wir in unserem Code genügend Protokolle haben, können wir anhand der Datensätze sehen, was ohne den Debugger passiert.
Wie wir sehen, gibt es im Wesentlichen drei Möglichkeiten, ein Skript anzuhalten:
Ein Haltepunkt.
Die debugger Anweisungen.
Ein Fehler (wenn Entwicklungstools geöffnet sind und die Schaltfläche ist „ein“).
Im angehaltenen Zustand können wir debuggen: Variablen untersuchen und den Code verfolgen, um zu sehen, wo bei der Ausführung ein Fehler auftritt.
Es gibt viel mehr Optionen in Entwicklertools als hier beschrieben. Das vollständige Handbuch finden Sie unter https://developers.google.com/web/tools/chrome-devtools.
Die Informationen aus diesem Kapitel reichen aus, um mit dem Debuggen zu beginnen, aber später, insbesondere wenn Sie viele Browser-Aufgaben erledigen, schauen Sie sich bitte dort die erweiterten Funktionen der Entwicklertools an.
Oh, und Sie können auch auf verschiedene Stellen der Entwicklungstools klicken und einfach sehen, was angezeigt wird. Das ist wahrscheinlich der schnellste Weg, Entwicklungstools zu erlernen. Vergessen Sie nicht die Rechtsklick- und Kontextmenüs!