常常看到有同学埋怨 Node
调试麻烦或者是搞不清怎么调试各种脚本、Jest
、Webpack
等等,而偶然看到的调试相干的文章又全都是在写 inspect
、launch.json
这些计划,其实有肯定学习老本。
而其实在 VSCode
中早已内置了相当无脑的 Debug
形式,就是 JavaScript Debug Terminal
,利用它咱们只须要负责打断点,别的什么 inspect
、launch.json
都不须要关注,主打的就是一个无脑、简略。
应用
要启用 JavaScript Debug Terminal
过程切实是太无脑了,不过还是说一下吧,要开启只须要一步:在 Terminal
中新开一个 JavaScript Debug Terminal
,而后所有的脚本全都用它来启动即可。
实战测试
空口无凭,上面咱们通过几个案例来测试一下有多好用。
node 脚本
首先咱们创立一个 test.js
脚本,而后在须要调试的行数后方点击增加上断点,并进入 Debug Terminal
通过 node test.js
来执行。
能够看到执行后间接就开启了 VSCode
的 debug
模式,并且胜利在断点出停住。
npm script
再来试试 npm script
形式,咱们先新建一个 package.json
,而后在 scripts
中增加一条:"start": "node test.js"
,随后在 Debug Terminal
执行 npm run start
。
留神这次咱们应用的是 debugger
来增加断点,能够发现同样胜利进入断点。
typescript debug
不止于此,咱们再试试 typescript
,新建一个 test.ts
,而后通过 npx tsx test.ts
启动。
能够发现 typescript
一样能够胜利调试。
webpack
下面都属于比较简单的场景,理论场景咱们可能常常会在打包或写单测时遇到一些问题须要调试。当初咱们先来轻易找个 webpack
模版试试 webpack
。
能够看到在 webpack
源码中打断点同样也能够反对。
jest
再来试试 jest
,轻易拿 react
源码里的单测跑一下。
不出所料,毫无问题。
其余形式
除了下面说的被动关上 Debug Terminal
的形式进行调试外,VSCode
还在 npm script
中集成了一些操作。
比方在 package.json
中的 scripts
上方的 Debug
按钮,点击后会让你抉择我的项目中的 script
并启动 Debug Terminal
进行调试。
也能够在某个 script
的名字上 hover
后点击呈现的悬浮按钮中的 Debug
间接调试对应的 script
。
总结
能够看出 VSCode
的 JS Debug Terminal
根本反对了所有咱们罕用的调试场景,无论是 node
、typescript
、webpack
还是 jest
,全副拿捏。并且应用相对无脑,能够释怀食用。
当然在应用过程中也遇到一些小问题,比方在跑 jest
时因为会启动多个子过程此时点击断点工具条中的断开可能会导致 Debug Terminal
后续生效,也有时会卡住。不过瑕不掩瑜,用了就晓得 JS Debug Terminal
真香。