VSCode 如何调试 typescript 文件

Visual Studio Code（VSCode）是一个非常强大的编辑器，它支持广泛的编程语言，包括 TypeScript。要在 VSCode 中调试 TypeScript 文件，我们可以按照以下步骤操作：

1. 安装必要的插件

首先，确保您的 VSCode 安装了 TypeScript 语言支持。通常，这可以通过安装名为 "TypeScript and JavaScript Language Features" 的官方扩展来实现。此外，为了更好的调试体验，我建议安装 Debugger for Chrome 或 Debugger for Firefox 插件，如果是针对 Node.js 环境可以安装 Node.js Extension Pack。

2. 配置 tsconfig.json 文件

确保您的 TypeScript 项目中有一个正确配置的 tsconfig.json 文件。这个文件指定了 TypeScript 编译器如何编译 TypeScript 文件。确保 "sourceMap" 选项被设置为 true，这样编译后的 JavaScript 文件会生成 source map，调试器就可以关联到原始的 TypeScript 源代码。

例如，您的 tsconfig.json 可能看起来像这样：

json
{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "sourceMap": true
  },
  "include": ["src/**/*"]
}

3. 配置 VSCode 的调试设置

在 VSCode 中，打开调试视图 (可以使用 Ctrl+Shift+D 快捷键)。点击 "创建 launch.json 文件"（通常在调试侧栏顶部），选择环境，这可能是 Node.js 或 Chrome，取决于您的项目类型。

在生成的 launch.json 文件中，您可以设置具体的调试配置。下面是一个针对 Node.js 的配置示例：

json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}/src/index.ts",
      "preLaunchTask": "tsc: build - tsconfig.json",
      "outFiles": ["${workspaceFolder}/dist/**/*.js"]
    }
  ]
}

这个配置告诉 VSCode 在启动程序之前先执行 TypeScript 编译任务（preLaunchTask），并且在编译后的 JavaScript 文件中进行调试。

4. 开始调试

一切设置完成后，您可以在 TypeScript 文件中设置断点，然后从调试视图中选择刚才配置的调试会话，点击绿色的运行按钮开始调试。

实际案例

比如在我之前的项目中，我们使用 VSCode 开发了一个 Node.js 的后台服务。在调试过程中，通过以上设置，我们能够直接在 TypeScript 源码中设置断点，逐行检查程序的运行状态和变量的值。这大大简化了调试过程，并帮助我们快速定位了几个关键的逻辑错误。