Debugging mit Visual Studio Code

Visual Studio Code bietet umfassende Unterstützung beim Debuggen verschiedener Arten von Anwendungen. VS Code verfügt über eine integrierte Unterstützung für das Debuggen von JavaScript, TypeScript und Node.js. Im Visual Studio Marketplace finden Sie eine große Auswahl an Debugging-Erweiterungen, um VS Code um Debugging-Unterstützung für weitere Sprachen und Laufzeitumgebungen zu ergänzen.

Dieser Artikel beschreibt die Debugging-Funktionen von VS Code und wie Sie mit dem Debuggen in VS Code beginnen können. Sie erfahren außerdem, wie Sie Copilot in VS Code nutzen können, um die Einrichtung Ihrer Debugging-Konfiguration zu beschleunigen und eine Debugging-Sitzung zu starten.

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

Benutzeroberfläche des Debuggers

Das folgende Diagramm zeigt die Hauptkomponenten der Benutzeroberfläche des Debuggers.

1. Ansicht „Ausführen und Debuggen“: Zeigt alle Informationen zum Ausführen, Debuggen und Verwalten der Debug-Konfigurationseinstellungen an.
2. Debug-Symbolleiste: Enthält Schaltflächen für die gängigsten Debugging-Aktionen.
3. Debug-Konsole: Ermöglicht das Anzeigen und Interagieren 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 (Call Stack), Haltepunkten, Variablen und Überwachungsausdrücken.
5. Menü „Ausführen“: Enthält die gängigsten Befehle zum Ausführen und Debuggen.

Vor dem Debuggen

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

   VS Code verfügt über eine 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 Sie bei der Generierung der launch.json-Datei unterstützen. Weitere Informationen finden Sie unter Copilot zum Generieren von Debugging-Konfigurationen verwenden.

3. Setzen Sie Haltepunkte in Ihrem Code.

   Ein Haltepunkt ist eine Markierung, die Sie in einer Codezeile setzen können, um den Debugger anzuweisen, die Ausführung zu unterbrechen, wenn diese Zeile erreicht wird. Sie können Haltepunkte setzen, indem Sie im Editor in den Rand neben die Zeilennummer klicken.

   Weitere Informationen zu Haltepunkten finden Sie unter Arbeiten mit Haltepunkten.

Starten einer Debugging-Sitzung

Führen Sie die folgenden Schritte aus, um eine Debugging-Sitzung in VS Code zu starten:

1. Öffnen Sie die Datei, die den Code enthält, den Sie debuggen möchten.

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) aus.

   

   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 festzulegen. Weitere Informationen zu Debug-Konfigurationen.

3. Wählen Sie den Debugger, den Sie verwenden möchten, 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, ob ein start-Skript in der package.json-Datei vorhanden ist, um den Einstiegspunkt der Anwendung zu bestimmen.

4. Wenn eine Debugging-Sitzung startet, wird das Panel DEBUG-KONSOLE angezeigt und zeigt die Debugging-Ausgabe an; zudem ändert sich die Farbe der Statusleiste (orange bei Standard-Farbdesigns).

   

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

   

Debug-Aktionen

Sobald eine Debug-Sitzung startet, erscheint die Debug-Symbolleiste oben im Fenster. Die Symbolleiste enthält Aktionen zur Steuerung des Programmablaufs der Debug-Sitzung, wie z. B. schrittweises Ausführen des Codes, Unterbrechen der Ausführung und Stoppen der Debug-Sitzung.

Die folgende Tabelle beschreibt die in der Debug-Symbolleiste verfügbaren Aktionen:

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 es Ihnen, zwischen diesen zu wechseln.

Haltepunkte

