编辑

调试 TypeScript

Visual Studio Code 通过其内置的 Node.js 调试器和 Edge 与 Chrome 调试器来支持 TypeScript 调试。

JavaScript source map 支持

TypeScript 调试支持 JavaScript source map。要为你的 TypeScript 文件生成 source map，请使用 --sourcemap 选项进行编译，或在 tsconfig.json 文件中将 sourceMap 属性设置为 true。

内联 source map（将 source map 内容作为数据 URL 存储而不是存为单独文件）也受支持，但内联源文件尚不支持。

关于 source map 实际应用的一个简单示例，请参阅 TypeScript 教程，其中展示了如何使用下面的 tsconfig.json 和 VS Code 默认的 Node.js 调试配置来调试一个简单的“Hello World” Node.js 应用程序。

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

对于更高级的调试场景，你可以创建自己的调试配置文件 launch.json。要查看默认配置，请转到 运行和调试 视图 (⇧⌘D (Windows, Linux Ctrl+Shift+D)) 并选择 创建 launch.json 文件 链接。

这将在 .vscode 文件夹中创建一个 launch.json 文件，并包含在你的项目中检测到的默认值。

{
  // 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 已经确定了要启动的程序 helloworld.ts，将构建过程作为 preLaunchTask 包含在内，并告诉调试器在哪里可以找到生成的 JavaScript 文件。

launch.json 文件具有完整的 IntelliSense 功能，提供建议和信息，以帮助你了解其他调试配置选项。你还可以通过右下角的 添加配置 按钮向 launch.json 添加新的调试配置。

launch.json IntelliSense

另请参阅 Node.js 调试以获取示例和进一步解释。

映射输出位置

如果生成的（转译的）JavaScript 文件不与其源文件位于同一目录下，你可以通过在启动配置中设置 outFiles 属性来帮助 VS Code 调试器定位它们。每当你在原始源文件中设置断点时，VS Code 会尝试通过搜索 outFiles 中 glob 模式指定的文件来找到生成的源文件。

客户端调试

TypeScript 非常适合编写客户端代码以及 Node.js 应用程序，你可以使用内置的 Edge 和 Chrome 调试器来调试客户端源代码。

我们将创建一个小型的 Web 应用程序来演示客户端调试的实际操作。

创建一个名为 HelloWeb 的新文件夹，并添加三个文件：helloweb.ts、helloweb.html 和 tsconfig.json，内容如下：

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
  }
}

运行 tsc 来构建应用，然后通过在浏览器中打开 helloweb.html 进行测试（你可以在文件资源管理器中右键单击 helloweb.html 并选择 复制路径 以粘贴到浏览器中）。

在“运行和调试”视图 (⇧⌘D (Windows, Linux Ctrl+Shift+D)) 中，选择 创建 launch.json 文件 来创建一个 launch.json 文件，选择 Web 应用 (Edge) 作为调试器，如果你愿意，也可以选择 Web 应用 (Chrome)。

更新 launch.json 以指定指向 helloweb.html 的本地文件 URL

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

运行和调试 视图的配置下拉菜单现在将显示新的配置 Launch Edge against localhost。如果运行该配置，你的浏览器将启动并显示你的网页。在编辑器中打开 helloweb.ts，然后单击左侧边栏以添加断点（它将显示为一个红点）。按 F5 启动调试会话，这将启动浏览器并在 helloweb.ts 中命中你的断点。

client-side debug breakpoint

常见问题

无法启动程序，因为找不到对应的 JavaScript

你可能没有在 tsconfig.json 中设置 "sourceMap": true，或在 launch.json 中设置 outFiles，导致 VS Code Node.js 调试器无法将你的 TypeScript 源代码映射到正在运行的 JavaScript。请开启 source map 并重新构建你的项目。

09/11/2025