轻松搞定 TS 源码调试：详细步骤解析

当我们学习 TypeScript 的时候，可能都会去调试它的源代码，但是很多朋友不知道该如何去做，那么我们今天就一起来学习一下，希望对你有所帮助。

首先，我们需要确保安装了 Visual Studio Code，然后打开你的 TypeScript 项目。在项目文件夹中，找到 tsconfig.json 文件，并确保其中包含以下配置：

{
  "compilerOptions": {
    "sourceMap": true,
    "inlineSourceMap": true
  }
}

这一步的目的是允许 TypeScript 编译器生成源映射文件，以便在调试过程中更容易地将编译后的代码映射回源代码。

接下来，我们需要在项目中安装 source-map-support 包。这个包允许我们在代码中使用 source-map-support.install() 方法来初始化源映射支持。

npm install source-map-support --save-dev

在项目中创建 debug.js 文件，并添加以下代码：

require('source-map-support').install();

这个文件的作用是加载 source-map-support 包并初始化源映射支持。

最后，我们需要在项目中创建 launch.json 文件，并添加以下配置：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug TypeScript",
      "program": "${workspaceFolder}/debug.js",
      "args": [
        "${workspaceFolder}/src/index.ts"
      ],
      "sourceMaps": true,
      "outFiles": [
        "${workspaceFolder}/lib/**/*.js"
      ]
    }
  ]
}

这一步的目的是配置 Visual Studio Code 的调试环境，以便在启动调试时加载 debug.js 文件并运行 TypeScript 源代码。

现在，你就可以在 Visual Studio Code 中启动调试了。打开 launch.json 文件，然后点击左上角的绿色三角形按钮，或者使用快捷键 F5。此时，Visual Studio Code 将会启动调试会话，你可以在编辑器中设置断点，并逐步执行代码，从而轻松地调试 TypeScript 源代码。

希望本教程能够帮助你学会如何调试 TypeScript 源代码。