Debuggen mit Visual Studio Code

Visual Studio Code bietet umfassende Unterstützung für das Debuggen verschiedener Anwendungstypen. VS Code verfügt über integrierte Unterstützung für das Debuggen von JavaScript, TypeScript und Node.js. Der Visual Studio Marketplace bietet eine große Auswahl an Debugging-Erweiterungen, um VS Code um Debugging-Unterstützung für andere Sprachen und Laufzeiten zu erweitern.

Dieser Artikel beschreibt die Debugging-Funktionen von VS Code und wie Sie mit dem Debuggen in VS Code beginnen können. Sie erfahren auch, wie Sie Copilot in VS Code verwenden können, um die Einrichtung Ihrer Debugging-Konfiguration und den Start einer Debugging-Sitzung zu beschleunigen.

Das folgende Video zeigt, wie Sie mit dem Debuggen in VS Code beginnen können.

Debugger-Benutzeroberfläche

Das folgende Diagramm zeigt die Hauptkomponenten der Debugger-Benutzeroberfläche

1. Ausführen und Debuggen-Ansicht: Zeigt alle Informationen an, die sich auf die Ausführung, das Debuggen und die Verwaltung von Debug-Konfigurationseinstellungen beziehen.
2. Debug-Symbolleiste: Enthält Schaltflächen für die gängigsten Debug-Aktionen.
3. Debug-Konsole: Ermöglicht die Anzeige und Interaktion mit der Ausgabe Ihres Codes, der im Debugger ausgeführt wird.
4. Debug-Seitenleiste: Ermöglicht während einer Debug-Sitzung die Interaktion mit dem Aufrufstapel, Haltepunkten, Variablen und Überwachungsvariablen.
5. Ausführen-Menü: Enthält die gängigsten Befehle zum Ausführen und Debuggen.

Bevor Sie mit dem Debuggen beginnen

1. Installieren Sie eine Debugging-Erweiterung für Ihre Sprache oder Laufzeit aus dem Visual Studio Marketplace.

   VS Code verfügt über integrierte Unterstützung für das Debuggen von JavaScript, TypeScript und Node.js.

2. Definieren Sie eine Debugging-Konfiguration für Ihr Projekt.

   Bei einfachen Anwendungen versucht VS Code, die aktuell aktive Datei auszuführen und zu debuggen. Für komplexere Anwendungen oder Debugging-Szenarien müssen Sie eine launch.json-Datei erstellen, um die Debugger-Konfiguration anzugeben. Erhalten Sie weitere Informationen zum Erstellen einer Debug-Konfiguration.

   Tipp

   Copilot in VS Code kann Ihnen beim Generieren der launch.json-Datei helfen. Weitere Informationen finden Sie unter Verwenden von Copilot zum Generieren von Debugging-Konfigurationen.

3. Setzen Sie Haltepunkte in Ihrem Code.

   Ein Haltepunkt ist eine Markierung, die Sie an einer Codezeile setzen können, um dem Debugger mitzuteilen, dass die Ausführung an dieser Zeile angehalten werden soll. Sie können Haltepunkte setzen, indem Sie im Rand des Editors neben der Zeilennummer klicken.

   Weitere Informationen zu Haltepunkten finden Sie unter Arbeiten mit Haltepunkten.

Starten einer Debugging-Sitzung

Um eine Debugging-Sitzung in VS Code zu starten, führen Sie die folgenden Schritte aus

1. Öffnen Sie die Datei, die den zu debuggenden Code enthält.

2. Starten Sie eine Debugging-Sitzung mit der Taste F5 oder wählen Sie Ausführen und Debuggen in der Ansicht Ausführen und Debuggen (workbench.view.debug).

   

   Für komplexere Debugging-Szenarien, wie das Anhängen an einen laufenden Prozess, müssen Sie eine launch.json-Datei erstellen, um die Debugger-Konfiguration anzugeben. Erhalten Sie weitere Informationen zu Debug-Konfigurationen.

