nodejs各种姿势断点调试的方法


Posted in NodeJs onJune 18, 2020

nodejs开启debug模式通过传递参数 --inspect 或 --inspect-brk ,调试方法分为IDE和chrome devtools两种,下面就具体讲解这两种方式如何调试node程序;

part1:VS Code调试:

 一、launch.json 配置

配置详解看另一篇:VSCode launch.json配置详解

1 nodejs调试:

1.1 点击添加配置文件

nodejs各种姿势断点调试的方法 

我们看到 .vscode/launch.json的configurations.program属性为 "${workspaceFolder}/express-app.js" ,表示调试的入口文件,其中 workspaceFolder

是vscode资源管理器的根目录

nodejs各种姿势断点调试的方法

1.2 启动调试

点击绿色箭头,启动调试

nodejs各种姿势断点调试的方法 

2. 调试npm scripts

在实际项目中,命令基本上都是放到了npm scritps中 ps: 注意调试npm scripts时参数 --inspect 必须指定端口

2.1 添加npm scripts

{
 ...
 "scripts": {
 ...
 "debug": "node --inspect-brk=6666 index.js"
 },
 ...
}

6666是任意指定的调试端口号。

2.2 修改vscode调试配置

打开 .vscode/launch.json 删除 program 属性 增加以下3个配置项, runtimeExecutable,runtimeArgs,port

{
 ...
 "configurations": [
 {
 ...
 "runtimeExecutable": "npm", //默认是node,这里改成npm
 "runtimeArgs": [
 "run-script",//别名 run
 "debug"//对应上npm scripts上的debug
 ],
 "port": 6666 //调试端口
 }
 ]
}

2.3 启动调试

启动调试方法同上

3. 调试非node命令

 3.1 node_modules/.bin

npm run 会自动添加 node_module/.bin 到当前命令所用的PATH变量中,例如:

{
 ...
 "scripts": {
 "build": "webpack"
 },
 ...
}

运行 npm run build 实际上是调用 node_modules/.bin/webpack 而运行 node_modules/.bin/webpack 实际上会根据当前shell环境调用对应脚本,查看可以发现有3个同名不同后缀名的脚本: webpack(标注了可执行程序sh) 、 webpack.cmd 、webpack.ps1 例如在cmd命令行工具下会调用 webpack.cmd 脚本,查看代码可以发现内部实际上是调用命令:

node ./node_modules/webpack/bin/webpack.js

3.2 不能直接加 --inspect-brk

这种情况下,直接加 --inspect-brk=6666 是不行的 以下配置,会自动执行npm run debug,但不会进入断点。

{
 ...
 "scripts": {
 "debug": "webpack --inspect-brk=6666"
 },
 ...
}

3.3 转换成node调用

修改npm scripts:

{
 ...
 "scripts": {
 "debug": "node --inspect-brk=6666 ./node_modules/webpack/bin/webpack.js"
 },
 ...
}

启动成功!

3.4 stopOnEntry

设置 configurations.stopOnEntry=true ,启动调试后,断点可以自动停在第一行代码上

二、attach 附加到node.js

1. Auto Attach 自动附加无需配置,快速开始调试

打开用户设置,修改 "debug.node.autoAttach": "on" ,开启自动附加

nodejs各种姿势断点调试的方法 

vscode集成终端输入 node --inspect-brk index.js

自动进入vscode的debug模式;

2. 设置“附加”配置

跟自动附加相比,可以显式配置各种调试配置选项,示例配置如下:

{
 "name": "Attach to Process",
 "type": "node",
 "request": "attach",
 "processId": "${command:PickProcess}"
 },

启动步骤:

1.命令行以debug模式运行nodejs程序

node --inspect-brk index.js

2.选择并运行附加配置

nodejs各种姿势断点调试的方法

3. 选择要附加的进程 ,开启调试

nodejs各种姿势断点调试的方法 

part2: Chrome DevTools调试:

Chrome DevTools是nodejs天生支持的调试方式,使用步骤:

1.命令行以debug模式运行nodejs程序

node --inspect-brk index.js

2.打开谷歌浏览器,访问 chrome://inspect/#devices ,可以看到当前浏览器监听的所有 inspect 3.点击下图红框内的超链接,会打开Chrome DevTools面板,就可以使用他的各种功能

nodejs各种姿势断点调试的方法

vscode远程调试插件:Remote Development

