whistle代理抓包

官方文档：whistle官方文档

安装whistle

npm install -g whistle

安装Proxy SwitchyOmega、QR Code Generator

这两个都是浏览器插件，下载后可以配合whistle进行使用。
Proxy SwitchyOmega插件

Proxy SwitchyOmega安装后需要配置情景模式，写入代理服务器以及代理端口。

二维码生成器

浏览器插件安装后可以直接点击使用。如图：

启动whistle

w2 start 

*whistle默认端口号为8899

ios抓包

电脑准备

电脑使用的话需要安装证书，浏览器中输入http://localhost:8899/打开whitle抓包页，点击HTTPS-->Download RootCA下载证书。

1、 mac电脑双击下载好的证书，打开钥匙串。选择证书，点击信任，把所有选项改成始终信任。


2、windows电脑双击下载好的证书

点击安装证书

选择本地计算机，点击下一步

直接点击下一步

点击完成，这里window的安装就完成了。

手机准备

ios手机需要先设置代理，确保电脑跟手机连接的是同一wifi地址，设置-->无线局域网-->选择wifi-->配置代理-->手动。里面配置好电脑的ip地址以及端口号。电脑的ip地址在启动whistle的时候就有展示，可以到那里去查看。

安装rootCA证书，可以按照whistle中的方式安装。
方式一：Safari 地址栏输入 rootca.pro
方式二：手机扫描http://localhost:8899/中打开的二维码
方式三：直接把电脑下载好的证书文件转到手机上（我采用了这种方式，第一第二都失败了，页面打不开，然后我就直接将文件发送到了手机上，这算是下下策，实在不行在用这种方式吧）
文件下载好后，打开ios设置会出现已下载描述文件选项：

点击已下载描述文件：

点击安装，弹出提示：

继续点击安装，这样证书便安装成功了。

最后，还得去设置--> 通用-->关于本机-->证书信任设置-->启用证书，这样手机这边配置算是完成了。

h5抓包

启动项目，浏览器中打开项目地址，使用QR Code Generator插件在浏览器中生成二维码手机扫描，就可以在手机上进行抓包了！

小程序抓包

打开微信开发者工具-->设置-->代理设置-->手动代理，输入代理地址以及端口号。手机扫描预览码或者使用真机调试，这样也可以进行抓包查看数据。

遇到的一些问题

1、电脑跟手机配置好后，发现手机无法扫描进入页面。

解决方案：建议先查看证书是否过期，如果证书过期的话，需要重新下载安装。如果还是不行，请考虑是不是端口号冲突了，建议换个端口号启动。

// 设置端口号启动命令
w2 start -p 端口号

2、项目启动后，浏览器页面打开显示错误。

解决方案：建议项目启动命令前加上 sudo。