Node 项目调试

前言 作为一个程序员,感觉我们其实打代码的时间不多,大部分时间都在在调试上,所以如何调高我们调试的效率,这就成了我们的一个大问题了,经过在网上的搜索与自己的探索,就推荐这两种好用的 Node 调试方法吧

1 Chrome 调试

因为 V8 检查器集成允许使用 Chrome 调试协议将 Chrome DevTools 附加到 Node.js 实例以进行调试。所以我们可以直接用 Chrome 进行调试。
这个就最简单的的方法,直接在运行代码的地方加个前缀 --inspect,如下:

1
node --inspect /bin/www

这个时候我们在控制台会看到多出这么几个提示

1
2
3
Debugger listening on ws://127.0.0.1:9229/f54d4cb8-56bc-46c4-9b8e-fd7f2163c73c
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.

看到这个我们打开 Chrome,f12 打开控制台,点击上面的 Node 图标

image

我们就可以打开一个新的调试 Node 的浏览器窗口,我们在代码中打的 debugger 和 console.log 都会在那个窗口显示和输出出来。

image

2 VS Code 大法

在 VS Code 中调试步骤也是比较简单,
1、 点击蜘蛛图标,打开调试控制台

image

2、选择一下调试环境

这里我们就直接选 Node的了的啦

image

3、配置调试模式
我们选择好环境之后,他会弹出一个 launch.json 的配置文件,这里面我们可以 VS Code 有很多调试模式,我们可以通过 add configurations 添加调试模式。等到我们要调试的时候就在 debug 菜单那边选模式,然后点击绿色三角开始调试。下面我们着重介绍一下几个常见的模式吧

2.1 VS Code Node 调试模式

2.1.1 attach 模式

这个先拉出来说,因为后面几个模式都是通过 VS Code 启动项目的,而这个模式是你项目已经启动的情况下启用的,并且那项目还是开启了 Chrome 调试的

1
2
3
4
5
6
7
8
9
10
11
12
// launch.json
// port 填 Chrome 调试的端口地址,一般都是 9229
"configurations": [
{
"type": "node",
"request": "attach",
"name": "Attach to Port",
"address": "localhost",
"port": 9229
},
...
]

2.1.2 node 模式

这个其实一开始的时候生成的配置就是 node 启动形式,代码如下

1
2
3
4
5
6
7
8
9
10
11
// launch.json
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceFolder}/bin/www"
},
...

]

选择后模式之后,我们点击调试控制台的绿三角就可以启动调试了。

2.1.3 nodemon 模式

我们调试的时候肯定要修修改改,如果只是用 node 启动的话,我们每次修改后都要重新启动项目,这样是很费时间的,所以我们可以借助一些依赖来实现 node 项目的热重载,比如这个 nodemon, 然后 VS Code 也有这么一个对应的模式。

不过要注意,想用调用这个调试模式,你电脑必须全局 安装 nodemon,否跑不起来。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// launch.json
"configurations": [
{
"type": "node",
"request": "launch",
"name": "nodemon",
"runtimeExecutable": "nodemon",
"program": "${workspaceFolder}/bin/www",
"restart": true,
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen"
},
...

]

和上面一样这个也是在 VS Code 里面启动调试的。

大概就是这些吧,当然 Node 调试还有很多方式,这些就看大家喜欢然后自己去摸索了。最后唠叨一句,debug 是个好东西,大家要用好他。



----------- 本文结束 -----------




小红帽 wechat
想看更多文章,那就订阅我的微信公众号吧
如果觉得我的文章对你有很大帮助的话,请我喝杯奶茶吧~(@^_^@)~