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 提示‘xxx’ 不是内部或外部命令解决方法
Nov 20 NodeJs
NodeJS学习笔记之Http模块
Jan 13 NodeJs
NodeJS的Promise的用法解析
May 05 NodeJs
详解nodejs 文本操作模块-fs模块(三)
Dec 22 NodeJs
nodejs获取微信小程序带参数二维码实现代码
Apr 12 NodeJs
Windows下使用Nodejs运行js的方法
Sep 02 NodeJs
nodejs简单访问及操作mysql数据库的方法示例
Mar 15 NodeJs
基于Nodejs的Tcp封包和解包的理解
Sep 19 NodeJs
详解从NodeJS搭建中间层再谈前后端分离
Nov 13 NodeJs
nodejs异步编程基础之回调函数用法分析
Dec 26 NodeJs
nodejs分离html文件里面的js和css的方法
Apr 09 NodeJs
nodejs实现百度舆情接口应用示例
Feb 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
使用一个for循环将N*N的二维数组的所有值置1实现方法
2017/05/29 PHP
php自定义排序uasort函数示例【二维数组按指定键值排序】
2019/06/19 PHP
jQuery菜单插件superfish使用指南
2015/04/21 Javascript
javascript搜索框效果实现方法
2015/05/14 Javascript
JavaScript学习笔记整理之引用类型
2016/01/22 Javascript
值得分享的轻量级Bootstrap Table表格插件
2016/05/30 Javascript
javascript滚轮控制模拟滚动条
2016/10/19 Javascript
JavaScript基础之AJAX简单的小demo
2017/01/29 Javascript
node.js实现登录注册页面
2017/04/08 Javascript
vue绑定class与行间样式style详解
2017/08/16 Javascript
微信小程序实现美团菜单
2018/06/06 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
2018/12/05 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
2019/05/13 jQuery
React中使用外部样式的3种方式(小结)
2019/05/28 Javascript
vue 地区选择器v-distpicker的常用功能
2019/07/23 Javascript
vue解决使用$http获取数据时报错的问题
2019/10/30 Javascript
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
python正则表达式抓取成语网站
2013/11/20 Python
python socket网络编程步骤详解(socket套接字使用)
2013/12/06 Python
python实现网页链接提取的方法分享
2014/02/25 Python
Python之pandas读写文件乱码的解决方法
2018/04/20 Python
python join方法使用详解
2019/07/30 Python
python3 pillow模块实现简单验证码
2019/10/31 Python
Python 面向对象静态方法、类方法、属性方法知识点小结
2020/03/09 Python
eDreams巴西:廉价机票,酒店优惠和度假套餐
2017/04/14 全球购物
美国最大的万圣节服装网站:HalloweenCostumes.com
2017/10/12 全球购物
澳大利亚领先的男装零售连锁店:Lowes
2020/08/07 全球购物
介绍下static、final、abstract区别
2015/01/30 面试题
领导的自我鉴定
2013/12/28 职场文书
新闻发布会策划方案
2014/06/12 职场文书
教师节学生演讲稿
2014/09/03 职场文书
机关副主任个人四风问题整改措施
2014/09/26 职场文书
2014小学教师个人工作总结
2014/11/10 职场文书
话题作文之呼唤
2019/12/18 职场文书
nginx作grpc的反向代理踩坑总结
2021/07/07 Servers
SQL Server中搜索特定的对象
2022/05/25 SQL Server