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的require模块(文件模块/核心模块)及路径介绍
Jan 14 NodeJs
在NodeJS中启用ECMAScript 6小结(windos以及Linux)
Jul 15 NodeJs
nodejs开发环境配置与使用
Nov 17 NodeJs
Nodejs学习笔记之NET模块
Jan 13 NodeJs
nodejs进阶(6)—连接MySQL数据库示例
Jan 07 NodeJs
详解nodejs的express如何自动生成项目框架
Jul 12 NodeJs
NodeJS简单实现WebSocket功能示例
Feb 10 NodeJs
nodejs微信扫码支付功能实现
Feb 17 NodeJs
nodejs dgram模块广播+组播的实现示例
Nov 04 NodeJs
Nodejs技巧之Exceljs表格操作用法示例
Nov 06 NodeJs
Nodejs实现WebSocket代码实例
May 19 NodeJs
浅谈vue websocket nodeJS 进行实时通信踩到的坑
Sep 22 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实现MySQL更新记录的代码
2008/06/07 PHP
了解Joomla 这款来自国外的php网站管理系统
2010/03/11 PHP
PHP实现图片裁剪、添加水印效果代码
2014/10/01 PHP
浅谈PHP中output_buffering
2015/07/13 PHP
JS代码格式化和语法着色V2
2006/10/14 Javascript
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
2008/08/14 Javascript
原生javascript实现图片轮播效果代码
2010/09/03 Javascript
基于jquery的横向滚动条(滑动条)
2011/02/24 Javascript
node.js中的events.emitter.once方法使用说明
2014/12/10 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
2014/12/31 Javascript
Javascript编写俄罗斯方块思路及实例
2015/07/07 Javascript
常用jQuery代码分享
2015/07/14 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
2016/08/30 Javascript
微信小程序 页面跳转传参详解
2016/10/28 Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
2017/08/18 Javascript
Angular 4.0学习教程之架构详解
2017/09/12 Javascript
vue中实现移动端的scroll滚动方法
2018/03/03 Javascript
vue异步加载高德地图的实现
2018/06/19 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
2019/04/19 Javascript
vue.js实现只能输入数字的输入框
2019/10/19 Javascript
处理JavaScript值为undefined的7个小技巧
2020/07/28 Javascript
Python编码爬坑指南(必看)
2016/06/10 Python
Python+Selenium+PIL+Tesseract自动识别验证码进行一键登录
2017/09/20 Python
python实现自动发送报警监控邮件
2018/06/21 Python
利用pyinstaller打包exe文件的基本教程
2019/05/02 Python
使用Jupyter notebooks上传文件夹或大量数据到服务器
2020/04/14 Python
HTML5新增属性data-*和js/jquery之间的交互及注意事项
2017/08/08 HTML / CSS
抽象方法、抽象类怎样声明
2014/10/25 面试题
消防先进事迹材料
2014/02/10 职场文书
我的长生果教学反思
2014/04/28 职场文书
爱护花草树木的标语
2014/06/11 职场文书
党课培训心得体会
2014/09/02 职场文书
2014国庆节演讲稿:祖国在我心中(400字)
2014/09/25 职场文书
群众路线教育实践活动整改落实情况汇报
2014/10/28 职场文书
2016年大学自主招生自荐信范文
2015/03/24 职场文书
二十年同学聚会致辞
2015/07/28 职场文书