在 VsCode 中调试 TypeScript

在 VsCode 中调试 TypeScript

缘起

最近在 leetcode 上刷题，大部分都是用的 TypeScript 进行代码编写，但是 TypeScipt 调试起来太不方便了，总不能写一堆console.log，如果是 JavaScript 直接按 F5 就能调用 Node 来调试了，很显然，TypeScript 不能这么玩。 曾经有一段时间，我是这么玩的

tsc file.ts

然后拿生成的 file.js 去调试，但是这样挺麻烦，很多时候，会傻傻的在 file.ts 上面断点，然后 node 就是不在断点停下来，后面一看，啊，原来是编译前的文件。还有就是如果使用了 import 导入数据结构的，编译成 JS 文件就多了不少奇奇怪怪的变量。

那能不能直接调试 TypeScript 文件呢？

运行 TypeScipt 文件

我们知道，直接能运行 TypeScript 文件的，有两个，ts-node 和 deno，平时 TypeScript 文件用这两个都能运行的，ts-node 的安装很简单，直接 npm 全局就能调用

npm i -g ts-node

Deno 的安装可以参考 Deno 官网，提供了不同的安装方式。 Deno 和 ts-node 运行 ts 文件示例：

deno run file.ts
ts-node file.ts

通过 ts-node 和 JavaScript Debug Terminal 调试

既然能运行，那能不能调试呢？ 其实也是可以的，在某个版本的 VSC ，新增了一个 JavaScript Debug Terminal 的控制台，在控制台右上角有个选择框，下拉选中 Create JavaScript Debug Terminal，就会新建一个 JavaScript Debug Terminal 的控制台，在这里运行 js 文件会自动开启调试

node file.js
ts-node ts-file.ts

ts-node 在控制台 JavaScript Debug Terminal 运行 ts 文件也会自动开始调试，这样就可以愉快的断点测试了，如果，但是 deno 运行不会自动调试。还有其实这样还是无法按 F5 或者点击调试按钮直接运行。

通过 Deno 调试

既然 Deno 是一个新的 TS 和 JS 的 runtime，其实可以参考下 Deno 在 VSC 怎么调试的，这里是 链接 , 按照这个配置就可以愉快的用 Deno 调试 ts 和 js 文件。 在 VSC 菜单中， 运行 -> 添加配置，添加以下这段，然后调试的时候，选择 Deno 就好

{
  "name": "Deno",
  "type": "pwa-node",
  "request": "launch",
  "cwd": "${workspaceFolder}",
  "runtimeExecutable": "deno",
  "runtimeArgs": ["run", "--inspect-brk", "-A", "${file}"],
  "attachSimplePort": 9229
}

其实本质上就是执行

deno run --inspect-brk -A 当前文件

To activate debugging capabilities run Deno with the --inspect or --inspect-brk flags.

The --inspect flag allows attaching the debugger at any point in time, while --inspect-brk will wait for the debugger to attach and will pause execution on the first line of code.