3. Wählen Sie den gewünschten Debugger aus der Liste der verfügbaren Debugger aus.

   VS Code versucht, die aktuell aktive Datei auszuführen und zu debuggen. Für Node.js prüft VS Code auf ein start-Skript in der package.json-Datei, um den Einstiegspunkt der Anwendung zu ermitteln.

4. Wenn eine Debugging-Sitzung beginnt, wird das Panel DEBUG-KONSOLE angezeigt und zeigt Debugging-Ausgaben an, und die Statusleiste ändert ihre Farbe (orange für Standardfarbthemen).

   

5. Das Debug-Status in der Statusleiste zeigt die aktive Debug-Konfiguration. Wählen Sie den Debug-Status aus, um die aktive Startkonfiguration zu ändern und mit dem Debuggen zu beginnen, ohne die Ansicht Ausführen und Debuggen öffnen zu müssen.

   

Debug-Aktionen

Sobald eine Debug-Sitzung gestartet ist, erscheint die Debug-Symbolleiste am oberen Rand des Fensters. Die Symbolleiste enthält Aktionen zur Steuerung des Ablaufs der Debug-Sitzung, wie z. B. das schrittweise Durchgehen von Code, das Anhalten der Ausführung und das Beenden der Debug-Sitzung.

Die folgende Tabelle beschreibt die Aktionen, die in der Debug-Symbolleiste verfügbar sind

Wenn Ihre Debugging-Sitzungen mehrere Ziele umfassen (z. B. einen Client und einen Server), zeigt die Debug-Symbolleiste die Liste der Sitzungen an und ermöglicht Ihnen den Wechsel zwischen ihnen.

Haltepunkte

Ein Haltepunkt ist eine spezielle Markierung, die die Ausführung Ihres Codes an einem bestimmten Punkt unterbricht, damit Sie den Zustand Ihrer Anwendung an diesem Punkt untersuchen können. VS Code unterstützt mehrere Arten von Haltepunkten.

Haltepunkte setzen

Um einen Haltepunkt zu setzen oder zu entfernen, klicken Sie auf den Editor-Rand oder verwenden Sie F9 in der aktuellen Zeile.

• Haltepunkte im Editor-Rand werden normalerweise als rote gefüllte Kreise angezeigt.
• Deaktivierte Haltepunkte haben einen gefüllten grauen Kreis.
• Wenn eine Debugging-Sitzung beginnt, ändern sich Haltepunkte, die nicht beim Debugger registriert werden können, in einen grauen hohlen Kreis. Dasselbe kann passieren, wenn die Quelle während einer Debug-Sitzung ohne Live-Edit-Unterstützung bearbeitet wird.

Optional können Haltepunkte in der Übersichtsleiste des Editors angezeigt werden, indem die Einstellung debug.showBreakpointsInOverviewRuler aktiviert wird.

Für mehr Kontrolle über Ihre Haltepunkte verwenden Sie den Abschnitt HALTEPUNKTE in der Ansicht Ausführen und Debuggen. Dieser Abschnitt listet alle Haltepunkte in Ihrem Code auf und bietet zusätzliche Aktionen zur Verwaltung.

Arten von Haltepunkten

Bedingte Haltepunkte

Eine leistungsstarke Funktion des VS Code-Debuggens ist die Möglichkeit, Bedingungen basierend auf Ausdrücken, Trefferzahlen oder einer Kombination aus beidem festzulegen.

• Ausdrucksbedingung: Der Haltepunkt wird getroffen, wenn der Ausdruck zu true ausgewertet wird.
• Trefferzahl: Die Trefferzahl bestimmt, wie oft ein Haltepunkt getroffen werden muss, bevor die Ausführung unterbrochen wird. Ob eine Trefferzahl beachtet wird und die genaue Syntax des Ausdrucks kann je nach Debugger-Erweiterung variieren.
• Auf Haltepunkt warten: Der Haltepunkt wird aktiviert, wenn ein anderer Haltepunkt getroffen wird (ausgelöster Haltepunkt).

