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的url截取模块url-extract的使用实例
Nov 18 NodeJs
轻松创建nodejs服务器(7):阻塞操作的实现
Dec 18 NodeJs
NodeJS中Buffer模块详解
Jan 07 NodeJs
nodejs创建web服务器之hello world程序
Aug 20 NodeJs
详解Nodejs基于mongoose模块的增删改查的操作
Dec 21 NodeJs
Ajax异步文件上传与NodeJS express服务端处理
Apr 01 NodeJs
详解nodejs微信公众号开发——1.接入微信公众号
Apr 10 NodeJs
详解nodejs微信公众号开发——2.自动回复
Apr 10 NodeJs
详解nodeJS之二进制buffer对象
Jun 03 NodeJs
Windows下使用Nodejs运行js的方法
Sep 02 NodeJs
nodejs中各种加密算法的实现详解
Jul 11 NodeJs
在nodejs中创建child process的方法
Jan 26 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
动漫女神老婆无限好,但日本女生可能就不是这么一回事了!
2020/03/04 日漫
不用GD库生成当前时间的PNG格式图象的程序
2006/10/09 PHP
php多文件上传实现代码
2014/02/20 PHP
跨浏览器PHP下载文件名中的中文乱码问题解决方法
2015/03/05 PHP
Js实现滚动变色的文字效果
2014/06/16 Javascript
scrollWidth,clientWidth,offsetWidth的区别
2015/01/13 Javascript
jQuery事件绑定on()与弹窗实现代码
2016/04/28 Javascript
手机软键盘弹出时影响布局的解决方法
2016/12/15 Javascript
使用jquery给新生的th绑定hover事件的实例
2017/02/10 Javascript
DVA框架统一处理所有页面的loading状态
2017/08/25 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
2017/09/27 Javascript
Vue.js与 ASP.NET Core 服务端渲染功能整合
2017/11/16 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
2018/09/19 Javascript
Vue render函数实战之实现tabs选项卡组件
2019/04/22 Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
2019/10/15 Javascript
p5.js实现简单货车运动动画
2019/10/23 Javascript
vue如何使用async、await实现同步请求
2019/12/09 Javascript
JavaScript中交换值的10种方法总结
2020/08/18 Javascript
[04:23]DOTA2上海特锦赛小组赛第一日 TOP10精彩集锦
2016/02/27 DOTA
打包发布Python模块的方法详解
2016/09/18 Python
图解Python变量与赋值
2018/04/03 Python
Python&&GDAL实现NDVI的计算方式
2020/01/09 Python
Python2手动安装更新pip过程实例解析
2020/07/16 Python
Python2.6版本pip安装步骤解析
2020/08/17 Python
美国内衣品牌:Leonisa
2016/08/14 全球购物
英国马匹装备和马术用品购物网站:Equine Superstore
2019/03/03 全球购物
美国沙龙美发产品购物网站:Hair.com by L’Oreal
2020/11/09 全球购物
这段代码难道不该打印出56吗
2013/02/27 面试题
路政管理专业推荐信
2013/11/11 职场文书
秘书行业自我鉴定范文
2013/12/30 职场文书
银行工作检查书范文
2014/01/31 职场文书
任命书模板
2014/06/04 职场文书
名人演讲稿范文
2014/09/16 职场文书
python tkinter模块的简单使用
2021/04/07 Python
Python开发工具Pycharm的安装以及使用步骤总结
2021/06/24 Python
Python编程根据字典列表相同键的值进行合并
2021/10/05 Python