如何使用Node调试工具进行断点调试代码

「爱情、让人受尽委屈。」 2023-02-19 05:27 57阅读 0赞

想要使用node的调试工具，你首先要有Chrome浏览器，因为Chrome是Node官方的调试工具。

> 当前工具版本，仅供参考
> 
> node版本 v11.12.0
> 
> npm版本6.14.5

老版本的Node调试就不学了，只学新版本，也就是Node8及以后的版本如何使用调试工具，使用node --help看到调试的用法讲解如下。

> \--inspect\[=\[host:\]port\]                             指定域名或端口进行调试 (default: 127.0.0.1:9229)  
> \--inspect-brk\[=\[host:\]port\]                       指定域名或端口进行调试，开启服务就开始断点  
> \--debug-port, --inspect-port=\[host:\]port  设置调试域名或端口

假设我们已经有了Node项目，不论是Express还是Koa，或是简单的nodejs代码，有一个入口文件app.js，可以使用node --inspect app.js 或是 node --inspect-brk app.js 进行断点调试。

那这两个命令有什么区别的，就像是上面的解释一样，在使用node --inspect的时候，我们需要使用chrome打开[chrome://inspect][chrome_inspect] ，手动打开调试界面，如果使用node --inspect-brk ，则运行之后会直接打开调试页面，看自己需要哪种。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3MDAxeA_size_16_color_FFFFFF_t_70][]

点击inspect就可以看到我们需要调试的代码了。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3MDAxeA_size_16_color_FFFFFF_t_70 1][]

如果点开之后是这种空的，你可以按照提示，搜索你需要调试的文件名，这个时候你就可以下断点进行调试了。

如果你的代码是web项目，则可以在运行node --inspect app.js 之后，用chrome打开web项目，再打开开发者工具。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3MDAxeA_size_16_color_FFFFFF_t_70 2][]

可以看到开发者工具的左上角多了一个Node的图标，点开之后就可以打开调试界面进行断点调试了。

![format_png][]

[chrome_inspect]: http://chrome//inspect
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3MDAxeA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020061911474746.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3MDAxeA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3MDAxeA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200619114929820.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3MDAxeA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3MDAxeA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200619115245750.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3MDAxeA==,size_16,color_FFFFFF,t_70
[format_png]: https://imgconvert.csdnimg.cn/aHR0cDovL2ltZzQuaW1ndG4uYmRpbWcuY29tL2l0L3U9MjQzMjc5NDYwMCwyNDIxNTY4NTY0JmZtPTI2JmdwPTAuanBn?x-oss-process=image/format,png