So fügen Sie einen bedingten Haltepunkt hinzu

1. Einen bedingten Haltepunkt erstellen

   • Klicken Sie mit der rechten Maustaste in den Editor-Rand und wählen Sie Bedingten Haltepunkt hinzufügen.
   • Verwenden Sie den Befehl Bedingten Haltepunkt hinzufügen in der Befehlspalette (⇧⌘P (Windows, Linux Ctrl+Shift+P)).

2. Wählen Sie die Art der Bedingung aus, die Sie festlegen möchten (Ausdruck, Trefferzahl oder auf Haltepunkt warten).

   

So fügen Sie einem vorhandenen Haltepunkt eine Bedingung hinzu

1. Einen vorhandenen Haltepunkt bearbeiten

   • Klicken Sie mit der rechten Maustaste auf den Haltepunkt im Editor-Rand und wählen Sie Haltepunkt bearbeiten.
   • Wählen Sie das Stiftsymbol neben einem vorhandenen Haltepunkt im Abschnitt HALTEPUNKTE der Ansicht Ausführen und Debuggen.

2. Bearbeiten Sie die Bedingung (Ausdruck, Trefferzahl oder auf Haltepunkt warten).

Wenn ein Debugger keine bedingten Haltepunkte unterstützt, sind die Aktionen Bedingten Haltepunkt hinzufügen und Bedingung bearbeiten nicht verfügbar.

Ausgelöste Haltepunkte

Ein ausgelöster Haltepunkt ist eine Art bedingter Haltepunkt, der aktiviert wird, sobald ein anderer Haltepunkt getroffen wird. Sie können nützlich sein, um Fehlerfälle im Code zu diagnostizieren, die nur nach einer bestimmten Vorbedingung auftreten.

Ausgelöste Haltepunkte können durch Rechtsklick auf den Glyph-Rand gesetzt werden, indem Ausgelösten Haltepunkt hinzufügen ausgewählt und dann gewählt wird, welcher andere Haltepunkt den Haltepunkt aktiviert.

Inline-Haltepunkte

Inline-Haltepunkte werden nur dann getroffen, wenn die Ausführung die Spalte erreicht, die dem Inline-Haltepunkt zugeordnet ist. Dies ist nützlich beim Debuggen von minimiertem Code, der mehrere Anweisungen in einer einzigen Zeile enthält.

Ein Inline-Haltepunkt kann mit ⇧F9 (Windows, Linux Shift+F9) oder über das Kontextmenü während einer Debug-Sitzung gesetzt werden. Inline-Haltepunkte werden inline im Editor angezeigt.

Inline-Haltepunkte können auch Bedingungen haben. Das Bearbeiten mehrerer Haltepunkte in einer Zeile ist über das Kontextmenü im linken Rand des Editors möglich.

Funktionshaltepunkte

Anstatt Haltepunkte direkt im Quellcode zu platzieren, kann ein Debugger das Erstellen von Haltepunkten durch Angabe eines Funktionsnamens unterstützen. Dies ist nützlich in Situationen, in denen keine Quelle verfügbar ist, aber ein Funktionsname bekannt ist.

Um einen Funktionshaltepunkt zu erstellen, wählen Sie die Schaltfläche + im Kopf des Abschnitts HALTEPUNKTE und geben Sie den Funktionsnamen ein. Funktionshaltepunkte werden im Abschnitt HALTEPUNKTE mit einem roten Dreieck angezeigt.

Datenhaltepunkte

Wenn ein Debugger Datenhaltepunkte unterstützt, können diese aus dem Kontextmenü in der Ansicht VARIABLEN gesetzt werden. Die Befehle Wertänderung/Lesen/Zugriff unterbrechen fügen einen Datenhaltepunkt hinzu, der getroffen wird, wenn sich der Wert der zugrunde liegenden Variablen ändert/gelesen/zugegriffen wird. Datenhaltepunkte werden im Abschnitt HALTEPUNKTE mit einem roten Sechseck angezeigt.

Log-Haltepunkte

