So debuggen Sie Node.js-Anwendungen in Visual Studio Code

Das Debuggen Ihrer Node.js-Anwendung in Visual Studio Code selbst ist möglich und unkompliziert. Der VS Code-Editor verfügt über einen integrierten Debugger, der jede Anwendung debuggen kann, die auf die Node.js-Laufzeit abzielt. Das bedeutet, dass Sie JavaScript oder jede andere Sprache debuggen können, die dazu kompiliert wird (z. B. TypeScript).

Dieser Artikel führt Sie durch die Schritte zum Debuggen Ihrer Node.js-Anwendung in VS Code. Sie erfahren, wie Sie eine Debug-Sitzung starten, Breakpoints einfügen, einen externen Prozess anhängen und TypeScript-Code mithilfe von Quellzuordnungen debuggen.

Was Sie für den Einstieg benötigen

Bevor Sie beginnen, installieren Sie sowohl Node.js als auch VS Code auf Ihrem lokalen Computer. Die neueste Version von Node.js ist auf der verfügbar Node.js offizielle Website. Laden Sie in ähnlicher Weise für Visual Studio Code die neueste Version von der herunter

VS-Code Webseite. Für Anweisungen auf wie man VS Code unter Windows einrichtet, lesen Sie unsere Einrichtungsanleitung.

Außerdem benötigen Sie ein Node.js-Projekt. Sie können eine einfache Node.js-Anwendung von Grund auf neu erstellen oder verwenden Sie eine vorhandene Anwendung.

Der Debugging-Prozess in VS Code

Das Starten einer Debug-Sitzung im VS Code-Editor ist ziemlich einfach. Öffnen Sie die Datei mit VS Code und klicken Sie auf die Ausführen und Debuggen Symbol in der Seitenleiste (oder drücken Sie Strg + Umschalt + D auf Ihrer Tastatur). Klicken Sie anschließend auf die Ausführen und Debuggen Schaltfläche, um den Vorgang zu starten.

Standardmäßig versucht Node.js, die Debug-Umgebung Ihres Projekts herauszufinden. Wenn die automatische Erkennung jedoch nicht erfolgreich ist, werden Sie aufgefordert, die richtige Umgebung auszuwählen. Für dieses Tutorial ist diese Umgebung Node.js.

Nachdem Sie die Umgebung ausgewählt haben, aktiviert VS Code den Debugger und hängt ihn an den Prozess an. Sie können Ihre Ausgabe in der sehen DEBUG-KONSOLE. Mithilfe der Debug-Symbolleiste oben können Sie den Code durchlaufen, die Ausführung anhalten oder die Sitzung beenden.

Sie haben auch die Möglichkeit, eine Konfigurationsdatei zu erstellen. Der launch.json Mit der Datei können Sie Debug-Details konfigurieren und einrichten. Wenn Ihr Skript ein Argument erfordert, geben Sie diese Argumente in der an launch.json Datei. Für jede Konfiguration können mehrere Optionen festgelegt werden:

{ 
"Ausführung": "0.2.0", 
"Konfigurationen": [ 
 { "Typ": "Knoten", 
"Anfrage": "Start", 
"Name": "Startprogramm", 
"skipFiles": [ "/**" ], 
"Programm": "${workspaceFolder}\\index.js"
 } 
 ]
}

Sie werden auch fünf Bereiche auf der linken Seite des Editors bemerken. Diese Platten sind VARIABLEN, BETRACHTEN, AUFRUFSTACK, GELADENE SKRIPTE, Und HALTPUNKTE:

Wenn Sie mit der Einrichtung der Konfiguration fertig sind, wählen Sie das Programm über das Konfigurationsmenü aus und führen Sie es aus.

Hängen Sie einen externen Prozess an

Eine andere Methode zum Einrichten einer Node.js-Debugging-Sitzung ist das Anhängen eines externen Prozesses. Starten Sie das Programm mit folgendem Befehl:

node --inspect index.js

Fügen Sie die ein -brk Flagge nach --prüfen wenn Sie es anhängen möchten, bevor das Programm ausgeführt wird.

Öffnen Sie als Nächstes die Prozessauswahl in VS Code. Hier werden alle in der Node.js-Umgebung verfügbaren Prozesse aufgelistet. Um die Auswahl zu öffnen, drücken Sie Strg + Umschalt + P und finde die Debug: An Node.js-Befehl anhängen.

Klicken Sie auf den Befehl und wählen Sie die richtige Option, um den Debug-Prozess zu starten.

Haltepunkt erstellen

