• Node 调试利器,前端、Node 开发必备 - VSCode JS Debug Terminal


    经常看到有同学抱怨 Node 调试麻烦或者是搞不清怎么调试各种脚本、JestWebpack 等等,而偶尔看到的调试相关的文章又全都是在写 inspectlaunch.json 这些方案,其实有一定学习成本。

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

    使用

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

    picture 1

    实战测试

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

    node 脚本

    首先我们创建一个 test.js 脚本,然后在需要调试的行数前方点击添加上断点,并进入 Debug Terminal 通过 node test.js 来执行。

    picture 2

    可以看到执行后直接就开启了 VSCodedebug 模式,并且成功在断点出停住。

    npm script

    再来试试 npm script 方式,我们先新建一个 package.json,然后在 scripts 中添加一条:"start": "node test.js",随后在 Debug Terminal 执行 npm run start

    picture 3

    注意这次我们使用的是 debugger 来添加断点,可以发现同样成功进入断点。

    typescript debug

    不止于此,我们再试试 typescript,新建一个 test.ts,然后通过 npx tsx test.ts 启动。

    picture 4

    可以发现 typescript 一样可以成功调试。

    webpack

    上面都属于比较简单的场景,实际场景我们可能经常会在打包或写单测时遇到一些问题需要调试。现在我们先来随便找个 webpack 模版试试 webpack

    picture 5

    可以看到在 webpack 源码中打断点同样也可以支持。

    jest

    再来试试 jest,随便拿 react 源码里的单测跑一下。

    picture 6

    不出所料,毫无问题。

    其他方式

    除了上面说的主动打开 Debug Terminal 的方式进行调试外,VSCode 还在 npm script 中集成了一些操作。

    比如在 package.json 中的 scripts 上方的 Debug 按钮,点击后会让你选择项目中的 script 并启动 Debug Terminal 进行调试。

    picture 7

    也可以在某个 script 的名字上 hover 后点击出现的悬浮按钮中的 Debug 直接调试对应的 script

    picture 8

    总结

    可以看出 VSCodeJS Debug Terminal 基本支持了所有我们常用的调试场景,无论是 nodetypescriptwebpack 还是 jest,全部拿捏。并且使用绝对无脑,可以放心食用。

    当然在使用过程中也遇到一些小问题,比如在跑 jest 时由于会启动多个子进程此时点击断点工具条中的断开可能会导致 Debug Terminal 后续失效,也有时会卡住。不过瑕不掩瑜,用了就知道 JS Debug Terminal 真香。

  • 相关阅读:
    JavaScript 中的一些奇怪问题
    【全网最全】2023华为杯研究生数学建模B题完整思路+python代码+20页超详细启发式算法+FFT(后续会更新)
    2023-9-27 JZ18 删除链表的结点
    如何才能设计出“好的”测试用例?
    客快物流大数据项目(八十八):ClickHouse快速入门
    景联文科技:深度了解语音识别之发音词典及语音数据采集标注
    Word控件Spire.Doc 【表单域】教程(二):在 C# 中填写 Word 文档中的表单字段
    JVM是什么?Java程序为啥需要运行在JVM中?
    【代码随想录】二刷-链表
    Javaweb之HTML,CSS的详细解析
  • 原文地址:https://www.cnblogs.com/zxbing0066/p/17403212.html