Debuggen mit Visual Studio Code

  • 8 Minuten

In der vorherigen Übung haben Sie gelernt, wie wichtig es ist, Ihren Code schrittweise mit dem in Node.js bereitgestellten Debugger ausführen zu können. Für Ihre Arbeit an der Tailwind Traders-Anwendung benötigen Sie eine umfassendere Debugumgebung in Ihrer IDE (Integrated Development Environment, integrierte Entwicklungsumgebung).

Nachstehend werden Sie erfahren, wie Sie den Visual Studio Code-Debugger für die Verwendung mit Node.js konfigurieren.

Verwenden von Visual Studio Code für das Debuggen von Node.js

In Visual Studio Code greifen Sie über die Registerkarte Ausführen auf den Debugger zu.

Screenshot of Visual Studio Code debug tab.

  • Wenn Sie im Editorfenster eine .js-Datei geöffnet haben, können Sie Ausführen und debuggen und dann Node.js auswählen, um die geöffnete JavaScript-Datei direkt zu debuggen.

    Screenshot of Node.js environment selection drop-down list in Visual Studio Code.

Es gibt mehrere weitere Möglichkeiten, mit dem Debuggen in Visual Studio Code zu beginnen. Für die nächste Übung verwenden Sie eine Datei namens „launch.json“. Entwicklungsteams verwenden die Datei „launch.json“ häufig, um die Laufzeitkonfiguration anzupassen. Mit der in einer JSON-Datei angegebenen Konfiguration können Sie diese in die Quellcodeverwaltung einchecken. Über die Quellcodeverwaltung können Sie die Konfiguration dann für Ihr Team freigeben.

Steuern des Flows durch Hinzufügen von Haltepunkten

Im Gegensatz zum integrierten Node.js-Befehlszeilendebugger beginnt der Visual Studio Code-Debugger sofort mit der Ausführung Ihres Codes. Wenn das Programm schnell beendet wird, haben Sie unter Umständen keine Möglichkeit, mit dem Debugger zu interagieren. Aus diesem Grund sollten Sie vor dem Ausführen des Codes Haltepunkte hinzufügen. In der nächsten Übung fügen Sie einige Haltepunkte hinzu und entfernen sie.

Wenn Sie einen Haltepunkt in Ihrem Code hinzufügen möchten, suchen Sie die Codezeile in Ihrer JavaScript-Datei (.js), in der Sie eine Unterbrechung hinzufügen möchten. Wählen Sie als Nächstes neben der Zeilennummer für die Codeausweisung eine Stelle am linken Rand aus. Wenn der Haltepunkt hinzugefügt wird, wird neben der Zeilennummer ein roter Kreis angezeigt. Um den Haltepunkt zu entfernen, wählen Sie den roten Kreis aus.

Screenshot of a breakpoint added in the Visual Studio Code editor window.

Sie können auch das Kontextmenü (rechte Maustaste) verwenden, um einen Haltepunkt hinzuzufügen. Das Inhaltsmenü enthält die Option Bedingten Haltepunkt hinzufügen, in dem Sie eine Bedingung eingeben, um die Codeausführung zu unterbrechen. Ein bedingter Haltepunkt ist nur aktiv, wenn die angegebene Bedingung erfüllt ist.

Screenshot of setting a conditional breakpoint in Visual Studio Code.

Dieser Haltepunkt beendet die Ausführung nur, wenn der Wert von convertedValue nicht definiert ist.

Übersicht über den Visual Studio Code-Debugger

Nachdem Sie die Haltepunkte eingerichtet und Ihre App gestartet haben, werden auf dem Bildschirm neue Informationsbereiche und Steuerelemente angezeigt.

Screenshot of Visual Studio Code debugger overview.

number Name Beschreibung
1. Steuerelemente zum Starten des Debuggers Oben auf der Randleiste finden Sie die Steuerelemente zum Starten.
2. Zustand der Variablen Im Bereich Variablen wird der aktuelle Status Ihrer Variablen angezeigt.
3. Zustand der überwachten Variablen Im Bereich Überwachungselement wird der aktuelle Status Ihrer überwachten Variablen angezeigt.
4. Aktuelle Aufrufliste Unter Aufrufliste wird die aktuelle Aufrufliste angezeigt.
5. Geladene Skriptdateien Im Bereich Geladene Skriptdateien werden die bisher geladenen JavaScript-Dateien angezeigt.
6. Haltepunkte Im Bereich Haltepunkte werden alle Haltepunkte angezeigt, die Sie in Ihren Code eingefügt haben.
7. Ausführungssteuerelemente Mithilfe der folgenden Steuerelemente können Sie den Ausführungsflow Ihres Programms steuern.
8. Aktueller Ausführungsschritt Der aktuelle Ausführungsschritt ist im Editorfenster hervorgehoben.
9. Debugging-Konsole Die Debugging-Konsole kann verwendet werden, um die Anwendungskonsolenprotokolle zu visualisieren und Ausdrücke auszuwerten oder Code im aktuellen Ausführungskontext auszuführen.

