问小白 wenxiaobai
资讯
历史
科技
环境与自然
成长
游戏
财经
文学与艺术
美食
健康
家居
文化
情感
汽车
三农
军事
旅行
运动
教育
生活
星座命理

VS Code 调试 TypeScript 基本流程

创作时间:
作者:
@小白创作中心

VS Code 调试 TypeScript 基本流程

引用
1
来源
1.
https://www.cnblogs.com/Chary/p/18277673

在学习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测试浏览器

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

© 2023 北京元石科技有限公司 ◎ 京公网安备 11010802042949号