VS Code 调试 TypeScript 基本流程

最近接触到的几个开源库源码都是用 TypeScript 写的（看来 ts 是大势所趋，不学不行啊）。虽然说不懂 ts 也能正常调 API，但是碰到有意思的功能还是想跟进去看一看、改一改。

在学习了基本的 ts 语法后有了调试的需求。如果用 tsc 编译出 js，再去调试 js 还是太麻烦。如果能在 VS Code 中直接调试 ts 就完美了。在查阅一些资料后，我总结了一个基本流程，方便以后查阅，不足之处也请大家指正。

 

配置 TypeScript 编译选项

新建 tsc 的配置文件 tsconfig.json

 

1. {
2. "compilerOptions": {
3. "target": "es2015",
4. "module": "commonjs",
5. "outDir": "out",
6. "sourceMap": true,
7. },
8. "include": [
9. "src/**/*"
10. ]
11. }

 tsconfig.json

 

对用到的几个属性加以说明

• target : 编译出 JavaScript 代码的 ECMAScript 版本
• module : 编译出 JavaScript 文件的模块格式
• outDir : 编译出 JavaScript 文件的存放位置；
• sourceMap : 是否生成 SourceMap 文件；（不生成 SourceMap 不会进端点）

• include : 指定要编译的文件；

以上属性都有多种可取值，详情可以参考阮一峰老师的文章 tsconfig.json

 

VS Code 集成 TypeScript 编译配置

快捷键 Ctrl+Shift+B，创建 tasks.json，用于关联 tsc 编译工具到 VS Code。

 

Ctrl+Shift+B 创建 tasks.json 弹出的两个选项

 

第一个选项是每次手动编译后生成 js；第二个选项是每次修改、保存后都重新编译 js。这里我们点击第一个选项后面的配置图标，生成 tasks.json 文件。

 

1. {
2. "version": "2.0.0",
3. "tasks": [
4. {
5. "type": "typescript",
6. "tsconfig": "tsconfig.json",
7. "problemMatcher": [
8. "$tsc"
9. ],
10. "group": "build",
11. "label": "tsc: build - tsconfig.json"
12. }
13. ]
14. }

tasks.json

 

VS Code 调试配置

 切换到调试面板，点击 "create a launch.json file" 创建默认的 launch.json 文件，用于配置调试选项。

 

 

生成的 launch.json 中，修改默认的 program 属性，并新增 preLaunchTask 属性，得到如下内容。

 

1. {
2. // Use IntelliSense to learn about possible attributes.
3. // Hover to view descriptions of existing attributes.
4. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
5. "version": "0.2.0",
6. "configurations": [
7. {
8. "type": "node",
9. "request": "launch",
10. "name": "Launch Program",
11. "skipFiles": [
12. "<node_internals>/**"
13. ],
14. "program": "${workspaceFolder}/src/index.ts",
15. "preLaunchTask": "tsc: build - tsconfig.json",
16. "outFiles": ["${workspaceFolder}/out/**/*.js"]
17. }
18. ]
19. }

launch.json 

 

 以上两个属性的说明

• program : 调试的入口文件
• preLaunchTask : 调试前要执行的任务。内容要和 tasks.json 中的 label 保持一致。如下图所示：

 

preLaunchTask 要和 tasks.json 中的 label 一致

 

接下来就可以开始 TypeScript 的调试了

 

VS Code 中调试 TypeScript 

 

---

本文参考了

Integrate with External Tools via Tasks

tsconfig.json

浅谈在 vscode 中调试 typescript 的小坑

vscode 调试学习

首先需要在.vscode 文件夹下面创建 launch.json 配置文件。然后输入如下配置：

{
  // 使用 IntelliSense 了解相关属性。 
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "dev",
      "url": "http://localhost:5173/metro-metaverse/",
      "webRoot": "${workspaceFolder}/src",
      "sourceMaps": true,
      "runtimeExecutable": "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe"
    }
  ]
}

在 vite.config.js 加入如下配置：

defineConfig({
    build: {
      sourcemap: true
    }
})

然后需要启动你的项目：npm run ***

点击运行监听：

会启动一个 chrome 测试浏览器，这个浏览器不要关闭，监听仅在这个浏览器上有效。

现在可以愉快的进行断点调试了！

---

补充一下：

如果想将项目启动也配置进来的话可以加一个 task。

使用 ctrl + shift + p 或者 cmd + shift + p，输入 task。

选择项目启动命令：

在生成的./.vscode/tasks.json 文件中添加如下配置：

{
	"version": "2.0.0",
	"tasks": [
    {
      "type": "npm",
      "script": "dev",
      "problemMatcher": [],
      "label": "npm: dev",
      "detail": "vite --host",
      "isBackground": true
    }
  ]
}

同时在./.vscode/launch.json 文件中增加如下配置：

{
  // 使用 IntelliSense 了解相关属性。 
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "dev",
      "url": "http://localhost:5173/metro-metaverse/",
      "webRoot": "${workspaceFolder}/src",
      "sourceMaps": true,
      "runtimeExecutable": "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",
      "preLaunchTask": "npm: dev" // task的label
    }
  ]
}

这样就配置完成了。

需要注意的是：在启动的时候会弹出一个提示框，一定要选择 “仍要调试”

现在你只需要等待项目启动完毕，就可以进行断点调试了。