Wenn Sie an bestimmten Stellen in Ihrem Programm anhalten möchten, um den Code zu inspizieren, setzen Sie dort Haltepunkte. Sie können Haltepunkte fast überall in Ihrem Code setzen. Dazu gehören Variablendeklarationen, Ausdrücke und Kommentare. Aber Sie können keine Breakpoints in Funktionsdeklarationen setzen.

Das Erstellen eines Haltepunkts ist ziemlich einfach. Wenn Sie Ihre Maus auf die linke Seite der Zeilennummern bewegen, erscheint ein roter Kreis auf jeder Zeile. Identifizieren Sie die Zeilennummer in Ihrem Code, an der Sie den Haltepunkt einfügen möchten. Klicken Sie dann auf diese Zeile, um den Haltepunkt hinzuzufügen:

Im HALTPUNKTE Im Bereich finden Sie alle Haltepunkte, die in Ihrem Projekt aktiviert sind. Hier verwalten, bearbeiten und deaktivieren Sie Haltepunkte. Sie können den Code auch anhalten, wenn eine Ausnahme ausgelöst wird oder wenn Ausnahmen nicht abgefangen wurden. Auf diese Weise können Sie das Problem untersuchen, bevor der Prozess beendet wird.

Sehen wir uns Breakpoints in Aktion an. Drücke den Start Symbol, um die Debugging-Sitzung zu starten. Das Programm hält am ersten Haltepunkt an und liefert den Wert zur Überprüfung:

Sie können auf die klicken Weitermachen Symbol (oder drücken Sie F5), um das Programm zum nächsten Haltepunkt zu verschieben. Dies wird fortgesetzt, bis Sie am Ende des Programms ankommen.

Debuggen von TypeScript mit Source Maps

Da Typescript immer beliebter wird, wird die Anzahl der in TypeScript geschriebenen Node.js-Projekte zwangsläufig zunehmen. Glücklicherweise können Sie mit VS Code auch TypeScript-basierte Projekte debuggen.

Erstellen Sie zunächst eine tsconfig.json Datei im Stammverzeichnis Ihres Projekts (falls noch nicht erstellt) und Quellzuordnungen aktivieren:

{ "CompilerOptionen": { "sourceMaps": WAHR }}

Hängen Sie als Nächstes den laufenden Prozess an und legen Sie die Haltepunkte in Ihrer TypeScript-Datei fest. Visual Studio Code findet die Quellzuordnungen und verwendet sie.

Sie können VS Code explizit mitteilen, wo die Quellkarten zu finden sind. Fügen Sie dazu eine hinzu outFiles -Attribut in Ihrer Startkonfigurationsdatei und verweisen Sie es auf den genauen Speicherort Ihrer Quellkarten:

{ 
"Ausführung": "0.2.0", 
"Konfigurationen": [ { 
"Typ": "Knoten", 
"Anfrage": "Start", 
"Name": "Startprogramm", 
"skipFiles": [ "/**" ], 
"Programm": "${workspaceFolder}\\index.js", 
"outFiles": "${workspaceFolder}\\index.js", 
 } 
 ]
}

Wenn Sie verwenden ts-Knoten Um Ihr Projekt ohne Build-Schritt auszuführen, verwenden Sie dies anstelle der obigen Konfiguration:

{ 
"Ausführung": "0.2.0", 
"Konfigurationen": [ { 
"Typ": "pwa-Knoten", 
"Anfrage": "Start", 
"Name": "Server starten", 
"skipFiles": [ "/**" ], 
"runtimeArgs": [ "-R", "ts-Knoten/Register" ], 
"Argumente": [ "${workspaceFolder}/src/server.ts" ] 
 }]
}

Da es kein program-Attribut gibt, runtime Argumente registriert ts-Knoten als Handler für TypeScript-Dateien. Das erste Argument zu Argumente ist die Eingangsdatei für das Programm. Jetzt können Sie Ihre Debugging-Sitzung starten. Wenn Sie mit Vanilla JavaScript oder einem Front-End-Framework entwickeln, können Sie das auch Debuggen Sie den JavaScript-Code im Browser.

Weitere Features in Visual Studio Code

Visual Studio Code ist ein leistungsstarker Quellcode-Editor mit erstaunlichen Funktionen. Wir haben das integrierte Debugger-Tool von VS Code behandelt. Wir haben auch gezeigt, wie Sie damit Ihre Node.js-Anwendung debuggen können.

Aber es gibt viele andere nützliche Funktionen in VS Code. Während Sie mit einigen von ihnen vielleicht vertraut sind, sind einige möglicherweise völlig neu für Sie. In diesem Fall könnte es Sie interessieren, mehr über diese Funktionen und ihre Verwendung zu erfahren.