1、whistle
-
作为新潮流的前端调试利器，现在才接触到有点相见恨晚，它能帮我们抓包调试，包括真机调试、代理、HTTPS抓取等等，很棒，直达：whistle Gitbook
-
安装启动
$ npm install -g whistle
$ w2 start # w2 start -p 8899 默认是8899
[i] whistle@2.5.14 started
[i] 1. use your device to visit the following URL list, gets the IP of the URL you can access:
http://127.0.0.1:8899/
http://192.168.1.001:8899/
- 拿到 http://192.168.1.001:8899/ 地址打开
-
配置代理 8899
Mac: System Preferences > Network > Advanced > Proxies > HTTP or HTTPS
image.png
这样就可以抓到包了，如果要抓到HTTPS的
2、抓取 HTTPS
- 参考地址
http://wproxy.org/whistle/webui/https.html - 步骤
下载证书、通过证书
3、代理映射本地开发工程
- 本地 next.js 的工程启动， 80 端口
$ sudo npx next dev -p 80
- whistle配置代理
Rules-default 配置如下
// 其实这个地址是配置在微信公众号配置的安全域名，这样就可以通过本地验证调用微信分享
https://preview.xxxxxxx/ http://127.0.0.1
image.png
此时可以在微信开发者工具中打开地址直接测试分享功能
4、利用真机代理调试
-
手机在连着和电脑同一个局域网下，手机进入wifi设置，设置代理为手动，IP地址为电脑IP地址，端口号为whistle本地调试界面打开的端口号，这里是 8899
-
iOS 手机设置代理后，Safari 地址栏输入 rootca.pro，按提示安装证书（或者通过 whistle 控制台的二维码扫码安装
-
iOS 10.3 之后需要手动信任自定义根证书，设置路径：Settings > General > About > Certificate Trust Testings
-
参考地址，上面抓取HTTPS的时候，应该也放的这个地址
http://wproxy.org/whistle/webui/https.html -
注意：如果换了电脑设备，记得重新执行步骤配置代理、安装证书、信任证书
这样就可以抓取手机上的 HTTPS 请求了, 手机也可以通过线上地址代理访问电脑本地环境了
5、利用 log 打印手机端日志
Rules-default 增加一行配置如下:
https://preview.xxxxxxx/ log://
网友评论