TypeScript debuggen

Visual Studio Code unterstützt das Debugging von TypeScript über den integrierten Node.js-Debugger sowie den Edge- und Chrome-Debugger.

Unterstützung für JavaScript-Source-Maps

Das TypeScript-Debugging unterstützt JavaScript-Source-Maps. Um Source-Maps für Ihre TypeScript-Dateien zu generieren, kompilieren Sie mit der Option --sourcemap oder setzen Sie die Eigenschaft sourceMap in der Datei tsconfig.json auf true.

In-Line-Source-Maps (eine Source-Map, bei der der Inhalt als Data-URL statt in einer separaten Datei gespeichert wird) werden ebenfalls unterstützt, obwohl In-Line-Quellcode noch nicht unterstützt wird.

Ein einfaches Beispiel für Source-Maps in der Praxis finden Sie im TypeScript-Tutorial. Es zeigt das Debugging einer einfachen "Hello World"-Node.js-Anwendung unter Verwendung der folgenden tsconfig.json und der Standard-Node.js-Debugkonfiguration von VS Code.

{
  "compilerOptions": {
    "target": "ES5",
    "module": "CommonJS",
    "outDir": "out",
    "sourceMap": true
  }
}

Für fortgeschrittene Debugging-Szenarien können Sie Ihre eigene Debugkonfigurationsdatei launch.json erstellen. Um die Standardkonfiguration zu sehen, gehen Sie zur Ansicht Ausführen und Debuggen (⇧⌘D (Windows, Linux Ctrl+Shift+D)) und wählen Sie den Link launch.json-Datei erstellen.

Dadurch wird eine launch.json-Datei in einem .vscode-Ordner mit den in Ihrem Projekt erkannten Standardwerten erstellt.

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/helloworld.ts",
      "preLaunchTask": "tsc: build - tsconfig.json",
      "outFiles": ["${workspaceFolder}/out/**/*.js"]
    }
  ]
}

VS Code hat das zu startende Programm helloworld.ts bestimmt, den Build als preLaunchTask hinzugefügt und dem Debugger mitgeteilt, wo die generierten JavaScript-Dateien zu finden sind.

Es gibt vollständige IntelliSense-Unterstützung mit Vorschlägen und Informationen für launch.json, damit Sie andere Debugkonfigurationsoptionen kennenlernen können. Sie können auch neue Debugkonfigurationen über die Schaltfläche Konfiguration hinzufügen unten rechts zur launch.json hinzufügen.

launch.json IntelliSense

Siehe auch Node.js-Debugging für Beispiele und weitere Erläuterungen.

Speicherort der Ausgabe zuordnen

Wenn sich generierte (transpilierte) JavaScript-Dateien nicht neben ihrem Quellcode befinden, können Sie dem VS Code-Debugger helfen, diese zu lokalisieren, indem Sie das Attribut outFiles in der Startkonfiguration festlegen. Wann immer Sie einen Breakpoint im ursprünglichen Quellcode setzen, versucht VS Code, den generierten Quellcode zu finden, indem es die Dateien durchsucht, die durch Glob-Muster in outFiles angegeben sind.

Client-seitiges Debugging

TypeScript eignet sich hervorragend für das Schreiben von Client-seitigem Code sowie für Node.js-Anwendungen, und Sie können Client-seitigen Quellcode mit dem integrierten Edge- und Chrome-Debugger debuggen.

Wir erstellen eine kleine Webanwendung, um das Client-seitige Debugging in Aktion zu zeigen.

Erstellen Sie einen neuen Ordner HelloWeb und fügen Sie drei Dateien hinzu: helloweb.ts, helloweb.html und tsconfig.json mit folgendem Inhalt

helloweb.ts

let message: string = 'Hello Web';
document.body.innerHTML = message;

helloweb.html

<!DOCTYPE html>
<html>
    <head><title>TypeScript Hello Web</title></head>
    <body>
        <script src="out/helloweb.js"></script>
    </body>
</html>

tsconfig.json

{
  "compilerOptions": {
    "target": "ES5",
    "module": "CommonJS",
    "outDir": "out",
    "sourceMap": true
  }
}

Führen Sie tsc aus, um die App zu erstellen, und testen Sie sie dann, indem Sie helloweb.html in Ihrem Browser öffnen (Sie können mit der rechten Maustaste im Datei-Explorer auf helloweb.html klicken und Pfad kopieren wählen, um ihn in Ihren Browser einzufügen).

Wählen Sie in der Ansicht „Ausführen und Debuggen“ (⇧⌘D (Windows, Linux Ctrl+Shift+D)) die Option launch.json-Datei erstellen, um eine launch.json-Datei zu erstellen, und wählen Sie als Debugger Web App (Edge) oder, falls bevorzugt, Web App (Chrome).

Aktualisieren Sie die launch.json, um die lokale Datei-URL zu helloweb.html anzugeben.

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "msedge",
      "request": "launch",
      "name": "Launch Edge against localhost",
      "url": "file:///C:/Users/username/HelloWeb/helloweb.html",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

Das Konfigurations-Dropdown in der Ansicht Ausführen und Debuggen zeigt nun die neue Konfiguration Edge an localhost starten an. Wenn Sie diese Konfiguration ausführen, wird Ihr Browser mit Ihrer Webseite gestartet. Öffnen Sie helloweb.ts im Editor und klicken Sie auf den linken Rand, um einen Breakpoint hinzuzufügen (er wird als roter Kreis angezeigt). Drücken Sie F5, um die Debug-Sitzung zu starten, wodurch der Browser geöffnet wird und Ihr Breakpoint in helloweb.ts erreicht wird.

client-side debug breakpoint

Häufig gestellte Fragen

Programm kann nicht gestartet werden, da das entsprechende JavaScript nicht gefunden werden kann

Sie haben wahrscheinlich "sourceMap": true in Ihrer tsconfig.json oder outFiles in Ihrer launch.json nicht festgelegt, sodass der VS Code-Node.js-Debugger Ihren TypeScript-Quellcode nicht dem ausgeführten JavaScript zuordnen kann. Aktivieren Sie Source-Maps und erstellen Sie Ihr Projekt neu.

4/8/2026