Browser-Debugging-Fähigkeiten, die Front-End-Benutzer beherrschen sollten!
Als Front-End-Entwickler verwenden wir häufig console.log(), um Probleme im Programm zu debuggen. Obwohl diese Methode auch einige Probleme lösen kann, ist sie nicht so effizient wie ein Tool, das Schritt-für-Schritt-Debugging durchführen kann. In diesem Artikel erfahren Sie, wie Sie mit Chrome Devtools problemlos JavaScript-Code debuggen.
1. Machen Sie sich mit dem Bedienfeld „Quellen“ vertraut
DevTools bietet uns viele verschiedene Tools zum Debuggen, einschließlich DOM-Inspektion, Analyse und Netzwerkaufrufinspektion. Worüber ich hier sprechen möchte, ist das Quellenfenster, das uns beim Debuggen von JavaScript helfen kann. Sie können die Tastenkombination F12 verwenden, um die Systemsteuerung zu öffnen, und auf die Registerkarte „Quellen“ klicken, um zum Bedienfeld „Quellen“ zu navigieren, oder Sie können es direkt mit der Tastenkombination Befehl+Wahl+I (Mac) oder Strg+Umschalt+I (Windows, Linux) öffnen ).
[Die Übertragung des externen Link-Bildes ist fehlgeschlagen. Die Quellseite verfügt möglicherweise über einen Anti-Leeching-Mechanismus. Es wird empfohlen, das Bild zu speichern und direkt hochzuladen (img-MvOI2fss-1691897345809) (C:\Users\Admin\Desktop\csdn\Debugging Tipps 1.png)]
Das Quellenfenster besteht hauptsächlich aus drei Teilen:
[Die Übertragung des externen Link-Bildes ist fehlgeschlagen. Die Quellseite verfügt möglicherweise über einen Anti-Leeching-Mechanismus. Es wird empfohlen, das Bild zu speichern und direkt hochzuladen (img-EoWBDVpi-1691897345811) (C:\Users\Admin\Desktop\csdn\Debugging Tipps 2.png)]
- Dateinavigationsbereich: Alle von der Seite angeforderten Dateien werden hier aufgelistet;
- Codebearbeitungsbereich: Wenn wir eine Datei aus der Dateinavigationsleiste auswählen, wird der Inhalt der Datei hier aufgelistet und wir können den Code hier bearbeiten;
- Debugger-Bereich: Hier gibt es viele Tools, mit denen man Haltepunkte setzen, Variablenwerte überprüfen, Ausführungsschritte beobachten usw. kann.
Wenn das DevTools-Fenster breiter ist oder nicht in einem separaten Fenster geöffnet wird, wird der Debugger-Bereich rechts neben dem Code-Editor angezeigt:
[Die Übertragung des externen Link-Bildes ist fehlgeschlagen. Die Quellseite verfügt möglicherweise über einen Anti-Leeching-Mechanismus. Es wird empfohlen, das Bild zu speichern und direkt hochzuladen (img-wXTdgVv7-1691897345813) (C:\Users\Admin\Desktop\csdn\Debugging Tipps 3.png)]
2. Haltepunkte setzen
Um mit dem Debuggen Ihres Codes zu beginnen, müssen Sie zunächst einen Haltepunkt festlegen. Dabei handelt es sich um einen logischen Punkt, an dem die Codeausführung angehalten wird, damit Sie ihn debuggen können.
Mit DevTools können wir Haltepunkte auf unterschiedliche Weise festlegen:
- in der Codezeile;
- in einer bedingten Anweisung;
- Am DOM-Knoten;
- auf dem Ereignis-Listener.
1. Setzen Sie einen Haltepunkt in der Codezeile
So legen Sie einen Codezeilen-Haltepunkt fest:
- Klicken Sie, um zur Registerkarte „Quellen“ zu wechseln.
- Wählen Sie im Dateinavigationsabschnitt die zu debuggende Quelldatei aus.
- Suchen Sie im Code-Editor-Bereich rechts nach der Codezeile, die debuggt werden muss.
- Klicken Sie auf die Zeilennummer, um einen Haltepunkt für die Zeile festzulegen.
[Die Übertragung des externen Link-Bildes ist fehlgeschlagen. Die Quellseite verfügt möglicherweise über einen Anti-Leeching-Mechanismus. Es wird empfohlen, das Bild zu speichern und direkt hochzuladen (img-NQREAii1-1691897345815) (C:\Users\Admin\Desktop\csdn\Debugging Tipps 4.png)]
Hier wird in Zeile 6 des Codes ein Haltepunkt gesetzt und der Code wird angehalten, wenn er hier ausgeführt wird.
2. Legen Sie bedingte Haltepunkte fest
Schritte zum Festlegen bedingter Haltepunkte:
- Klicken Sie, um zur Registerkarte „Quellen“ zu wechseln.
- Wählen Sie im Dateinavigationsabschnitt die zu debuggende Quelldatei aus.
- Suchen Sie im Code-Editor-Bereich rechts nach der Codezeile, die debuggt werden muss.
- Fügen Sie einen bedingten Haltepunkt hinzu, indem Sie mit der rechten Maustaste auf die Zeilennummer klicken und „Bedingten Haltepunkt hinzufügen“ auswählen:
[Die Übertragung des externen Link-Bildes ist fehlgeschlagen. Die Quellseite verfügt möglicherweise über einen Anti-Leeching-Mechanismus. Es wird empfohlen, das Bild zu speichern und direkt hochzuladen (img-wByObfjK-1691897345816) (C:\Users\Admin\Desktop\csdn\Debugging Tipps 5.png)]
Nach dem Klicken erscheint unterhalb der Codezeile ein Dialogfeld, in dem Sie die Bedingungen für den Haltepunkt eingeben können:
[Die Übertragung des externen Link-Bildes ist fehlgeschlagen. Die Quellseite verfügt möglicherweise über einen Anti-Leeching-Mechanismus. Es wird empfohlen, das Bild zu speichern und direkt hochzuladen (img-jcppEtlL-1691897345818) (C:\Users\Admin\Desktop\csdn\Debugging Tipps 6.png)]
Drücken Sie die Eingabetaste, um den Haltepunkt zu aktivieren. Oben in der Haltepunktzeile wird ein orangefarbenes Symbol angezeigt:
[Die Übertragung des externen Link-Bildes ist fehlgeschlagen. Die Quellseite verfügt möglicherweise über einen Anti-Leeching-Mechanismus. Es wird empfohlen, das Bild zu speichern und direkt hochzuladen (img-7YduR3vt-1691897345820) (C:\Users\Admin\Desktop\csdn\Debugging Tipps 7.png)]
Wenn der Wert der Namensvariablen in der print()-Methode Joe ist, wird die Ausführung des Codes angehalten. Es ist zu beachten, dass bedingte Haltepunkte nur verwendet werden, wenn wir uns über den ungefähren Umfang des zu debuggenden Codes sicher sind.
3. Legen Sie einen Haltepunkt für den Ereignis-Listener fest
So legen Sie einen Haltepunkt für einen Ereignis-Listener fest:
- Klicken Sie, um zur Registerkarte „Quellen“ zu wechseln.
- Erweitern Sie die Option Event Listener Breakpoints im Debugger-Bereich.
- Wählen Sie einen Ereignis-Listener aus der Ereignisliste aus, um einen Haltepunkt festzulegen. In unserem Programm gibt es ein Button-Click-Ereignis. Hier wählen wir „Click“ in der Option „Maus-Event“ aus.
[Die Übertragung des externen Link-Bildes ist fehlgeschlagen. Die Quellseite verfügt möglicherweise über einen Anti-Leeching-Mechanismus. Es wird empfohlen, das Bild zu speichern und direkt hochzuladen (img-xquG0VyI-1691897345821) (C:\Users\Admin\Desktop\csdn\Debugging Tipps 8.png)]
Tipp: Diese Option kann verwendet werden, wenn wir den Ereignis-Listener-Code anhalten möchten, der nach der Auslösung des Ereignisses ausgeführt wird.
4. Legen Sie Haltepunkte in DOM-Knoten fest
DevTools ist auch bei der DOM-Inspektion und dem Debuggen leistungsstark. Sie können Haltepunkte festlegen, um die Codeausführung anzuhalten, wenn im DOM etwas hinzugefügt, gelöscht oder geändert wird.
Schritte zum Festlegen von Haltepunkten im DOM:
- Klicken Sie, um zur Registerkarte „Elemente“ zu wechseln.
- Suchen Sie das Element, für das Sie einen Haltepunkt festlegen möchten.
- Klicken Sie mit der rechten Maustaste auf das Element, um das Kontextmenü aufzurufen, wählen Sie die Option „Unterbrechen bei“ und wählen Sie dann eine der Änderungen „Teilbaum“, „Attributänderungen“ oder „Knotenentfernung“ aus:
[Die Übertragung des externen Link-Bildes ist fehlgeschlagen. Die Quellseite verfügt möglicherweise über einen Anti-Leeching-Mechanismus. Es wird empfohlen, das Bild zu speichern und direkt hochzuladen (img-qrES8cOn-1691897345823) (C:\Users\Admin\Desktop\csdn\Debugging Tipps 9.png)]
Die Bedeutung dieser drei Optionen ist wie folgt:
- Unterbaumänderungen: Haltepunkt, wenn sich die internen untergeordneten Knoten des Knotens ändern;
- Attributänderungen: Haltepunkt, wenn sich Knotenattribute ändern;
- Knotenentfernung: Haltepunkt, wenn ein Knoten entfernt wird.
Wie oben gezeigt, setzen wir einen Haltepunkt, wenn sich das DOM des Divs ändert, das die Nachricht ausgibt. Wenn Sie auf die Schaltfläche klicken, wird die Begrüßungsnachricht an das Div ausgegeben. Wenn sich der Inhalt des untergeordneten Knotens ändert, kommt es zu einer Unterbrechung.
Hinweis: Diese Option kann verwendet werden, wenn wir vermuten, dass eine DOM-Änderung den Fehler verursacht hat. Wenn die DOM-Änderung unterbrochen wird, wird die Ausführung des entsprechenden JavaScript-Codes automatisch angehalten.
3. Schritt-für-Schritt-Debugging
Jetzt wissen wir, wie man Haltepunkte setzt. In komplexen Debugging-Situationen müssen wir möglicherweise eine Kombination dieser Debugging-Maßnahmen verwenden. Der Debugger bietet fünf Steuerelemente zum schrittweisen Durchlaufen des Codes:
[Die Übertragung des externen Link-Bildes ist fehlgeschlagen. Die Quellseite verfügt möglicherweise über einen Anti-Leeching-Mechanismus. Es wird empfohlen, das Bild zu speichern und direkt hochzuladen (img-vG9zTVwS-1691897345825) (C:\Users\Admin\Desktop\csdn\Debugging Tipps 10.png)]
Werfen wir einen Blick darauf, wie diese Steuerelemente separat verwendet werden.
1. Nächster Schritt (Tastenkombination: F9)
Mit dieser Option können wir den JavaScript-Code Zeile für Zeile ausführen. Wenn sich in der Mitte ein Funktionsaufruf befindet, wird bei der Einzelschrittausführung auch die Funktion eingegeben, Zeile für Zeile ausgeführt und dann beendet.
[Die Übertragung des externen Link-Bildes ist fehlgeschlagen. Die Quellseite verfügt möglicherweise über einen Anti-Leeching-Mechanismus. Es wird empfohlen, das Bild zu speichern und direkt hochzuladen (img-gPTMkbyV-1691897345826) (C:\Users\Admin\Desktop\csdn\Debugging Tipps 11.gif)]
2. Überspringen (Tastenkombination: F10)
Mit dieser Option können wir beim Ausführen des Codes einen Teil des Codes überspringen. Manchmal haben wir möglicherweise festgestellt, dass bestimmte Funktionen normal sind und möchten uns nicht die Zeit nehmen, sie zu überprüfen. Daher können wir die Option zum Überspringen verwenden.
Das Folgende ist die Ausführung der Funktion, die übersprungen wird, wenn die Funktion logger() einzeln ausgeführt wird:
[Die Übertragung des externen Link-Bildes ist fehlgeschlagen. Die Quellseite verfügt möglicherweise über einen Anti-Leeching-Mechanismus. Es wird empfohlen, das Bild zu speichern und direkt hochzuladen (img-WIMsElrH-1691897345827) (C:\Users\Admin\Desktop\csdn\Debugging Tipps 12.gif)]
3. Enter (Tastenkombination: F11)
Nutzen Sie diese Option, um mehr Einblick in die Funktion zu erhalten. Wenn Sie in eine Funktion einsteigen, können Sie diese Option verwenden, um in die Funktion einzudringen und sie zu debuggen, wenn Sie das Gefühl haben, dass sich eine Funktion seltsam verhält, und sie untersuchen möchten.
Das Folgende ist die einstufige Ausführung der Funktion logger():
[Die Übertragung des externen Link-Bildes ist fehlgeschlagen. Die Quellseite verfügt möglicherweise über einen Anti-Leeching-Mechanismus. Es wird empfohlen, das Bild zu speichern und direkt hochzuladen (img-vw4U39hg-1691897345830) (C:\Users\Admin\Desktop\csdn\Debugging Tipps 13.gif)]
4. Herausspringen (Tastenkombination: Umschalt+F11)
Wenn wir eine Funktion durchlaufen, möchten wir möglicherweise nicht mit der Ausführung fortfahren und sie beenden, daher können wir diese Optionen verwenden, um die Funktion zu beenden.
Im Folgenden wird die Funktion logger() aufgerufen und dann sofort beendet:
[Die Übertragung des externen Link-Bildes ist fehlgeschlagen. Die Quellseite verfügt möglicherweise über einen Anti-Leeching-Mechanismus. Es wird empfohlen, das Bild zu speichern und direkt hochzuladen (img-k2hSoD23-1691897345832) (C:\Users\Admin\Desktop\csdn\Debugging Tipps 14.gif)]
5. Springen (Tastenkombination: F8)
Manchmal möchten wir ohne dazwischenliegendes Debuggen von einem Haltepunkt zum anderen springen. Mit dieser Option können wir zum nächsten Haltepunkt springen:
[Die Übertragung des externen Link-Bildes ist fehlgeschlagen. Die Quellseite verfügt möglicherweise über einen Anti-Leeching-Mechanismus. Es wird empfohlen, das Bild zu speichern und direkt hochzuladen (img-5Gaa5q5v-1691897345833) (C:\Users\Admin\Desktop\csdn\Debugging Tipps 15.gif)]
4. Überprüfen Sie Umfang, Aufrufstapel und Wert
Untersuchen Sie beim zeilenweisen Debuggen den Umfang und die Werte von Variablen sowie den Aufrufstapel von Funktionsaufrufen. Diese drei Optionen stehen im Debugger-Bereich zur Verfügung:
[Die Übertragung des externen Link-Bildes ist fehlgeschlagen. Die Quellseite verfügt möglicherweise über einen Anti-Leeching-Mechanismus. Es wird empfohlen, das Bild zu speichern und direkt hochzuladen (img-gMPD3HgW-1691897345834) (C:\Users\Admin\Desktop\csdn\Debugging Tipps 16.png)]
1. Geltungsbereich
Sie können den Inhalt und die Variablen im lokalen Bereich und im globalen Bereich in der Option „Bereich“ anzeigen und auch den Echtzeitzeiger davon sehen:
[Die Übertragung des externen Link-Bildes ist fehlgeschlagen. Die Quellseite verfügt möglicherweise über einen Anti-Leeching-Mechanismus. Es wird empfohlen, das Bild zu speichern und direkt hochzuladen (img-TEIUHfnu-1691897345835) (C:\Users\Admin\Desktop\csdn\Debugging Tipps 17.png)]
2. Aufrufstapel
Das Call-Stack-Panel hilft bei der Identifizierung des Funktionsausführungs-Stacks:
[Die Übertragung des externen Link-Bildes ist fehlgeschlagen. Die Quellseite verfügt möglicherweise über einen Anti-Leeching-Mechanismus. Es wird empfohlen, das Bild zu speichern und direkt hochzuladen (img-0Ndw4EGo-1691897345836) (C:\Users\Admin\Desktop\csdn\Debugging Tipps 18.png)]
3. Wert
Die Überprüfung der Werte in Ihrem Code ist die wichtigste Möglichkeit, Fehler in Ihrem Code zu identifizieren. Während wir durchgehen, können wir den Wert überprüfen, indem wir einfach mit der Maus über die Variable fahren.
Unten sehen Sie den Prüfwert des Variablennamens, wenn der Code ausgeführt wird:
[Die Übertragung des externen Link-Bildes ist fehlgeschlagen. Die Quellseite verfügt möglicherweise über einen Anti-Leeching-Mechanismus. Es wird empfohlen, das Bild zu speichern und direkt hochzuladen (img-BCqmSa7Y-1691897345837) (C:\Users\Admin\Desktop\csdn\Debugging Tipps 19.png)]
Darüber hinaus können wir einen Teil des Codes als Ausdruck auswählen, um den Wert zu überprüfen. Im folgenden Beispiel wird der Ausdruck document.getElementById('m_wish') ausgewählt, um den Wert zu überprüfen:
[Die Übertragung des externen Link-Bildes ist fehlgeschlagen. Die Quellseite verfügt möglicherweise über einen Anti-Leeching-Mechanismus. Es wird empfohlen, das Bild zu speichern und direkt hochzuladen (img-XX7wvxyV-1691897345839) (C:\Users\Admin\Desktop\csdn\Debugging Tipps 20.png)]
4. Beobachten
Im Abschnitt „Überwachen“ können Sie einen oder mehrere Ausdrücke hinzufügen und deren Werte während der Ausführung überwachen. Diese Funktion ist sehr nützlich, wenn wir einige Berechnungen außerhalb der Codelogik durchführen möchten. Wir können beliebige Variablen aus einem Codebereich kombinieren, um einen gültigen JavaScript-Ausdruck zu bilden. Während Sie die Ausführung durchlaufen, können Sie den Wert des Ausdrucks sehen.
Hier sind die Schritte zum Hinzufügen einer Uhr:
-
Klicken Sie auf der Uhr auf die Schaltfläche „+“:
[Die Übertragung des externen Link-Bildes ist fehlgeschlagen. Die Quellseite verfügt möglicherweise über einen Anti-Leeching-Mechanismus. Es wird empfohlen, das Bild zu speichern und direkt hochzuladen (img-zlDLRd7q-1691897345840) (C:\Users\Admin\Desktop\csdn\Debugging Tipps 21.png)]
-
Fügen Sie zu überwachende Ausdrücke hinzu. In diesem Beispiel wird eine Variable hinzugefügt, deren Wert Sie beobachten möchten:
[Die Übertragung des externen Link-Bildes ist fehlgeschlagen. Die Quellseite verfügt möglicherweise über einen Anti-Leeching-Mechanismus. Es wird empfohlen, das Bild zu speichern und direkt hochzuladen (img-UI7iO1jh-1691897345841) (C:\Users\Admin\Desktop\csdn\Debugging Tipps 22.png)]
Eine andere Möglichkeit, den Wert eines Ausdrucks zu beobachten, besteht darin, über die Konsole Folgendes hinzuzufügen:
[Die Übertragung des externen Link-Bildes ist fehlgeschlagen. Die Quellseite verfügt möglicherweise über einen Anti-Leeching-Mechanismus. Es wird empfohlen, das Bild zu speichern und direkt hochzuladen (img-gEYuG2wb-1691897345842) (C:\Users\Admin\Desktop\csdn\Debugging Tipps 24.png)]
Beachten Sie, dass die obige Methode die Haltepunkte nicht löscht, sondern sie nur vorübergehend deaktiviert. Um diese Haltepunkte wieder zu aktivieren, klicken Sie einfach erneut auf den Haltepunkt.
Durch Deaktivieren des Kontrollkästchens können ein oder mehrere Haltepunkte aus dem Haltepunktfenster entfernt werden. Alle Haltepunkte können gelöscht werden, indem Sie mit der rechten Maustaste klicken und die Option „Alle Haltepunkte löschen“ auswählen:
[Die Übertragung des externen Link-Bildes ist fehlgeschlagen. Die Quellseite verfügt möglicherweise über einen Anti-Leeching-Mechanismus. Es wird empfohlen, das Bild zu speichern und direkt hochzuladen (img-dcL91Evw-1691897345843) (C:\Users\Admin\Desktop\csdn\Debugging Tipps 25.png)]
6. Verwenden Sie VS-Code, um JavaScript zu debuggen
Einige nützliche Plug-Ins im Visual Studio-Code können zum Debuggen von JavaScript-Code verwendet werden. Sie können ein Plugin namens „Debugger for Chrome“ installieren, um Ihren Code zu debuggen:
[Die Übertragung des externen Link-Bildes ist fehlgeschlagen. Die Quellseite verfügt möglicherweise über einen Anti-Leeching-Mechanismus. Es wird empfohlen, das Bild zu speichern und direkt hochzuladen (img-fftFlEDe-1691897345844) (C:\Users\Admin\Desktop\csdn\Debugging Tipps 26.png)]
Klicken Sie nach der Installation links auf die Option „Ausführen“ und erstellen Sie eine Konfiguration zum Ausführen/Debuggen von JavaScript-Anwendungen.
[Die Übertragung des externen Link-Bildes ist fehlgeschlagen. Die Quellseite verfügt möglicherweise über einen Anti-Leeching-Mechanismus. Es wird empfohlen, das Bild zu speichern und direkt hochzuladen (img-l0Y0rCMa-1691897345846) (C:\Users\Admin\Desktop\csdn\Debugging Tipps 27.png)]
Dadurch wird eine Datei namens launch.json erstellt, die einige Setup-Informationen enthält:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Debug the Greet Me app",
"url": "<http://localhost:5500>",
"webRoot": "${workspaceFolder}"
}
]
}
Folgende Parameter können geändert werden:
- Name: beliebiger Name;
- URL: URL, die lokal ausgeführt wird;
- webRoot: Der Standardwert ist ${workspaceFolder}, der aktuelle Ordner. Möglicherweise ist eine Änderung in der Projekteintragsdatei möglich.
Der letzte Schritt besteht darin, mit dem Debuggen zu beginnen, indem Sie auf das Wiedergabesymbol in der oberen linken Ecke klicken:
[Bildübertragung mit externem Link fehlgeschlagen. Die Quellseite verfügt möglicherweise über einen Anti-Leeching-Mechanismus. Es wird empfohlen, das Bild zu speichern und direkt hochzuladen (img-OoctMqiO-1691897345847) (C:\Users\Admin\Desktop\csdn\Debugging Tips 28.png)]
Dieser Debugger ähnelt DevTools und besteht hauptsächlich aus den folgenden Teilen:
- Aktivieren Sie das Debuggen. Drücken Sie die Wiedergabetaste, um die Debugging-Optionen zu aktivieren.
- Steuerelemente zum Durchlaufen von Haltepunkten und zum Anhalten oder Stoppen des Debuggens.
- Legen Sie Haltepunkte für den Quellcode fest.
- Bereichsbereich: Zeigen Sie Variablenbereiche und -werte an.
- Überwachungsfeld zum Erstellen und Überwachen von Ausdrücken.
- Der Aufrufstapel der ausgeführten Funktion.
- Liste der Haltepunkte zum Aktivieren, Deaktivieren und Entfernen.
- Die Debug-Konsole liest Konsolenprotokollmeldungen.
[Die Übertragung des externen Link-Bildes ist fehlgeschlagen. Die Quellseite verfügt möglicherweise über einen Anti-Leeching-Mechanismus. Es wird empfohlen, das Bild zu speichern und direkt hochzuladen (img-iv34LXey-1691897345848) (C:\Users\Admin\Desktop\csdn\Debugging Tipps 29.png)]
Zurück zur ursprünglichen Frage: Wir werden hier nicht mehr Schritt für Schritt debuggen. Basierend auf der obigen Debugging-Methode müssen Sie nur ein + vor der Wunschvariablen hinzufügen:
const message = 'Hello '
+ name
+ ', Your wish `'
+ + wish
+ '` may come true!';
Zurück zur ursprünglichen Frage, wir werden hier nicht mehr Schritt für Schritt debuggen. Basierend auf der obigen Debugging-Methode müssen Sie nur ein + vor der Wunschvariablen hinzufügen:
const message = 'Hello '
+ name
+ ', Your wish `'
+ + wish
+ '` may come true!';