Zusammenfassung wichtiger Breakpoint-Debugging-Techniken für JavaScript (empfohlen)

Warum einen Debugger verwenden?

Dieser Artikel stellt die Verwendung von Haltepunkten zum Debuggen von JavaScript vor. Bevor Sie diesen Artikel lesen, müssen Sie sich eine Frage stellen: Warum werden Haltepunkte zum Debuggen verwendet?
Wir müssen die Notwendigkeit der Verwendung von Haltepunkten verstehen, sonst sind alle unten vorgestellten Haltepunkt-Debuggingmethoden Unsinn. console.log ist die am häufigsten verwendete Debugging-Methode in der Frontend-Entwicklung. Sie löst einige Probleme einfach und direkt. Wenn Sie jedoch auf sehr komplexe Probleme stoßen, reicht console.log nicht mehr aus. Zum Beispiel:

• Wenn Sie schon einmal LeetCode verwendet haben, verfügen Sie über ein tiefes Verständnis eines logisch komplexen Algorithmus. Wenn ein Testfall des Algorithmus einen Fehler meldet, ist es manchmal schwierig, die problematische Methode allein durch visuelle Inspektion zu finden.
• Ein Fehler, dessen Reproduktion sehr umständlich ist.
  Ich brauchte 10 Minuten, um das Problem zu reproduzieren, konnte es aber nur auf eine bestimmte Codezeile zurückführen. Ich musste das Protokoll ein zweites Mal hinzufügen, um weiter nach dem Problem zu suchen. Protokoll anzeigen -> Protokoll hinzufügen -> Protokoll anzeigen ... Wiederholen Sie diesen Vorgang mehrere Male, und Sie werden heute nicht in der Lage sein, alle verbleibenden Steine ​​zu verschieben.
• Ein Codestück mit einem langwierigen Prozess
• Ein Codestück ohne Kommentare und mit zufälligen Namen
• Bei serverseitigem Code haben Studenten, die Erfahrung mit serverseitiger Node.js-Entwicklung haben, möglicherweise schon Erfahrungen mit dem Hin- und Herspringen zwischen Postman <-> IDE gemacht. Wenn Sie sich nur auf Protokolle verlassen, ist es für die Konsole schwierig, das Gesamtbild eines riesigen und komplexen Objekts anzuzeigen. Wenn eine Schnittstelle auch Datenbankergänzungen und -löschungen sowie Abhängigkeiten von Drittanbietern beinhaltet, ist auch die Wiederherstellung der Auswirkungen der letzten Anforderung eine mühsame Aufgabe.

In diesen Fällen ist das Breakpoint-Debugging sehr wertvoll, da es die Komplexität der Debugging-Zeit von O(n) auf O(1) reduziert und das Brick-Moving angenehmer macht.

Hier ist die Gliederung des Artikels:

• Grundlegende Verwendung des Chrome-Debuggers
• VS Code-Debuggen der SPA-Anwendung
• Chrome: Nodejs debuggen
• VS Code - Nodejs debuggen

Grundlegende Verwendung des Chrome-Debuggers

Das einfachste Breakpoint-Debugging besteht darin, eine Debugger-Anweisung in den Code einzufügen und dann die Seite im Browser zu aktualisieren. Der Browser stoppt dann die Ausführung an der Debugger-Anweisung.

Zum besseren Verständnis stellen wir ein einfaches Beispiel vor. Erstellen Sie index.html und index.js in einem Ordner und importieren Sie dann index.js in index.html. Der Inhalt von index.js ist wie folgt:

// Internationale Praxis, hallo Welt.
const greet = () => {
  const Greeting = "Hallo Debugger";
  // Der Browser pausiert den Debugger, wenn er hier ausgeführt wird
  console.log(Begrüßung);
};

begrüßen();

console.log("js-Auswertung abgeschlossen");

Führen Sie den Befehl aus:

npm ich -g dienen
Aufschlag .

