VS Code 调试 TypeScript 基本流程

VS Code 调试 TypeScript 基本流程

在学习TypeScript的过程中，调试是一个必不可少的环节。本文将详细介绍如何在VS Code中配置和调试TypeScript代码，帮助开发者更高效地进行开发和调试工作。

配置 TypeScript 编译选项

首先需要新建一个TypeScript编译配置文件tsconfig.json，其基本结构如下：

{
  "compilerOptions": {
    "target": "es2015",
    "module": "commonjs",
    "outDir": "out",
    "sourceMap": true
  },
  "include": [
    "src/**/*"
  ]
}

对几个关键属性进行说明：

• target：指定编译出JavaScript代码的ECMAScript版本
• module：指定编译出JavaScript文件的模块格式
• outDir：指定编译出JavaScript文件的存放位置
• sourceMap：是否生成SourceMap文件（不生成SourceMap将无法进行断点调试）
• include：指定要编译的文件

VS Code 集成 TypeScript 编译配置

使用快捷键Ctrl+Shift+B创建tasks.json文件，用于关联TypeScript编译工具到VS Code。可以选择手动编译或保存后自动编译，这里选择手动编译。

{
  "version": "2.0.0",
  "tasks": [
    {
      "type": "typescript",
      "tsconfig": "tsconfig.json",
      "problemMatcher": ["$tsc"],
      "group": "build",
      "label": "tsc: build - tsconfig.json"
    }
  ]
}

VS Code 调试配置

切换到调试面板，创建默认的launch.json文件，用于配置调试选项。需要修改program属性，并新增preLaunchTask属性。

{
  "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}/out/**/*.js"]
    }
  ]
}

其中：

• program：指定调试的入口文件
• preLaunchTask：调试前要执行的任务，需要与tasks.json中的label保持一致

进阶配置：调试Web项目

对于Web项目，可以在.vscode文件夹下创建launch.json配置文件，配置如下：

{
  "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"
    }
  ]
}

同时在vite.config.js中添加以下配置：

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

最后，在.vscode/tasks.json中添加项目启动任务：

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

这样就完成了完整的调试配置。启动项目后，等待项目启动完毕，就可以进行断点调试了。

启动的Chrome测试浏览器

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