H5网页调试神器 spy-debugger 使用 (抓包)

2,081 阅读1分钟

spy-debugger 是一个一站式页面调试、抓包工具。远程调试任何手机浏览器页面 手机移动端webview(如:微信,HybridApp等)。支持HTTP/HTTPS,无需USB连接设备。对于移动开发者来说简直是一个福音。

1. 安装教程

npm install -g spy-debugger // 使用npm全局安装

第一步

保证手机和PC在同一个网络下面,(比如手机热点 WIFI之类的)

第二步

命令行输入spy-debugger启动,按照提示打开浏览器,如下图

image.png 具体表现:

image.png

第三步

安装证书:

image.png ios还可以执行命令:spy-debugger initCA 生成证书, 证书的位置(mac)在根目录的node-mitmproxy/ 文件夹下面:

image.png 将这个文件发送到手机,然后安装, android的可以在设置中搜索证书/CA证书,找到刚刚下载的证书,点击安装。

image.png

第四步

设置手机的HTTP代理,代理IP地址设置为PC的IP地址,端口为spy-debugger的启动端口(默认端口:8888)。

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

第五步

使用手机访问需要调试的网页(如调试微信网页),如下图

image.png

image.png

image.png

2 拓展

具体的拓展可以看官网,点击跳转

3 最后

我们就可以愉快的查看线上的样式问题和一些接口拦截,今天又可以早早下班了。 如有问题,欢迎交流