1、准备要调试的ts文件

VSCode配置TypeScript的断点调试(详细步骤)_typescript

for(let i: number=1;i<10; i++){
  console.log("当我唱起这首歌");
}

2、添加配置文件

VSCode配置TypeScript的断点调试(详细步骤)_悬停_02


VSCode配置TypeScript的断点调试(详细步骤)_typescript_03

3、编辑配置文件,用以下代码替换

VSCode配置TypeScript的断点调试(详细步骤)_typescript_04

{
  // 使用 IntelliSense 了解相关属性。 
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-node",
      "request": "launch",
      "name": "Launch Program",
      //作用:调试时加载ts-node包(在调试时直接运行ts代码)
      "runtimeArgs": ["-r","ts-node/register"],
      //01调试.ts表示要调试的ts文件
      "args": ["${workspaceFolder}/01调试.ts"]
    }
  ]
}

4、安装调试用到的包

npm install ts-node typescript

5、运行调试

VSCode配置TypeScript的断点调试(详细步骤)_typescript_05

6、如果报错,则安装typescript的运行时包

VSCode配置TypeScript的断点调试(详细步骤)_配置文件_06

npm install -D tslib @types/node

VSCode配置TypeScript的断点调试(详细步骤)_悬停_07

7、再次运行即可

VSCode配置TypeScript的断点调试(详细步骤)_悬停_08