Besuchen Sie dann http://localhost:5000 und öffnen Sie die Entwicklertools.

Zu diesem Zeitpunkt ist unser „Hallo Welt“-Haltepunkt wie folgt festgelegt:

Das Bild ist in vier Bereiche unterteilt. Der blaue Bereich dient zur Dateiauswahl. Die Spalte Seite bezieht sich auf die JS-Datei auf der aktuellen Seite. Unter Dateisystem werden die Dateien in unserem System angezeigt. Normalerweise verwenden wir Page.

Pink steht für die Zeilennummer und den Inhalt des Codes. Sie können auf die Zeilennummer des Codes klicken, um einen neuen Haltepunkt hinzuzufügen, und erneut klicken, um abzubrechen.

Der gelbe Bereich dient zur Steuerung der Codeausführung. Um die meisten Szenarien zu meistern, müssen Sie nur die Bedeutung der ersten vier Schaltflächen beherrschen. Mit der Schaltfläche 1 kann der Code weiter ausgeführt werden (Fortsetzen). Wenn der nächste Haltepunkt erreicht wird, wird die Ausführung erneut unterbrochen. Mit der Schaltfläche 2 kann der Browser die aktuelle Zeile (Zeile 3 in der Abbildung) ausführen und dann den Code in der nächsten Zeile unterbrechen. Mit der Schaltfläche 3 können Sie die aktuelle Funktion aufrufen und den spezifischen Inhalt der Funktion anzeigen. Angenommen, wir befinden uns derzeit bei „greet()“ in Zeile 7. Durch Klicken auf die Schaltfläche 3 wird die Greet-Methode aufgerufen (also Zeile 2). Wenn Sie sich die Greet-Methode nicht mehr ansehen möchten, klicken Sie auf die Schaltfläche 4, um diese Methode zu beenden und zu Zeile 8 zurückzukehren.

Im grünen Bereich können Sie den Inhalt von Variablen und den aktuellen Aufrufstapel anzeigen.

Der Debugger ist die einfachste und brutalste Möglichkeit, Haltepunkte zu setzen, erfordert aber eine Änderung unseres Codes. Zu beachten ist, dass diese Angaben vor der Online-Schaltung gelöscht werden müssen. Es kann auch automatisch durch die Konfiguration von Webpack entfernt werden. Aber es ist immer noch etwas umständlich, also schauen wir uns an, wie man die Art der Unterbrechungspunkte durch vscode vereinfachen kann.

VS Code-Debuggen der SPA-Anwendung

Zunächst erstellen wir mit Vite eine Vue-Anwendung zur Demonstration (die React-Schritte sind ähnlich).

# Erstellen Sie die vut-ts-Anwendung npm init vite
CD Hallo-Vite
npm installieren
# Rufen Sie die VS Code-CLI auf, um das Projekt zu öffnen, oder öffnen Sie es manuell in VS Code.
.
npm-Ausführung dev

Erstellen Sie dann eine neue Datei .vscode/launch.json in VS Code und füllen Sie diesen Inhalt aus:

