调试TypeScript

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

JavaScript 源地图支持

TypeScript 调试支持 JavaScript 源映射。要为你的 TypeScript 文件生成源映射，请用--Sourcemap选项或设置来源地图财产在tsconfig.json文件确实如此.

也支持内嵌源地图（即内容以数据URL存储而非单独文件的源地图），尽管内嵌源尚未被支持。

关于源映射的简单示例，请参见 TypeScript 教程，该教程展示了如何使用以下方法调试一个简单的“Hello World”Node.js应用tsconfig.json以及VS Code默认Node.js调试配置。

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

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

这将产生launch.json文件在.vscode你的项目中检测到默认值的文件夹。

{
  // 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包含了构建为预启动任务并告诉调试器生成的JavaScript文件在哪里。

这里有完整的IntelliSense，提供建议和信息launch.json帮助你了解其他调试配置选项。你也可以添加新的调试配置到launch.json右下角有添加配置按钮。

launch.json IntelliSense

请参见Node.js调试部分，包含示例和进一步说明。

映射输出位置

如果生成（转译）的 JavaScript 文件不在其源文件旁边，您可以通过设置outFiles属性在发射配置中。每当你在原始源设置断点时，VS Code 会尝试通过搜索由 glob patterns 指定的文件来找到生成的源代码outFiles.

客户端调试

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

我们将创建一个小型网页应用，展示客户端调试的实际作。

创建新文件夹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文件选择网页应用（Edge）作为调试器，或者如果你喜欢，也可以选择网页应用（Chrome）。

更新launch.json指定本地文件 URL 为helloweb.html:

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

运行和调试视图的配置下拉菜单现在会显示新的配置“针对本地主机启动边缘”。如果你运行这个配置，浏览器会启动你的网页。开门helloweb.ts在编辑器中点击左侧排水沟添加断点（断点会显示为红色圆圈）。按F5启动调试会话，启动浏览器并触发断点helloweb.ts.

客户端调试断点

常见问题

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

你很可能还没设置好“sourceMap”：真在你的tsconfig.json或outFiles在你的launch.jsonVS Code Node.js调试器无法将你的 TypeScript 源代码映射到正在运行的 JavaScript。开启源映射，重建你的项目。