利用 whistle 调试微信分享

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://