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学习笔记之Global Objects全局对象
Jan 13 NodeJs
Windows系统中安装nodejs图文教程
Feb 28 NodeJs
Nodejs学习笔记之入门篇
Apr 16 NodeJs
NodeJS中的MongoDB快速入门详细教程
Nov 11 NodeJs
简单实现nodejs上传功能
Jan 14 NodeJs
简单好用的nodejs 爬虫框架分享
Mar 26 NodeJs
NodeJS实现微信公众号关注后自动回复功能
May 31 NodeJs
nodeJS实现简单网页爬虫功能的实例(分享)
Jun 08 NodeJs
详解IWinter 一个路由转控制器的 Nodejs 库
Nov 15 NodeJs
修改Nodejs内置的npm默认配置路径方法
May 13 NodeJs
通过nodejs 服务器读取HTML文件渲染到页面的方法
May 17 NodeJs
Nodejs实现的操作MongoDB数据库功能完整示例
Feb 02 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连接与操作PostgreSQL数据库的方法
2014/12/25 PHP
IE6,IE7下js动态加载图片不显示错误
2010/07/17 Javascript
js定时器(执行一次、重复执行)
2014/03/07 Javascript
JavaScript中双叹号(!!)作用示例介绍
2014/04/10 Javascript
使用JS+plupload直接批量上传图片到又拍云
2014/12/01 Javascript
详解AngularJS中的表达式使用
2015/06/16 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
2016/09/17 Javascript
jquery滚动条插件slimScroll使用方法
2017/02/09 Javascript
JavaScript结合HTML DOM实现联动菜单
2017/04/05 Javascript
JavaScript实现数字前补“0”的五种方法示例
2019/01/03 Javascript
JavaScript中常用的简洁高级技巧总结
2019/03/10 Javascript
Vue实战教程之仿肯德基宅急送App
2019/07/19 Javascript
微信小程序 checkbox使用实例解析
2019/09/09 Javascript
基于javascript的无缝滚动动画实现2
2020/08/07 Javascript
详解vue3.0 的 Composition API 的一种使用方法
2020/10/26 Javascript
js实现简易ATM功能
2020/10/27 Javascript
在Python中调用ggplot的三种方法
2015/04/08 Python
在Python中使用mongoengine操作MongoDB教程
2015/04/24 Python
名片管理系统python版
2018/01/11 Python
python检测空间储存剩余大小和指定文件夹内存占用的实例
2018/06/11 Python
python实现图片识别汽车功能
2018/11/30 Python
15行Python代码实现网易云热门歌单实例教程
2019/03/10 Python
Python秒算24点实现及原理详解
2019/07/29 Python
Python Django简单实现session登录注销过程详解
2019/08/06 Python
在Django下创建项目以及设置settings.py教程
2019/12/03 Python
Python新手学习标准库模块命名
2020/05/29 Python
Python json格式化打印实现过程解析
2020/07/21 Python
HTML5打开手机扫码功能及优缺点
2017/11/27 HTML / CSS
详解使用双缓存解决Canvas clearRect引起的闪屏问题
2019/04/29 HTML / CSS
彩色的非洲教学反思
2014/02/18 职场文书
三好学生个人先进事迹材料
2014/05/17 职场文书
文员试用期转正自我鉴定
2014/09/14 职场文书
班主任经验交流材料
2014/12/16 职场文书
财务工作个人总结
2015/02/27 职场文书
自主招生推荐信怎么写
2015/03/26 职场文书
中学图书馆工作总结
2015/08/11 职场文书