node常用调试方式

425 阅读2分钟

一般而言,在node中,也可以使用console.log(),debugger等方式进行简单调试,但是这种方式侵入性太大,而且也不方便,下面说下常用的几种。

vscode调试

一种是使用vscode进行调试,和在浏览器中调试javascript代码类似,不同的是,调试的时候需要在launch.json里面增加配置。以调试create-react-app源码为例,点击Add Configuration,会自动进入到launch.json文件。

然后配置相关参数

点击绿色的箭头即可。

代码开始运行,会出现

launch.json文件里面可配置的参数,详见Launch.json attributes

Chrome DevTools调试

还有一种是可以通过--inspect或--inspect-brk参数启动程序,会进入调试模式,然后结合 Chrome DevTools 进行调试。使用 --inspect-brk 而非 --inspect 可保证代码第一时间断在程序开头。还是以调试create-react-app源码为例:

  1. 运行node --inspect-brk create-react-app/packages/create-react-app/index.js create-react-app-demo,出现该提示表明已成功启动调试器。
  2. 在Chrome浏览器的地址栏,键入 chrome://inspect 或者 about:inspect 并回车,即可看到要调试的脚本。 点击inspect,可看到断在代码第一行。

子进程中代码的调试

一般的程序,使用上面的几种方式已经足够,但是碰到复杂的、或者有多个进程或子进程的时候,就难以调试了。因为对于子进程中的代码,是无法断点的。以调试create-react-app源码为例,使用上面的Chrome DevTools调试方式,可以发现,即使在react-scripts/scripts/init.js文件中写上debugger,也不会生效。这也就是为什么,当你想调试 webpack 编译,恰好又用了类似 happypack 这种多进程加速编译的工具时,发现 loader 及 插件中无法断点的原因。那么,该怎么做呢?

  1. 启动程序不要加 inspect,因为那是开启对主进程的调试,直接运行程序即可node create-react-app/packages/create-react-app/index.js create-react-app-demo
  2. 找到开启子进程的地方,加上调试参数--inspect-brk即可。对于create-react-app来说,在executeNodeScript函数中。

可以看到,安装完依赖包后,出现了调试提示 这时,进入浏览器chrome://inspect,可看到已经能进入init.js文件进行调试了。

更新于:2022-03-24

vscode的1.65.X的版本已经有了JavaScript Debug Terminal。 与auto attach类似,在JavaScript Debug Terminal中会自动debug在其中运行的任何node程序。 通过⇧⌘P,输入debug,选择JavaScript Debug Terminal

image.png

可在终端看到已处于debug模式,可在代码中打断点进行调试。

image.png

更多的调试模式,可参考Node.js debugging in VS Code

参考

以上若有错误,恳请指正!