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

2021-10-21 16:57:45 浏览数 (1)

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

关于spy-debugger

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

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

安装

代码语言：javascript复制
$ npm install spy-debugger -g

使用

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

截屏2021-10-12 下午10.42.44

代码语言：javascript复制
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一样查看其他内容

其他内容

抓包

http https html5 网络安全 安全

0 人点赞