Steuerelemente zum Starten des Debuggers

Oben in der Randleiste finden Sie die Steuerelemente zum Starten des Debuggers:

Screenshot of Visual Studio Code debug sidebar controls.

number Name Beschreibung
1. Starten des Debugvorgangs Starten Sie das Debuggen Ihrer Anwendung.
2. Auswählen der aktiven Startkonfiguration Wählen Sie die aktive Startkonfiguration aus.
3. Bearbeiten Sie die Datei launch.json. Bearbeiten Sie die launch.json-Datei. Erstellen Sie ggf. die JSON-Datei.
4. Öffnen der Debugging-Konsole Öffnen Sie die Debugging-Konsole, und schalten Sie die Sichtbarkeit der Bereiche „Variablen“, „Überwachungselement“, „Aufrufliste“ und „Haltepunkte“ ein.

Anzeigen und Bearbeiten des Variablenzustands

Wenn Sie die Ursache eines Programmfehlers analysieren, sollten Sie den Zustand von Variablen auf unerwartete Veränderungen untersuchen. Hierfür können Sie das Panel Variablen verwenden.

Die Variablen werden nach Geltungsbereich geordnet angezeigt:

Umfang Beschreibung
Lokal Lokale Variablen sind innerhalb des aktuellen Kontexts referenzierbar (in der Regel innerhalb der aktuellen Funktion).
Global Auf globale Variablen kann von überall in Ihrem Programm aus zugegriffen werden. Dazu gehören auch Systemobjekte aus der JavaScript-Runtime. Aus diesem Grund werden unter Umständen sehr viele Elemente in diesem Abschnitt angezeigt.
Abschluss Closure-Variablen sind Variablen, auf die nur innerhalb der aktuellen Closure zugegriffen werden kann (sofern vorhanden). Eine Closure kombiniert den lokalen Geltungsbereich einer Funktion mit dem Geltungsbereich der äußeren Funktion, zu der sie gehört.

Mögliche Aktionen sind:

  • Auffalten von Bereichen: Sie können die Geltungsbereiche und Variablen durch Klicken auf den Pfeil auffalten. Wenn Sie Objekte auffalten, werden alle in diesem Objekt definierten Eigenschaften eingeblendet.

  • Ändern von Variablenwerten: Sie können den Wert einer Variablen ganz einfach ändern, indem Sie darauf doppelklicken.

  • Einsehen von Variablen: Wenn Sie direkt im Editor-Fenster mit dem Mauszeiger auf einen Funktionsparameter oder eine Variable zeigen, können Sie den jeweiligen Wert ebenfalls sehen.

    Screenshot of variable hover during debugging.

Überwachen von Variablen

Beim Überwachen eines Variablenzustands oder verschiedener Funktionen über einen bestimmten Zeitraum hinweg kann es sehr zeitaufwendig sein, jedes Mal nach der Variablen zu suchen. An dieser Stelle können Sie das Panel Überwachung nutzen.

Screenshot of watched variables.

Klicken Sie einfach auf die Schaltfläche mit dem Plus, um den Namen der zu überwachenden Variable oder den zu überwachenden Ausdruck einzugeben. Alternativ dazu können Sie im Panel Variable aufVariablen mit der rechten Maustaste klicken und dann auf Zur Überwachung hinzufügen.

Alle Ausdrücke im Überwachungsbereich werden automatisch aktualisiert, wenn der Code ausgeführt wird.

Aufrufliste

Jedes Mal, wenn das Programm eine Funktion eingibt, wird der Aufrufliste ein Eintrag hinzugefügt. Wenn Ihre Anwendung an Komplexität zunimmt und Funktionen mehrmals innerhalb von Funktionen aufgerufen werden, können Sie den Verlauf der Funktionsaufrufe in der Aufrufliste einsehen.

Dies ist hilfreich, um die Ursache einer Ausnahme zu finden. Wenn Ihr Programm unerwartet abstürzt, wird in der Konsole häufig eine Meldung angezeigt, die der folgenden ähnelt:

/Users/learn/nodejs/index.js:22
  return value.toFixed(2);
               ^
