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 相关文章推荐
Nodejs sublime text 3安装与配置
Jun 19 NodeJs
Nodejs中调用系统命令、Shell脚本和Python脚本的方法和实例
Jan 01 NodeJs
NodeJS学习笔记之Connect中间件模块(二)
Jan 27 NodeJs
nodejs中的fiber(纤程)库详解
Mar 24 NodeJs
nodejs简单实现操作arduino
Sep 25 NodeJs
NodeJS实现客户端js加密
Jan 09 NodeJs
nodejs根据ip数组在百度地图中进行定位
Mar 06 NodeJs
NodeJs模拟登陆正方教务
Apr 28 NodeJs
NodeJS设计模式总结【单例模式,适配器模式,装饰模式,观察者模式】
Sep 06 NodeJs
NodeJS简单实现WebSocket功能示例
Feb 10 NodeJs
修改Nodejs内置的npm默认配置路径方法
May 13 NodeJs
NodeJs使用webpack打包项目的方法详解
Feb 28 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实现字符串反转输出的方法
2015/03/14 PHP
PHP中的随机性 你觉得自己幸运吗?
2016/01/22 PHP
php基于curl重写file_get_contents函数实例
2016/11/08 PHP
php头像上传预览实例代码
2017/05/02 PHP
PHP实现限制IP访问及提交次数的方法详解
2017/07/17 PHP
Laravel框架实现的上传图片到七牛功能详解
2019/09/06 PHP
Yii框架应用组件用法实例分析
2020/05/15 PHP
Javascript 自定义类型方法小结
2010/03/02 Javascript
javascript实现tabs选项卡切换效果(扩展版)
2013/03/19 Javascript
js实现九宫格图片半透明渐显特效的方法
2015/02/16 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
2015/05/03 Javascript
jQuery树形下拉菜单特效代码分享
2015/08/15 Javascript
跟我学习javascript的定时器
2015/11/19 Javascript
全面解析JavaScript中“&&”和“||”操作符(总结篇)
2016/07/18 Javascript
vue.js 表格分页ajax 异步加载数据
2016/10/18 Javascript
Bootstrap Search Suggest使用例子
2016/12/21 Javascript
Vue.js中数据绑定的语法教程
2017/06/02 Javascript
ECMAscript 变量作用域总结概括
2017/08/18 Javascript
vue 查看dist文件里的结构(多种方式)
2020/01/17 Javascript
Jquery ajax书写方法代码实例解析
2020/06/12 jQuery
vue3.0中友好使用antdv示例详解
2021/01/05 Vue.js
[01:07:53]RNG vs VG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
[54:58]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第一场 11.25
2020/11/25 DOTA
利用Python获取操作系统信息实例
2016/09/02 Python
python解决Fedora解压zip时中文乱码的方法
2016/09/18 Python
python 文件查找及内容匹配方法
2018/10/25 Python
Django框架验证码用法实例分析
2019/05/10 Python
python 函数中的内置函数及用法详解
2019/07/02 Python
利用python求积分的实例
2019/07/03 Python
Django xadmin开启搜索功能的实现
2019/11/15 Python
Autopep8的使用(python自动编排工具)
2021/03/02 Python
韩国三星集团旗下时尚品牌官网:SSF SHOP
2016/08/02 全球购物
BAILEY 44官网:美国制造的女性服装
2019/07/01 全球购物
法拉利英国精品店:Ferraris Boutique UK
2019/07/20 全球购物
入党转预备思想汇报
2014/01/07 职场文书
心理咨询承诺书
2014/05/20 职场文书