总结

到此这篇关于nodejs各种姿势断点调试的方法的文章就介绍到这了,更多相关nodejs 断点调试内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

NodeJs 相关文章推荐
Google官方支持的NodeJS访问API,提供后台登录授权
Jul 29 NodeJs
nodejs开发环境配置与使用
Nov 17 NodeJs
nodejs批量修改文件编码格式
Jan 22 NodeJs
nodejs中模块定义实例详解
Mar 18 NodeJs
详解nodejs中的process进程
Mar 19 NodeJs
nodejs个人博客开发第二步 入口文件
Apr 12 NodeJs
nodejs个人博客开发第四步 数据模型
Apr 12 NodeJs
nodejs实现爬取网站图片功能
Dec 14 NodeJs
nodejs结合Socket.IO实现的即时通讯功能详解
Jan 12 NodeJs
nodejs图片处理工具gm用法小结
Dec 12 NodeJs
Nodejs实现的操作MongoDB数据库功能完整示例
Feb 02 NodeJs
Nodejs异步流程框架async的方法
Jun 07 NodeJs
在NodeJs中使用node-schedule增加定时器任务的方法
Jun 08 #NodeJs
nodeJS与MySQL实现分页数据以及倒序数据
Jun 05 #NodeJs
NodeJS多种创建WebSocket监听的方式(三种)
Jun 04 #NodeJs
Sublime Text3 配置 NodeJs 环境的方法
May 20 #NodeJs
Nodejs实现WebSocket代码实例
May 19 #NodeJs
Nodejs文件上传、监听上传进度的代码
Mar 27 #NodeJs
nodejs如何在package.json中设置多条启动命令
Mar 16 #NodeJs
You might like
PHP设置图片文件上传大小的具体实现方法
2013/10/11 PHP
PHP常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
2014/09/12 PHP
使用PHPMailer实现邮件发送代码分享
2014/10/23 PHP
php 使用fopen函数创建、打开文件详解及实例代码
2016/09/24 PHP
ThinkPHP3.2.3框架实现的空模块、空控制器、空操作,跳转到错误404页面图文详解
2019/04/03 PHP
JS常见问题整理(持续更新)
2013/08/06 Javascript
javascript几个易错点记录
2014/11/26 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
2016/01/05 Javascript
只需五句话搞定JavaScript作用域(经典)
2016/07/26 Javascript
JS实现列表的响应式排版(推荐)
2016/09/01 Javascript
详谈jQuery.load()和Jsp的include的区别
2017/04/12 jQuery
原生JS实现的碰撞检测功能示例
2018/05/18 Javascript
JS使用数组实现的队列功能示例
2019/03/04 Javascript
多个vue子路由文件自动化合并的方法
2019/09/03 Javascript
vue 通过base64实现图片下载功能
2020/12/19 Vue.js
vue 动态生成拓扑图的示例
2021/01/03 Vue.js
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
2021/03/01 Vue.js
[05:39]2014DOTA2西雅图国际邀请赛 淘汰赛7月14日TOPPLAY
2014/07/14 DOTA
天翼开放平台免费短信验证码接口使用实例
2013/12/18 Python
Python设置Socket代理及实现远程摄像头控制的例子
2015/11/13 Python
python实现简单聊天应用 python群聊和点对点均实现
2017/09/14 Python
Python设计模式之建造者模式实例详解
2019/01/17 Python
python爬虫项目设置一个中断重连的程序的实现
2019/07/26 Python
Scrapy+Selenium自动获取cookie爬取网易云音乐个人喜爱歌单
2021/02/01 Python
Html5在手机端调用相机的方法实现
2020/05/13 HTML / CSS
德国家具在线:Fashion For Home
2017/03/11 全球购物
TIME时代杂志台湾总代理:台时亚洲
2018/10/22 全球购物
俄罗斯珠宝市场的领导者之一:Бронницкий ювелир
2019/10/02 全球购物
小学生学习感言
2014/03/10 职场文书
大学生村官演讲稿
2014/04/25 职场文书
公路绿化方案
2014/05/12 职场文书
建筑节能汇报材料
2014/08/22 职场文书
公司处罚决定书
2015/06/24 职场文书
谢师宴家长致辞
2015/07/27 职场文书
关于nginx 实现jira反向代理的问题
2021/09/25 Servers
python数字图像处理:图像的绘制
2022/06/28 Python