关于前端:Node-调试利器前端Node-开发必备-VSCode-JS-Debug-Terminal

42次阅读

共计 1253 个字符,预计需要花费 4 分钟才能阅读完成。

常常看到有同学埋怨 Node 调试麻烦或者是搞不清怎么调试各种脚本、JestWebpack 等等,而偶然看到的调试相干的文章又全都是在写 inspectlaunch.json 这些计划,其实有肯定学习老本。

而其实在 VSCode 中早已内置了相当无脑的 Debug 形式,就是 JavaScript Debug Terminal,利用它咱们只须要负责打断点,别的什么 inspectlaunch.json 都不须要关注,主打的就是一个无脑、简略。

应用

要启用 JavaScript Debug Terminal 过程切实是太无脑了,不过还是说一下吧,要开启只须要一步:在 Terminal 中新开一个 JavaScript Debug Terminal,而后所有的脚本全都用它来启动即可。

实战测试

空口无凭,上面咱们通过几个案例来测试一下有多好用。

node 脚本

首先咱们创立一个 test.js 脚本,而后在须要调试的行数后方点击增加上断点,并进入 Debug Terminal 通过 node test.js 来执行。

能够看到执行后间接就开启了 VSCodedebug 模式,并且胜利在断点出停住。

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

总结

能够看出 VSCodeJS Debug Terminal 根本反对了所有咱们罕用的调试场景,无论是 nodetypescriptwebpack 还是 jest,全副拿捏。并且应用相对无脑,能够释怀食用。

当然在应用过程中也遇到一些小问题,比方在跑 jest 时因为会启动多个子过程此时点击断点工具条中的断开可能会导致 Debug Terminal 后续生效,也有时会卡住。不过瑕不掩瑜,用了就晓得 JS Debug Terminal 真香。

正文完
 0