您好,欢迎访问一九零五行业门户网

聊聊调试 Node.js 代码的两种方式

如何调试你的 node 代码?下面本篇文章给大家介绍一下两种常见的调试 node.js 的方式,有一定的参考价值,希望对大家有所帮助!
很多时候,我苦恼于 node.js 的调试,只会使用 console.log 这种带有侵入性的方法,但是其实 node.js 也可以做到跟浏览器调试一样的方便。
本文环境:
macchrome 94.0.4606.81node v12.12.0vscode version: 1.61.1
本文示例本文示例采用的是之前探索洋葱模型的,仅有一个文件,就是根目录下 index.js,如下:
const koa = require('koa');const app = new koa();console.log('test')// 中间件1app.use((ctx, next) => { console.log(1); next(); console.log(2);});// 中间件 2 app.use((ctx, next) => { console.log(3); next(); console.log(4);});app.listen(9000, () => { console.log(`server is starting`);});
v8 inspector protocol + chrome devtoolsv8 inspector protocol 是 nodejs v6.3 新加入的调试协议,通过 websocket与 client/ide 交互,同时基于 chrome/chromium 浏览器的 devtools 提供了图形化的调试界面。
我们进入项目根目录,执行(留意这个 8888 端口,后面会用到):
node --inspect=8888 index.js
结果如下:
结果出来一个链接——ws://127.0.0.1:8888/5f5c59fc-d42b-4ab0-be15-6feb1a05ed2d。这个链接是 node.js 和 chrome 之前通信的 websocket 地址,通过 websocket 通信,我们可以在 chrome 中实时看到 node.js 的结果。
如何进入 chrome 的调试界面第一种方式(自己尝试无效)
打开 http://localhost:8888/json/list,其中 8888 是上面 --inspect 的参数。
[ { "description": "node.js instance", "devtoolsfrontendurl": "chrome-devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=localhost:8888/5f5c59fc-d42b-4ab0-be15-6feb1a05ed2d", "devtoolsfrontendurlcompat": "chrome-devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=localhost:8888/5f5c59fc-d42b-4ab0-be15-6feb1a05ed2d", "faviconurl": "https://nodejs.org/static/images/favicons/favicon.ico", "id": "5f5c59fc-d42b-4ab0-be15-6feb1a05ed2d", "title": "index.js", "type": "node", "url": "file:///users/gpingfeng/documents/personal/test/test-onion/index.js", "websocketdebuggerurl": "ws://localhost:8888/5f5c59fc-d42b-4ab0-be15-6feb1a05ed2d" }]
很多资料说,可以通过 devtoolsfrontendurl 就可以直接访问到,但尝试了一下,并没有成功。【可能跟我的环境有关】
第二种方式
查了一下资料,在 stackoverflow 找到对应的方案,如下:
devtools://devtools/bundled/inspector.html?experiments=true&ws=127.0.0.1:8888/5f5c59fc-d42b-4ab0-be15-6feb1a05ed2d
其中 devtools://devtools/bundled/inspector.html?experiments=true 是固定的,ws 参数对应的就是 websocket 地址。
可以看到界面如下:
第三种方式
chrome 浏览器打开 http 监听接口页面,打开 dev tool,执行完 node --inspect=8888 index.js 后可以看到这个图标,点击一下:
就可以出现跟浏览器一样的调试页面,比如 sources panel查看脚本、profile panel 监测性能等。
另外,可以访问访问 chrome://inspect/#devices,可以看到当前浏览器监听的所有 inspect。
vscode 调试除了浏览器之外,各大主流的 ide 都支持 node.js 的调试,本文以 vscode 为例。
launch configuration打开调试页面,给我们 node 项目添加一个 launch 配置:
选择 node.js
这样就会在项目根目录生成对应的文件 .vscode/launch.json(当然你也可以手动创建),其中 program 指的就是文件入口,${workspacefolder} 指的是根目录。
{ // use intellisense to learn about possible attributes. // hover to view descriptions of existing attributes. // for more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "pwa-node", "request": "launch", "name": "launch program", "skipfiles": [ "<node_internals>/**" ], "program": "${workspacefolder}/index.js" } ]}
按 f5、或者点击如下按钮:
结果:
可以看到,在左侧可以显示当前作用域的值,调用堆栈等信息,右上方亦可逐步调试函数、重启等功能,非常强大。
attach to node process action通过 attach to node process action 的方式,我们可以直接调试运行中的 node.js 进程。
比如我们先启动项目——npm run start。
然后 command + shift + p(window ctrl+shift+p),输入 attach to node process action,回车,然后选中运行中进程再回车,就可以跟上面配置一样调试代码了。
总结本文总结了两种常见的调试 node.js 的方式。第一种 node.js 通过 websocket 的方式将信息传递给 chrome 浏览器,我们直接在 chrome 中进行调试。第二种就是通过 vscode launch configuration,自定义配置的方式进行调试。通过 attach to node process action 的方式,可以便捷的调试正在运行的 node.js 代码,而不需要配置。
更多node相关知识,请访问:nodejs 教程!!
以上就是聊聊调试 node.js 代码的两种方式的详细内容。
其它类似信息

推荐信息