使用spy-debugger进行H5页面调试

https://github.com/wuchangming/spy-debugger

关于spy-debugger

一站式页面调试、抓包工具。远程调试任何手机浏览器页面，任何手机移动端webview（如：微信，HybridApp等）。支持HTTP/HTTPS，无需USB连接设备。

spy-debugger内部集成了weinre、node-mitmproxy、AnyProxy

安装

$ npm install spy-debugger -g

使用

1. 手机和电脑连接同一个wifi
2. 命令行输入spy-debugger

截屏2021-10-12 下午10.42.44

zhongxin@zhongxindeiMac ~ % spy-debugger
正在启动代理
本机在当前网络下的IP地址为：192.168.0.110
node-mitmproxy启动端口: 9888
浏览器打开 ---> http://127.0.0.1:63537

1. 设置手机代理

• Android设置代理步骤：设置 - WLAN - 长按选中网络 - 修改网络 - 高级 - 代理设置 - 手动
• iOS设置代理步骤：设置 - 无线局域网 - 选中网络 - HTTP代理手动

设置代理

1. 安装证书

QRCodeForCert

1. IOS需要信任证书

• 5.1 设置-通用-VPN与设备管理
• 5.2 设置-通用-关于本机-证书信任设置

5.1

5.2

测试

随意打开一个内嵌H5的小程序进行测试

打开「微医记录仪」点击「新建」-「手动填写」进入「新建门诊记录」页面

在刚才打开的http://127.0.0.1:63537/页面中，我们就可以看到它的H5部分DOM了

测试

可以切换上面的TAB像浏览器F12一样查看其他内容

其他内容

抓包