Ein Logpoint ist eine Variante eines Haltepunkts, die nicht in den Debugger eingreift, sondern stattdessen eine Nachricht in die Debug-Konsole protokolliert. Logpoints können Ihnen Zeit sparen, indem Sie nicht ständig Protokollierungsanweisungen in Ihrem Code hinzufügen und entfernen müssen.

Ein Logpoint wird durch ein rautenförmiges Symbol dargestellt. Log-Nachrichten sind reiner Text, können aber auch Ausdrücke enthalten, die in geschweiften Klammern ('{}') ausgewertet werden.

Um einen Logpoint hinzuzufügen, klicken Sie mit der rechten Maustaste in den linken Rand des Editors und wählen Sie Logpoint hinzufügen oder verwenden Sie den Befehl Debug: Logpoint hinzufügen... in der Befehlspalette (⇧⌘P (Windows, Linux Ctrl+Shift+P)). Sie können auch die Einstellung debug.gutterMiddleClickAction konfigurieren, um einen Logpoint durch Drücken der mittleren Maustaste im Editor-Rand umzuschalten.

Genau wie normale Haltepunkte können Logpoints aktiviert oder deaktiviert und auch durch eine Bedingung und/oder Trefferzahl gesteuert werden.

Dateninspektion

Ausführen und Debuggen-Ansicht

Während einer Debugging-Sitzung können Sie Variablen und Ausdrücke im Abschnitt VARIABLEN der Ansicht Ausführen und Debuggen oder durch Überfahren mit der Maus in der Quelle im Editor untersuchen. Variablenwerte und Ausdrucksauswertungen sind relativ zum ausgewählten Stack-Frame im Abschnitt AUFRUFSTAPEL.

Um den Wert einer Variable während der Debugging-Sitzung zu ändern, klicken Sie mit der rechten Maustaste auf die Variable im Abschnitt VARIABLEN und wählen Sie Wert festlegen (Enter (Windows, Linux F2)).

Zusätzlich können Sie die Aktion Wert kopieren verwenden, um den Wert der Variable zu kopieren, oder die Aktion Als Ausdruck kopieren, um einen Ausdruck zum Zugriff auf die Variable zu kopieren. Sie können diesen Ausdruck dann im Abschnitt ÜBERWACHEN verwenden.

Variablen und Ausdrücke können auch im Abschnitt ÜBERWACHEN der Ansicht Ausführen und Debuggen ausgewertet und überwacht werden.

Um Variablen nach Namen oder Wert zu filtern, verwenden Sie die Tastenkombination ⌥⌘F (Windows, Linux Ctrl+Alt+F), während der Fokus auf dem Abschnitt VARIABLEN liegt, und geben Sie einen Suchbegriff ein.

Debug-Konsole REPL

Ausdrücke können mit der Funktion Debug-Konsole REPL (Read-Eval-Print Loop) ausgewertet werden. Um die Debug-Konsole zu öffnen, verwenden Sie die Aktion Debug-Konsole oben im Debug-Bereich oder verwenden Sie den Befehl Ansicht: Debug-Konsole (⇧⌘Y (Windows, Linux Ctrl+Shift+Y)).

Ausdrücke werden ausgewertet, nachdem Sie Enter gedrückt haben, und die Debug-Konsole REPL zeigt Vorschläge an, während Sie tippen. Wenn Sie mehrere Zeilen eingeben müssen, verwenden Sie Shift+Enter zwischen den Zeilen und senden Sie dann alle Zeilen zur Auswertung mit Enter.

Die Eingabe der Debug-Konsole verwendet den Modus des aktiven Editors, was bedeutet, dass die Eingabe der Debug-Konsole Syntaxfärbung, Einrückung, automatisches Schließen von Anführungszeichen und andere Sprachfunktionen unterstützt.

Mehrere Ziele debuggen

