TypeScript-Debugging

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

JavaScript-Quellcodezuordnungsunterstützung

TypeScript-Debugging unterstützt JavaScript-Quellcodezuordnungen. Um Quellcodezuordnungen 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.

Eingebettete Quellcodezuordnungen (eine Quellcodezuordnung, bei der der Inhalt als Daten-URL statt als separate Datei gespeichert wird) werden ebenfalls unterstützt, obwohl eingebetteter Quellcode noch nicht unterstützt wird.

Ein einfaches Beispiel für Quellcodezuordnungen in Aktion finden Sie im TypeScript-Tutorial. Dort wird das Debugging einer einfachen "Hello World"-Node.js-Anwendung mithilfe der folgenden tsconfig.json und der Standard-Node.js-Debugkonfiguration von VS Code gezeigt.

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

Für fortgeschrittenere Debugging-Szenarien können Sie Ihre eigene Debugkonfigurationsdatei launch.json erstellen. Um die Standardkonfiguration anzuzeigen, 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 Datei launch.json in einem Ordner .vscode mit Standardwerten erstellt, die in Ihrem Projekt erkannt wurden.

{
  // 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 ermittelt, den Build als preLaunchTask eingeschlossen und dem Debugger mitgeteilt, wo die generierten JavaScript-Dateien zu finden sind.

Es gibt eine vollständige IntelliSense mit Vorschlägen und Informationen für launch.json, die Ihnen helfen, andere Debugkonfigurationsoptionen kennenzulernen. Sie können auch neue Debugkonfigurationen zu launch.json hinzufügen, indem Sie die Schaltfläche Konfiguration hinzufügen unten rechts verwenden.

launch.json IntelliSense

Weitere Beispiele und Erklärungen finden Sie auch unter Node.js-Debugging.

Zuordnung des Ausgabestandorts

Wenn die generierten (transpilierten) JavaScript-Dateien nicht neben ihrem Quellcode liegen, können Sie dem VS Code-Debugger helfen, sie zu finden, indem Sie das Attribut outFiles in der Startkonfiguration festlegen. Wenn Sie einen Haltepunkt 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.

Clientseitiges Debugging

TypeScript eignet sich hervorragend für die Entwicklung von clientseitigem Code sowie von Node.js-Anwendungen, und Sie können clientseitigen Quellcode mit dem integrierten Edge- und Chrome-Debugger debuggen.

Wir erstellen eine kleine Webanwendung, um das clientseitige 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 auf helloweb.html im Datei-Explorer klicken und Pfad kopieren auswä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 Datei launch.json zu erstellen. Wählen Sie Web-App (Edge) als Debugger oder Web-App (Chrome), wenn Sie dies bevorzugen.

Aktualisieren Sie die launch.json, um die lokale Date-URL für 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}"
    }
  ]
}

Die Dropdownliste für die Konfiguration in der Ansicht Ausführen und Debuggen zeigt nun die neue Konfiguration Edge gegen 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 in die linke Randleiste, um einen Haltepunkt hinzuzufügen (er wird als roter Kreis angezeigt). Drücken Sie F5, um die Debug-Sitzung zu starten, die den Browser startet und Ihren Haltepunkt in helloweb.ts erreicht.

client-side debug breakpoint

Häufig gestellte Fragen

Programm konnte nicht gestartet werden, da die entsprechende JavaScript-Datei nicht gefunden werden konnte

Sie haben wahrscheinlich "sourceMap": true in Ihrer tsconfig.json oder outFiles in Ihrer launch.json nicht gesetzt und der VS Code Node.js-Debugger kann Ihren TypeScript-Quellcode nicht dem laufenden JavaScript zuordnen. Aktivieren Sie Quellcodezuordnungen und erstellen Sie Ihr Projekt neu.

12/10/2025