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框架Express的模板视图机制分析
Jul 19 NodeJs
详谈nodejs异步编程
Dec 04 NodeJs
用nodejs的实现原理和搭建服务器(动态)
Aug 10 NodeJs
nodejs中使用HTTP分块响应和定时器示例代码
Mar 19 NodeJs
使用nodeJs来安装less及编译less文件为css文件的方法
Nov 20 NodeJs
对mac下nodejs 更新到最新版本的最新方法(推荐)
May 17 NodeJs
NodeJS服务器实现gzip压缩的示例代码
Oct 12 NodeJs
详解nodejs 配置文件处理方案
Jan 02 NodeJs
如何让Nodejs支持H5 History模式(connect-history-api-fallback源码分析)
May 30 NodeJs
通过Nodejs搭建网站简单实现注册登录流程
Jun 14 NodeJs
nodejs+koa2 实现模仿springMVC框架
Oct 21 NodeJs
NodeJS配置CORS实现过程详解
Dec 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 正则表达式小结
2009/08/31 PHP
一步一步学习PHP(3) php 函数
2010/02/15 PHP
js实现鼠标经过时图片滚动停止的方法
2015/02/16 Javascript
JavaScript中constructor()方法的使用简介
2015/06/05 Javascript
javascript中的正则表达式使用详解
2015/08/30 Javascript
常用的JQuery函数及功能小结
2016/03/24 Javascript
利用jquery制作滚动到指定位置触发动画
2016/03/26 Javascript
有关JavaScript中call()和apply() 的一些理解
2016/05/20 Javascript
微信小程序 数据交互与渲染实例详解
2017/01/21 Javascript
jQuery之动画ajax事件(实例讲解)
2017/07/18 jQuery
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
2017/10/20 Javascript
Bootstrap实现翻页效果
2017/11/27 Javascript
nodejs前端模板引擎swig入门详解
2018/05/15 NodeJs
Vue 组件封装 并使用 NPM 发布的教程
2018/09/30 Javascript
如何在Vue.js中实现标签页组件详解
2019/01/02 Javascript
Ant Design的Table组件去除
2020/10/24 Javascript
Python连接mssql数据库编码问题解决方法
2015/01/01 Python
python中sys.argv参数用法实例分析
2015/05/20 Python
浅谈python日志的配置文件路径问题
2018/04/28 Python
python看某个模块的版本方法
2018/10/16 Python
Python 实现微信防撤回功能
2019/04/29 Python
Python的PIL库中getpixel方法的使用
2020/04/09 Python
Python 通过爬虫实现GitHub网页的模拟登录的示例代码
2020/08/17 Python
python 装饰器重要在哪
2021/02/14 Python
详解CSS3 rem(设置字体大小) 教程
2017/11/21 HTML / CSS
Kathmandu英国网站:新西兰户外运动品牌
2017/03/27 全球购物
深深扎根运动世界的生活品牌:Tillys
2017/10/30 全球购物
澳洲国民品牌乡村路折扣店:Country Road & Trenery Outlet
2018/04/19 全球购物
澳洲女装时尚在线:Blue Bungalow
2018/05/05 全球购物
波兰办公用品和学校用品在线商店:Dlabiura24.pl
2020/11/18 全球购物
什么是典型的软件三层结构?软件设计为什么要分层?软件分层有什么好处?
2012/03/14 面试题
Oracle设置DB、监听和EM开机启动的方法
2021/04/25 Oracle
使用react+redux实现计数器功能及遇到问题
2021/06/02 Javascript
redis数据结构之压缩列表
2022/03/21 Redis
nginx location 带斜杠【 / 】与不带的区别
2022/04/13 Servers
vue3 自定义图片放大器效果的示例代码
2022/07/23 Vue.js