【前端调试】如何优雅调试Node.js

Node.js调试终极技巧

在编写node应用的时候,不得不先掌握的一项技能就是调试方法,而大家最常用的就是console.log是不是?记得之前在写AST脚本的时候,通过console.log打印对象为[Object][Array],无法展开,通过转义之后也是满满一大串,并且太长会超过缓冲区大小,终端显示不全,泰蓝瘦!

接下来就介绍如何用VsCode调试node

VsCode调试

针对上面的例子,创建launch.json,选择node启动调试

选择需要调试的文件,本质上这步操作相当于执行node --inspect src/version3.js,通过attach连接指定的端口达到调试效果。

启动调试之后,我们可以看到ast对象里面的所有属性,操作ast的时候简直不要太方便!

那有人会说,我就用console.log打印一个string而已,很方便啊~

是这样吗?使用console.log会产生问题是使用之后要删除掉,否则控制台就变成菜市场,啥玩意都有!

应该使用LogPoint,并且它的功能更加全面~

根据场景选择不同的log

打印结果一样是console效果

特别是在循环中需要查看记录,break point会打断循环,log point非你莫属~

另外,在循环中可以使用条件表达式,在你希望断点的时候断住,什么意思呢?

例如,在遍历['console.log', 'console.info', 'console.error', 'console.debug']时,我希望在calleeName === 'console.error'时断住!

是不是比break point一步一步调试方便!

预警:企业级项目不用担心没删除上线之后造成其他敏感数据暴露。因为这个问题还被前公司老板说极其不专业🐶。

除此之外,我们通过调试获取到自己想要的信息之外,还能够看到代码的裸奔状态,如作用域和调用栈,在需要调试源码或者追踪问题的时候提供清晰的路径。

而且在调试异常代码的时候,不用每个地方都console.log一下或者删除某些代码,即所谓的``控制变量法`进行低效排查,工具可以自动捕获到发生异常的地方,通过调用栈和作用域信息就可以轻松找到问题,对于新上手一个业务代码,测试让你去排查bug时简直是利器啊~

chrome devtools

node天生支持利用统一平台的Chrome进行调试,通过命令行启动检查器时,nodejs进程开始侦听调试客户端,默认情况下侦听 127.0.0.1:9229 的域名和端口号,允许调试器客户端通过CDP协议连接到此端口,例如一些开源工具vsCode基于Chromium 内核的浏览器webStorm等等,连接成功后Node.js开始侦听调试信息。

bash 复制代码
node --inspect-brk src/version3.js

打开chrome://inspect可以看到已经连接到debugger服务

点击inspect进入调试

如果端口被占用了咋整?别急,V8检查器允许你自定义端口号:

bash 复制代码
node --inspect-brk=6666 src/version3.js

重新chrome://inspect会看到target中没有连接上检查器,这是因为chrome默认监听92229229端口,需要手动添加端口

总结

当需求打印对象类型的数据时,选择用断点调试,可以完整看到对象属性和方法,同时在裸奔状态下看到代码执行堆栈和作用域信息,还能顺便学习源码,这是console.log做不到的。

通过logpoint能够优雅打印变量,同时支持根据条件表达式进行调试。

在排查问题的时候,通过异常断点快速定位到问题代码,提升解决问题能力!

我们还知道除了VsCode之外,v8检查器也内置了其他开源或商业的工具允许连接调试器,如webStorm爱好者依然可以使用debugger进行调试,本质上都是采用CDP协议进行通信。

相关推荐
李游Leo18 小时前
Node.js 多版本管理与 nvm/nvs 使用全流程(含国内镜像加速与常见坑)
node.js
Q_Q196328847519 小时前
python+springboot+uniapp微信小程序题库系统 在线答题 题目分类 错题本管理 学习记录查询系统
spring boot·python·django·uni-app·node.js·php
陈随易1 天前
适合中国宝宝的AI编程神器,文心快码
前端·后端·node.js
Q_Q19632884751 天前
python+springboot大学生心理测评与分析系统 心理问卷测试 自动评分分析 可视化反馈系统
开发语言·spring boot·python·django·flask·node.js·php
EndingCoder1 天前
Electron 新特性:2025 版本更新解读
前端·javascript·缓存·electron·前端框架·node.js·桌面端
machinecat1 天前
node,小程序合成音频的方式
前端·node.js
草木红1 天前
express 框架基础和 EJS 模板
arcgis·node.js·express
亮子AI2 天前
【npm】npm 包更新工具 npm-check-updates (ncu)
前端·npm·node.js
Yvonne爱编码2 天前
构建高效协作的桥梁:前后端衔接实践与接口文档规范详解
前端·git·ajax·webpack·node.js
Juchecar2 天前
AI教你常识之 ESM + Express + Vue3 + CSV文件 + Pinia + CRUD
node.js