在 VS Code 中尝试！

调试 TypeScript

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

JavaScript 源映射支持

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

内联源映射（内容以数据 URL 形式而不是独立文件形式存储的源映射）也受支持，但内联源文件目前尚不支持。

要查看源映射的简单示例，请参阅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 具有完整的智能感知，包括建议和信息，以帮助你了解其他调试配置选项。你还可以通过右下角的添加配置按钮向 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 App (Edge) 作为调试器，或者如果你更喜欢 Web App (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}"
    }
  ]
}

运行和调试视图配置下拉菜单现在将显示新的配置启动 Edge 对 localhost。如果你运行该配置，浏览器将启动并显示你的网页。在编辑器中打开 helloweb.ts 并单击左侧的空白区域以添加断点（它将显示为红色圆圈）。按F5 启动调试会话，这将启动浏览器并在 helloweb.ts 中命中你的断点。

client-side debug breakpoint

常见问题

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

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

06/12/2025