经常看到有同学抱怨 Node
调试麻烦或者是搞不清怎么调试各种脚本、Jest
、Webpack
等等,而偶尔看到的调试相关的文章又全都是在写 inspect
、launch.json
这些方案,其实有一定学习成本。
而其实在 VSCode
中早已内置了相当无脑的 Debug
方式,就是 JavaScript Debug Terminal
,利用它我们只需要负责打断点,别的什么 inspect
、launch.json
都不需要关注,主打的就是一个无脑、简单。
使用
要启用 JavaScript Debug Terminal
过程实在是太无脑了,不过还是说一下吧,要开启只需要一步:在 Terminal
中新开一个 JavaScript Debug Terminal
,然后所有的脚本全都用它来启动即可。
![a00df3aaf75a6a0cf59e956c9a1a8f92.png](https://i-blog.csdnimg.cn/blog_migrate/051fac3a0c27f90546a44b77f819e68a.png)
实战测试
空口无凭,下面我们通过几个案例来测试一下有多好用。
node 脚本
首先我们创建一个 test.js
脚本,然后在需要调试的行数前方点击添加上断点,并进入 Debug Terminal
通过 node test.js
来执行。
![cffe07b04fdc655ca02cee5b4dceb9ab.png](https://i-blog.csdnimg.cn/blog_migrate/5a568a2adc0bb0427ba66ceea8a25e23.png)
可以看到执行后直接就开启了 VSCode
的 debug
模式,并且成功在断点出停住。
npm script
再来试试 npm script
方式,我们先新建一个 package.json
,然后在 scripts
中添加一条:"start": "node test.js"
,随后在 Debug Terminal
执行 npm run start
。
![6aaad16dfbe5aaf94316a7bc164d8535.png](https://i-blog.csdnimg.cn/blog_migrate/c863a2c9db509b89df7df6046ed5fad3.png)
注意这次我们使用的是 debugger
来添加断点,可以发现同样成功进入断点。
typescript debug
不止于此,我们再试试 typescript
,新建一个 test.ts
,然后通过 npx tsx test.ts
启动。
![0f787d68ce5b258a5d7c38599972e978.png](https://i-blog.csdnimg.cn/blog_migrate/0c7f2f06374322d38e5ec27a094235e0.png)
可以发现 typescript
一样可以成功调试。
webpack
上面都属于比较简单的场景,实际场景我们可能经常会在打包或写单测时遇到一些问题需要调试。现在我们先来随便找个 webpack
模版试试 webpack
。
![28094dc5d62ff24dddb5da7b12491b23.png](https://i-blog.csdnimg.cn/blog_migrate/1d11a3f485ca5ce97b582a45e4b23d91.png)
可以看到在 webpack
源码中打断点同样也可以支持。
jest
再来试试 jest
,随便拿 react
源码里的单测跑一下。
![cb9fb1edf040eba137a1e65202594bfb.png](https://i-blog.csdnimg.cn/blog_migrate/07a01049347f50d1f99ee1353ea9e580.png)
不出所料,毫无问题。
其他方式
除了上面说的主动打开 Debug Terminal
的方式进行调试外,VSCode
还在 npm script
中集成了一些操作。
比如在 package.json
中的 scripts
上方的 Debug
按钮,点击后会让你选择项目中的 script
并启动 Debug Terminal
进行调试。
![23979d36ddfc471abf8c70025fa9aa12.png](https://i-blog.csdnimg.cn/blog_migrate/dbd561c78da8e53491b0e74e993a612f.png)
也可以在某个 script
的名字上 hover
后点击出现的悬浮按钮中的 Debug
直接调试对应的 script
。
![fbedfe1f6b15e138e910b89c43f3f43d.png](https://i-blog.csdnimg.cn/blog_migrate/f88759bc31ce55a9c35d29d52c1ba29e.png)
总结
可以看出 VSCode
的 JS Debug Terminal
基本支持了所有我们常用的调试场景,无论是 node
、typescript
、webpack
还是 jest
,全部拿捏。并且使用绝对无脑,可以放心食用。
当然在使用过程中也遇到一些小问题,比如在跑 jest
时由于会启动多个子进程此时点击断点工具条中的断开可能会导致 Debug Terminal
后续失效,也有时会卡住。不过瑕不掩瑜,用了就知道 JS Debug Terminal
真香。