Ein Haltepunkt ist eine spezielle Markierung, die die Ausführung Ihres Codes an einem bestimmten Punkt pausiert, sodass Sie den Zustand Ihrer Anwendung an diesem Punkt untersuchen können. VS Code unterstützt verschiedene 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 am Editor-Rand werden normalerweise als rot ausgefüllte Kreise angezeigt.
• Deaktivierte Haltepunkte haben einen gefüllten grauen Kreis.
• Wenn eine Debugging-Sitzung startet, ändern sich Haltepunkte, die nicht beim Debugger registriert werden können, in einen grauen, leeren Kreis. Das Gleiche kann passieren, wenn der Quellcode bearbeitet wird, während eine Debug-Sitzung ohne Live-Edit-Unterstützung läuft.

Optional können Haltepunkte im Übersichts-Lineal (Overview Ruler) des Editors angezeigt werden, indem die Einstellung debug.showBreakpointsInOverviewRuler In VS Code öffnen In VS Code Insiders öffnen aktiviert wird.

Für eine bessere Kontrolle Ihrer Haltepunkte nutzen Sie den Bereich HALTEPUNKTE in der Ansicht Ausführen und Debuggen. Dieser Bereich listet alle Haltepunkte in Ihrem Code auf und bietet zusätzliche Aktionen zu deren Verwaltung.

Haltepunkt-Typen

Bedingte Haltepunkte

Ein leistungsstarkes Debugging-Feature von VS Code ist die Möglichkeit, Bedingungen basierend auf Ausdrücken, Trefferzahlen (Hit Counts) oder einer Kombination aus beidem festzulegen.

• Ausdrucksbedingung: Der Haltepunkt wird ausgelöst, sobald der Ausdruck zu true ausgewertet wird.
• Trefferzahl (Hit Count): Die Trefferzahl steuert, wie oft ein Haltepunkt erreicht werden muss, bevor er die Ausführung unterbricht. Ob eine Trefferzahl unterstützt wird und die exakte Syntax des Ausdrucks können je nach Debugger-Erweiterung variieren.
• Warten auf Haltepunkt: Der Haltepunkt wird aktiviert, wenn ein anderer Haltepunkt erreicht wird (ausgelöster Haltepunkt).

Einen bedingten Haltepunkt hinzufügen:

1. Einen bedingten Haltepunkt erstellen

   • Rechtsklicken Sie auf 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 den Typ der Bedingung, die Sie festlegen möchten (Ausdruck, Trefferzahl oder Warten auf Haltepunkt).

   

Einer Bedingung zu einem bestehenden Haltepunkt hinzufügen:

1. Einen bestehenden Haltepunkt bearbeiten

   • Rechtsklicken Sie auf den Haltepunkt am Editor-Rand und wählen Sie Haltepunkt bearbeiten.
   • Wählen Sie das Stift-Symbol neben einem bestehenden Haltepunkt im Bereich HALTEPUNKTE der Ansicht Ausführen und Debuggen.

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

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 (Triggered Breakpoint) ist eine Art bedingter Haltepunkt, der erst aktiviert wird, nachdem ein anderer Haltepunkt erreicht wurde. Dies ist nützlich bei der Diagnose von Fehlern, 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 erreicht, wenn die Ausführung die Spalte erreicht, die mit dem Inline-Haltepunkt verknüpft ist. Dies ist nützlich beim Debuggen von minifiziertem Code, der mehrere Anweisungen in einer einzigen Zeile enthält.

Ein Inline-Haltepunkt kann über ⇧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.

Funktions-Haltepunkte

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

Um einen Funktions-Haltepunkt zu erstellen, wählen Sie die Schaltfläche + in der Kopfzeile des Bereichs HALTEPUNKTE und geben Sie den Funktionsnamen ein. Funktions-Haltepunkte werden mit einem roten Dreieck im Bereich HALTEPUNKTE angezeigt.

Daten-Haltepunkte