Für komplexe Szenarien, die mehr als einen Prozess umfassen (z. B. einen Client und einen Server), unterstützt VS Code das Debuggen mehrerer Ziele. Nachdem Sie eine erste Debug-Sitzung gestartet haben, können Sie eine weitere Debug-Sitzung starten. Sobald eine zweite Sitzung gestartet ist und läuft, wechselt die VS Code-Benutzeroberfläche in den Mehrfachzielmodus.

• Die einzelnen Sitzungen werden nun als oberste Elemente in der Ansicht AUFRUFSTAPEL angezeigt.

  

• Die Debug-Symbolleiste zeigt die aktuell aktive Sitzung an (und alle anderen Sitzungen sind in einem Dropdown-Menü verfügbar).

  

• Debug-Aktionen (z. B. alle Aktionen in der Debug-Symbolleiste) werden auf die aktive Sitzung angewendet. Die aktive Sitzung kann entweder durch Verwendung des Dropdown-Menüs in der Debug-Symbolleiste oder durch Auswahl eines anderen Elements in der Ansicht AUFRUFSTAPEL geändert werden.

Remote-Debugging

VS Code unterstützt nicht standardmäßig Remote-Debugging für alle Sprachen. Remote-Debugging ist eine Funktion der von Ihnen verwendeten Debugger-Erweiterung. Konsultieren Sie die Erweiterungsseite im Marketplace, um Unterstützung und Details zu erhalten.

Es gibt jedoch eine Ausnahme: Der im Lieferumfang von VS Code enthaltene Node.js-Debugger unterstützt Remote-Debugging. Weitere Informationen finden Sie unter Node.js Debugging.

Debugger-Erweiterungen

VS Code bietet integrierte Debugging-Unterstützung für die Node.js-Laufzeit und kann JavaScript, TypeScript oder jede andere Sprache debuggen, die nach JavaScript transpiliert wird.

Für das Debuggen anderer Sprachen und Laufzeiten (einschließlich PHP, Ruby, Go, C#, Python, C++, PowerShell und viele andere) suchen Sie nach Debuggers-Erweiterungen im Visual Studio Marketplace oder wählen Sie Zusätzliche Debugger installieren im übergeordneten Menü Ausführen.

Dies sind einige beliebte Erweiterungen, die Debugging-Unterstützung enthalten

Nächste Schritte

Um mehr über die Node.js-Debugging-Unterstützung von VS Code zu erfahren, schauen Sie sich an

• Node.js - Beschreibt den Node.js-Debugger, der in VS Code enthalten ist.
• TypeScript - Der Node.js-Debugger unterstützt auch TypeScript-Debugging.

Um ein Tutorial zu den Grundlagen des Debuggens zu sehen, schauen Sie sich dieses Video an

• Erste Schritte mit dem Debuggen in VS Code - Erfahren Sie mehr über das Debuggen in VS Code.

Um mehr über Copilot und KI-gestütztes Debuggen in VS Code zu erfahren

• Debuggen und Beheben von Problemen mit Copilot
• Copilot-Spickzettel zum Debuggen und Beheben von Problemen

Um mehr über die Debugging-Unterstützung für andere Programmiersprachen über VS Code-Erweiterungen zu erfahren

• C++
• Python
• Java

Um mehr über die Task-Ausführungsunterstützung von VS Code zu erfahren, gehen Sie zu

• Aufgaben - Beschreibt, wie Aufgaben mit Gulp, Grunt und Jake ausgeführt werden und wie Fehler und Warnungen angezeigt werden.

Um Ihre eigene Debugger-Erweiterung zu schreiben, besuchen Sie

• Debugger-Erweiterung - Verwendet ein Mock-Beispiel, um die Schritte zu veranschaulichen, die zur Erstellung einer VS Code-Debug-Erweiterung erforderlich sind.

Häufig gestellte Fragen

Welche Debugging-Szenarien werden unterstützt?

Das Debuggen von auf Node.js basierenden Anwendungen wird mit VS Code unter Linux, macOS und Windows direkt unterstützt. Viele andere Szenarien werden durch VS Code-Erweiterungen unterstützt, die im Marketplace verfügbar sind.