@ys930126 2021-10-13T15:32:01.000000Z 字数 2364 阅读 15

涨姿势：whistle+switchOmega 之前端mock数据

以下所有操作，都基于Mac os 操作。win 系统用户，参考使用

背景：

开发过程中，因为后端同步开发，导致接口不稳定，前端的后期开发联调强依赖于后端服务的稳定性支持。以及在电脑端调试移动端应用中会涉及到Token失效的问题，让人着实比较烦恼，所以这里建议使用Whistle + SwitchyOmega来给前端本地提供模拟数据支撑。更方便和快速的去对接数据结构，也更快的自测接口，其中忽略掉接口的不稳定性和健壮性造成的前端开发工作阻塞。

官方文档

Whistle: http://wproxy.org/whistle/

关于 whistle 也可以使用阿里巴巴封装过的 LightProxy使用
SwitchyOmega: https://proxy-switchyomega.com/

SwitchyOmega_Chromium.crx 如果使用不了crx 可以下载zip,解压

安装和准备

根据各自文档来进行安装即可

whistle

1.安装
使用 npm install whistle -g 进行安装即可
2.验证
安装完毕后，shell 键入命令 w2 help 不报错就表示安装成功
3.启用和停止
安装成功后，shell 键入命令 w2 start 运行whistle ，一般whistle默认端口为8899 w2 stop 停止 whistle
4.证书安装
在抓包的时候我们可能会希望抓https的包，但是一般情况是不允许抓这种加密包，所以，我们需要为本机安装证书，信任whistle就可以抓到https的包了。

1.浏览器键入 localhost:8899 ( whistle运行端口）,
2.工具栏选择HTTPS
3.仅勾选 Capture TUNNEL CONNECTs 
4.点击 Download RootCA 下载证书
5.在Mac os 的钥匙串中信任该证书。也可参考官方文档 自定义证书 ， Https（见下图 
6.重启whistle , 就可以抓Https的包了

switchyOmega

1.下载crx扩展文件后，改后缀为rar、zip ,解压，
2.在 chrome://extensions 打开开发者模式，再点击加载已解压的扩展程序，选中crx解压后的文件夹即可
3.新增一个代理模式，代理到whistle。完成后，点击switchyOmega就可以看到刚新增的whistle代理了

使用

官方文档上已经有些常用的配置方式，如请求头，refer，ua修改，绑定转发，等等
常用功能匹配模式协议列表

1.抓包

抓包在whistle来说是个最常用的功能，在PC上只要结合Chrome+switchyOmega，在移动端和PC同一个网络，并代理到whistle 机器的IP和端口就能完美使用。

在Network面板就能看到最近的请求内容和请求详细了。比chrome浏览器的F12唤出来的检查面板更加详细。当然我们可以在具体的请求上做Replay 等更多操作，

2.主机/域名代理

代理目标服务器（IP/网址）

whistle他能做本机 host文件类似的存在，将某个IP代理到某个域名，我们只需要在rules添加对应的规则即可
如 admin.test.com localhost:8090
配置示例,此时浏览器admin.test.com 就相当于访问localhost:8090

3.能够mock数据

一般用于mock后台返回数据，更快的根据后端返回来的数据结构进行前端渲染，减少后期联调对接数据结构造成的时间阻塞。

能够使用tpl://{value-key},xtpl://{value-key}，file://path,xfile://path,来mock 数据如使用tpl /test/list/ tpl://{testlist.json}。在values中加入testlist.json 即可如图

4.追加内容

常用于往调试页面追加 vconsole, enura 调试工具

能够使用 html://{value-key} css://{value-key} js://{value-key} ，对请求返回内容后，追加Html,css,js 内容

PS:当然也可以使用大佬们开发得插件直接使用 whistle.inspect

5.日志打印

使用log://{value-key},来打印日志

6.手机移动端代理调试

iphone

1.连接到相同网络
2.手机配置代理到PC机器的whistle上
3.手机扫描whistle的二维码，或者直接浏览器输入网址 rootca.pro,下载好描述文件（证书
4.安装和信任此证书（描述文件

设置-》通用-》描述文件与设备管理-》whistle.xxxxxxxx -》安装 -》输入密码安装成功 -》返回到设置-》关于本机-》最下方证书信任设置-》whistle.xxxxxx-》switch开关打开 -》全部步骤完成

5.测试
手机输入对应代理网站进行测试，电脑上能看到手机端请求内容，请求头部的ua为手机终端

安卓手机代理调试（示例手机为OPPO R17)

点击下载完毕的内容-》弹出框中选择凭证安装-》点击保存-》这时候已经OK (在设备和隐私中能看到用户已经信任的证书中已经有刚才下载的证书了