Wenn ein Debugger Daten-Haltepunkte unterstützt, können diese über das Kontextmenü in der Ansicht VARIABLEN gesetzt werden. Die Befehle Bei Wertänderung/Lesen/Zugriff anhalten fügen einen Daten-Haltepunkt hinzu, der ausgelöst wird, wenn der Wert der zugrunde liegenden Variable geändert/gelesen/aufgerufen wird. Daten-Haltepunkte werden mit einem roten Sechseck im Bereich HALTEPUNKTE angezeigt.

Log-Haltepunkte

Ein Logpoint ist eine Variante eines Haltepunkts, der den Debugger nicht unterbricht, sondern stattdessen eine Nachricht in die Debug-Konsole schreibt. Logpoints sparen Zeit, da Sie keine Logging-Anweisungen in Ihrem Code hinzufügen oder entfernen müssen.

Ein Logpoint wird durch ein rautenförmiges Symbol dargestellt. Log-Nachrichten sind reiner Text, können aber auch Ausdrücke in geschweiften Klammern ('{}') enthalten, die 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 In VS Code öffnen In VS Code Insiders öffnen konfigurieren, um einen Logpoint beim Drücken der mittleren Maustaste im Editor-Rand umzuschalten.

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

Dateninspektion

Ansicht „Ausführen und Debuggen“

Während einer Debugging-Sitzung können Sie Variablen und Ausdrücke im Bereich VARIABLEN der Ansicht Ausführen und Debuggen untersuchen oder indem Sie im Editor mit der Maus über den Quellcode fahren. Variablenwerte und die Auswertung von Ausdrücken beziehen sich immer auf den ausgewählten Stack-Frame im Bereich AUFRUFSTAPEL.

Um den Wert einer Variable während der Debugging-Sitzung zu ändern, rechtsklicken Sie auf die Variable im Bereich 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 Als Ausdruck kopieren, um einen Ausdruck zum Zugriff auf die Variable zu kopieren. Diesen Ausdruck können Sie anschließend im Bereich ÜBERWACHUNG verwenden.

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

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

Debug-Konsole REPL

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

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

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

Multi-Target-Debugging

Für komplexe Szenarien, die mehr als einen Prozess umfassen (z. B. einen Client und einen Server), unterstützt VS Code Multi-Target-Debugging. Nachdem Sie eine erste Debug-Sitzung gestartet haben, können Sie eine weitere starten. Sobald eine zweite Sitzung aktiv ist, wechselt die VS Code-Benutzeroberfläche in den Multi-Target-Modus.

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

  

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

  

• Debug-Aktionen (z. B. alle Aktionen in der Debug-Symbolleiste) werden auf der aktiven Sitzung ausgeführt. Die aktive Sitzung kann entweder über das Dropdown-Menü in der Debug-Symbolleiste oder durch Auswahl eines anderen Elements in der Ansicht AUFRUFSTAPEL gewechselt werden.

Remote-Debugging

VS Code unterstützt nicht für alle Sprachen integriertes Remote-Debugging. Remote-Debugging ist eine Funktion der Debug-Erweiterung, die Sie verwenden. Bitte konsultieren Sie die Seite der Erweiterung im Marketplace für Unterstützung und Details.

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

Debugger-Erweiterungen

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

Für das Debuggen anderer Sprachen und Laufzeitumgebungen (einschließlich PHP, Ruby, Go, C#, Python, C++, PowerShell und vielen anderen), suchen Sie nach Debugger-Erweiterungen im Visual Studio Marketplace oder wählen Sie Weitere Debugger installieren im obersten 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, werfen Sie einen Blick auf:

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

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

• Erste Schritte beim Debuggen in VS Code - Lernen Sie das Debuggen in VS Code kennen.

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

• Debugging und Fehlerbehebung mit Copilot
• Copilot-Spickzettel für Debugging und Fehlerbehebung

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

• C++
• Python
• Java

Um mehr über die Aufgaben-Ausführungsunterstützung (Task Running) 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 eine eigene Debugger-Erweiterung zu schreiben, besuchen Sie:

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

Häufig gestellte Fragen

Welche Debugging-Szenarien werden unterstützt?

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