TypeError: Cannot read property 'toFixed' of undefined
    at formatValueForDisplay (/Users/learn/nodejs/index.js:22:16)
    at printForeignValues (/Users/learn/nodejs/index.js:31:28)
    at Object.<anonymous> (/Users/learn/nodejs/index.js:39:1)
    at Module._compile (internal/modules/cjs/loader.js:956:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
    at Module.load (internal/modules/cjs/loader.js:812:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Function.Module.runMain (internal/modules/cjs/loader.js:1025:10)
    at internal/main/run_main_module.js:17:11

Die mit at [...] beginnenden Zeilen unterhalb der Fehlermeldung werden als Stapelüberwachung bezeichnet. In der Stapelüberwachung ist der Name und der Ursprung jeder Funktion aufgeführt, die aufgerufen wurde, bevor die Ausnahme auftrat. Sie kann etwas schwer zu lesen sein, da auch interne Funktionen aus der Node.js-Runtime enthalten sind.

An dieser Stelle erweist sich das Visual Studio Code-Panel Aufrufliste als hilfreich. Es filtert unerwünschte Informationen heraus, um Ihnen standardmäßig nur die relevanten Funktionen aus Ihrem eigenen Code anzuzeigen. Anschließend können Sie diese Aufrufliste entladen, um herauszufinden, wo die Ausnahme entstanden ist.

Zudem können Sie auf die Schaltfläche Frame neu starten klicken, die angezeigt wird, wenn Sie im Stapel auf einen Funktionsnamen zeigen. Die Ausführung wird bis zum Anfang dieser Funktion zurückgespult, indem das Programm an diesem Punkt neu gestartet wird.

Screenshot of the Restart frame button in the Visual Studio Code call stack panel.

Anzeigen geladener Skriptdateien

Dieses Panel zeigt alle JavaScript-Dateien an, die bisher geladen wurden. In großen Projekten kann es manchmal nützlich sein, zu überprüfen, aus welcher Datei der aktuell ausgeführte Code stammt.

Haltepunkte

Im Panel Haltepunkte können Sie alle Haltepunkte anzeigen und entfernen, die Sie im Code platziert haben. Außerdem können Sie das Halten bei abgefangenen oder nicht abgefangenen Ausnahmen aktivieren oder deaktivieren. Im Panel Haltepunkte können Sie den Programmzustand überprüfen und mithilfe der Aufrufliste die Ursache einer Ausnahme zurückverfolgen, wenn eine auftritt.

Steuern der Ausführung

Mithilfe der folgenden Steuerelemente können Sie den Ausführungsflow Ihres Programms steuern.

Screenshot of Visual Studio Code debugger execution controls.

Nachstehend werden die Steuerelemente von links nach rechts erläutert:

  • Ausführung fortfahren oder anhalten: Wenn die Ausführung angehalten wird, wird sie bis zum nächsten Breakpoint ausgeführt. Wenn das Programm ausgeführt wird, wechselt die Schaltfläche zu einer Schaltfläche zum Anhalten, die Sie verwenden können, um die Ausführung anzuhalten.
  • Überspringen: Die nächste Codeanweisung wird im aktuellen Kontext ausgeführt (wie beim Befehl next im integrierten Debugger).
  • Einzelschritt: Ähnelt der Option Prozedurschritt. Wenn die nächste Anweisung ein Funktionsaufruf ist, wird mit der ersten Codeanweisung dieser Funktion fortgefahren (wie beim Befehl step).
  • Rücksprung: Führen Sie innerhalb einer Funktion den verbleibenden Code dieser Funktion aus, und gehen Sie dann nach dem anfänglichen Funktionsaufruf zurück zur Anweisung (wie beim Befehl out).
  • Neu starten: Starten Sie das Programm von Anfang an neu.
  • Beenden: Beenden Sie die Ausführung und den Debugger.

Verwenden der Debugging-Konsole

Die Debugging-Konsole kann mithilfe der Tastenkombinationen STRG+UMSCHALT+Y (Windows, Linux) oder CMD+UMSCHALT+Y (Mac) ein- oder ausgeblendet werden. Mit der Konsole lassen sich Ihre Anwendungskonsolenprotokolle visualisieren und Ausdrücke auswerten oder Code im aktuellen Ausführungskontext ausführen, so wie mit dem Befehl exec im integrierten Node.js-Debugger.

Sie können einen JavaScript-Ausdruck in das Eingabefeld am unteren Rand der Debugging-Konsole eingeben Danach die Eingabetaste drücken, um ihn auszuwerten. Das Ergebnis wird direkt in der Konsole angezeigt.

Screenshot of Debug console.

Auf diese Weise können Sie schnell einen Variablenwert überprüfen, eine Funktion mit unterschiedlichen Werten testen oder den aktuellen Status ändern.

Hinzufügen von Protokollpunkten anstelle von „console.log“

Linter kennzeichnen console.log-Anweisungen als Fehler. Um den gleichen Effekt wie mit console.log-Anweisungen zu erzielen, verwenden Sie stattdessen Visual Studio Code-Protokollpunkte, die an der Debugging-Konsole ausgegeben werden.

Sie fügen einen Protokollpunkt hinzu, indem Sie mit der rechten Maustaste in den Bereich klicken, in dem Sie Haltepunkte hinzugefügt haben, und dann Protokollpunkt hinzufügen auswählen. Geben Sie eine Nachricht ein, die an diesem Punkt im Code angezeigt werden soll.

Screenshot of adding a logpoint in Visual Studio Code.

So wie Haltepunkte ändern auch Protokollpunkte Ihren Code in keiner Weise und werden nur während des Debuggens verwendet. So werden keine vergessenen console.log('here') mehr in die Produktion übernommen.