{
  "version": "0.2.0",
  "Konfigurationen": [
    {
      "Typ": "pwa-chrome",
      "Anfrage": "starten",
      "name": "Vue-Projekt starten",
      // Tragen Sie die Zugangsadresse des Projekts "url" ein: "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    },
  ]
}

Beenden Sie dann Chrome mit cmd+q (dieser Schritt ist sehr wichtig und kann nicht übersprungen werden) und drücken Sie f5, um die Debugging-Funktion von VS Code zu starten. VS Code hilft Ihnen, ein Chrome-Fenster zu öffnen und auf die URL in der obigen Konfiguration zuzugreifen. Zu diesem Zeitpunkt werden unsere Haltepunkte wirksam und wir können die Ausführung des Codes Schritt für Schritt steuern, um die Quelle des Fehlers zu finden.

Hier ein praktischer Tipp: Überprüfen Sie in BREAKPOINTS die nicht abgefangenen Ausnahmen, damit die Ausführung automatisch unterbrochen wird, wenn der Code einen Fehler meldet. Wenn ein Fehler auftritt, kann diese Methode Zeit bei der Lokalisierung des Problemcodes sparen.

Darüber hinaus können wir feststellen, dass Chrome Devtools den Haltepunkt auch synchron anzeigt, wenn der VS Code-Haltepunkt wirksam wird.

In VS Code gibt es zwei Debugmodi: Starten und Anhängen. Da es die JS-Engine in Chrome ist, die den Code tatsächlich ausführt, liegt die Kontrolle darüber, ob der Code unterbrochen werden soll, in den Händen von Chrome. Warum können die Haltepunkte von VS Code Codeunterbrechungen steuern? Dies liegt daran, dass VS Code über das Devtools-Protokoll Anweisungen an Chrome sendet und Chrome mitteilt, bei welcher Codezeile die Ausführung angehalten werden soll. Der Vorgang des Sendens von Anweisungen wird als Anhängen bezeichnet. Der Startvorgang umfasst das Anhängen, d. h. zuerst den Browser starten und dann die Haltepunktinformationen anhängen. Der Anfügemodus ist also eine Teilmenge des Startmodus.

Es klingt, als wäre der Startmodus praktischer und erspart uns das manuelle Starten des Browsers. Es gibt jedoch ein Problem. Was passiert, wenn mehrere Front-End-Projekte gleichzeitig entwickelt werden? Wenn Sie für jedes Projekt einen Debugging-Prozess starten, werden mehrere Browser geöffnet und das Wechseln zwischen mehreren Browsern wird sehr mühsam. Wir können den Anfügemodus verwenden, um dieses Problem zu lösen.

Zuerst starten wir Chrome über die Befehlszeile. Der Grund für die Verwendung der Befehlszeile besteht darin, dass wir Parameter an den Start von Chrome übergeben müssen.

# Bevor Sie diesen Befehl ausführen, müssen Sie Chrome durch Drücken von cmd+q beenden.
/Anwendungen/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
# Wenn Sie diese Ausgabe sehen, bedeutet dies, dass die Parameterübertragung erfolgreich war.
DevTools lauscht auf ws://127.0.0.1:9222/devtools/browser/856a3533-ca5c-474f-a0cf-88b7ae94c75b

VS Code und Chrome kommunizieren über WebSocket und --remote-debugging-port gibt den vom WebSocket verwendeten Port an. Dann ändern wir die Datei launch.json so, dass sie wie folgt aussieht:

{
  "version": "0.2.0",
  "Konfigurationen": [
    {
      "Typ": "pwa-chrome",
      "Anfrage": "anhängen",
      "Name": "Vue-Anwendung",
      // URL für den Projektzugriff
      "URL": "http://localhost:3000",
      // Der WebSocket-Port muss mit dem Parameter --remote-debugging-port übereinstimmen.
      "Port": 9222,
      "webRoot": "${workspaceFolder}"
    },
  ]
}

Beachten Sie, dass Sie vor dem Starten des VS Code-Debuggens die Seite http://localhost:3000 in Chrome öffnen müssen. Dann setzen wir einen Haltepunkt in VS Code, aktualisieren den Browser und der Code wird erfolgreich am Haltepunkt angehalten. Das zweite und n-te Projekt können dieselbe Konfiguration verwenden. Der Unterschied besteht darin, dass das URL-Feld entsprechend der Projektkonfiguration geändert werden muss.

Chrome: Nodejs debuggen

Im obigen Artikel wurde darüber gesprochen, wie man die Seite debuggt. Als Nächstes sprechen wir darüber, wie man die NodeJS-Anwendung debuggt. Beginnen wir mit dem einfachsten Beispiel und erstellen ein „Hallo Welt“:

// debug.js-Datei const greeting = "Hallo NodeJS-Debugger"
Debugger
console.log(Begrüßung)

Führen Sie dann diese Datei aus

node --inspect-brk debug.js
Debugger lauscht auf ws://127.0.0.1:9229/b9a6d6bf-baaa-4ad5-8cc6-01eb69e99f0a
Hilfe finden Sie unter: https://nodejs.org/en/docs/inspector

--inspect-brk bedeutet, dass beim Ausführen der JS-Datei ein Haltepunkt in der ersten Zeile der Datei gesetzt wird. Öffnen Sie dann Chrome und gehen Sie zu Devtools. Klicken Sie auf die Schaltfläche im roten Feld. Ein node.s-spezifisches Debugfenster wird geöffnet und der Code wird in der ersten Zeile unterbrochen.

Nodejs-Debugfenster:

Das Wesentliche dieser Methode besteht darin, dass Chrome Devtool gemäß dem Debugging-Protokoll der V8-Engine Anweisungen an den Node.JS-Prozess sendet, um die Ausführung des Codes zu steuern. Es zeigt sich, dass Chrome beim Debuggen von Webseiten derjenige ist, der Anweisungen empfängt, während Chrome beim Debuggen von Node.JS derjenige ist, der Anweisungen sendet. Die sogenannte grandiose Verwandlung von der miserablen Partei B zur Partei A.

Der Standard-WebSocket-Port des Knotens ist 9229. Bei Bedarf (z. B. wenn der Port belegt ist) können wir diesen Port irgendwie ändern.

Knoten --inspect=9228 debug.js
Debugger lauscht auf ws://127.0.0.1:9228/30f21d45-9806-47b8-8a0b-5fb97cf8bb87
Hilfe finden Sie unter: https://nodejs.org/en/docs/inspector

Wenn wir Devtool öffnen, überprüft Chrome standardmäßig Port 9229, aber wenn wir die Portnummer ändern, müssen wir die von Chrome überprüfte Adresse manuell angeben. Klicken Sie im Bild unten auf die Schaltfläche „Konfigurieren“, geben Sie 127.0.0.1:9228 ein und klicken Sie auf „Fertig“. Zu diesem Zeitpunkt wird der gerade gestartete Knotenprozess im Remote-Ziel angezeigt. Klicken Sie auf „Untersuchen“, um mit dem Debuggen zu beginnen.

Debuggen von Nodejs mit VS Code

Bisher haben wir das Ziel des Debuggens von Knoten erreicht, aber es ist immer noch etwas umständlich und nicht ausreichend automatisiert. Mit VS Code können wir das Debuggen mit einem Klick starten.

Öffnen Sie das Projekt in VS Code und geben Sie Folgendes in launch.json ein:

{
  "version": "0.2.0",
  "Konfigurationen": [
    {
      "Typ": "pwa-node",
      "Anfrage": "starten",
      "Name": "Programm starten",
      "Dateien überspringen": [
        „<Knoten_internals>/**“
      ],
      // ${file} bedeutet, dass wenn wir mit dem Debuggen beginnen, das debuggte Programm die aktuelle Fokusdatei ist.
      "Programm": "${file}"
    }
  ]
}

Wechseln Sie jetzt zur Datei index.js und drücken Sie F5, um den Debugger zu starten. Wenn die zweite Zeile der Debugger-Anweisung erreicht ist, wird die Ausführung automatisch angehalten. Sie können auch auf die linke Seite der Codezeilennummer klicken, um einen Haltepunkt festzulegen.

Wenn wir TypeScript debuggen möchten, müssen wir nur index.js in index.ts umbenennen und dann launch.json ändern.

{
  "Typ": "pwa-node",
  "Anfrage": "starten",
  "Name": "Programm starten",
  "Dateien überspringen": [
    „<Knoten_internals>/**“
  ],
  "Programm": "${file}",
  // Vor dem Debuggen müssen Sie TypeScript in JS kompilieren.
  "preLaunchTask": "tsc: build - tsconfig.json",
  
  // Hier teilen wir VS Code mit, wohin die kompilierten Codedateien ausgegeben werden.
  // Sie müssen outDir als dist in tsconfig.json angeben.
  "outFiles": [
    „${workspaceFolder}/dist/**/*.js“
  ]
}

Beim TS-Debugging sind zwei Punkte zu beachten

1. Der outFile-Pfad in launch.json muss mit outDir in tsconfig.json übereinstimmen.
2. Geben Sie sourceMap in tsconfig.json als „true“ an.

Bedingter Haltepunkt

In einigen Fällen möchten wir nicht, dass jeder Haltepunkt wirksam wird, sondern dass die Codeausführung unterbrochen wird, wenn die Haltepunktzeile ausgeführt wird und eine bestimmte Bedingung erfüllt ist. Dies ist ein bedingter Haltepunkt.

für (sei i = 0; i < 10; i++) {
  konsole.log("i", i);
}

Wenn wir beispielsweise im obigen Code einen Haltepunkt in der zweiten Zeile von console.log setzen, wird dieser Haltepunkt insgesamt zehnmal unterbrochen. Dies ist oft das, was wir nicht sehen wollen. Vielleicht brauchen wir nur einen der Zyklen statt alle. Jetzt können Sie mit der rechten Maustaste klicken und „Bedingten Haltepunkt hinzufügen“ auswählen.

Jetzt erscheint ein Eingabefeld, in das wir i === 5 eingeben.

Wenn zu diesem Zeitpunkt mit dem Debuggen begonnen wird, wird i auf 0 - 4 gesprungen und die Codeausführung wird direkt unterbrochen, wenn i 5 ist. Nach der Wiederaufnahme der Codeausführung werden die Fälle übersprungen, in denen i 6 – 9 ist.

Bedingte Haltepunkte sind beim Debuggen von Code mit einer großen Anzahl von Schleifen und if-else-Anweisungen äußerst nützlich, insbesondere wenn die Gesamtlogik an einer bestimmten Stelle wie erwartet ist und nur einige Sonderfälle Ausgabefehler aufweisen. Mit bedingten Haltepunkten können Sie diese normalen Situationen überspringen und die Ausführung nur unterbrechen, wenn einige Sonderfälle auftreten, sodass wir überprüfen können, ob die Berechnungen verschiedener Variablen normal sind.

Zusammenfassen

Das Debuggen ist eine sehr wichtige Fähigkeit in der täglichen Arbeit, da neben der Entwicklung neuer Funktionen ein großer Teil der täglichen Arbeit mit der Anpassung von altem Code und der Behebung logischer Fehler unter besonderen Bedingungen verbracht wird. Kenntnisse im Debuggen können die Freude an der Arbeit erheblich steigern. Ein komplexer Fehler, der Sie mehrere Stunden lang festhält, kann leicht zu psychischer Frustration führen. Das heißt aber nicht, dass Breakpoint-Debugging ein Allheilmittel ist, das in allen Situationen anwendbar ist. Einfache Logik kann immer noch problemlos über console.log ausgeführt werden. Dieser Artikel stellt die Verwendung von Chrome Devtools und VS Code-Breakpoint-Debugging vor. Insgesamt ist VS Code eher zu empfehlen. launch.json muss nur einmal konfiguriert werden und Sie können anschließend mit einem Klick auf F5 mit dem Debuggen beginnen. Darüber hinaus können die im Artikel erwähnten Konfigurationen verschiedener launch.json-Dateien mit den von VS Code bereitgestellten Tools mit einem Klick generiert werden. Wenn Sie launch.json öffnen, wird die Schaltfläche „Konfiguration hinzufügen“ in der unteren rechten Ecke des Editors angezeigt. Klicken Sie darauf, um die Debugkonfiguration auszuwählen, die Sie hinzufügen möchten.

Damit ist dieser Artikel über grundlegende Breakpoint-Debugging-Techniken für JavaScript abgeschlossen. Weitere Inhalte zu JavaScript-Breakpoint-Debugging-Techniken finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!