whistle是什么

是非常实用且无敌的好东西

代理+抓包+mock的小能手

工作中经常遇到联调前需要mock数据进行开发的时候，又或者移动端出现问题，需要抓包看数据分析情况的时候

个人觉得这是一个非常提效的好工具，为此也希望大家也一起使用起来(题外话：比隔壁的charles方便多了) 那么废话不多说了，我相信大家耐心的看完，今后在工作中那简直是如鱼得水的存在啊，哈哈哈

第一步

npm i whistle -g 全局安装

w2 start 启动服务

w2 stop 停止服务(使用率：0.1%)

第二步

科学上网

Chrome浏览器通过网上应用商店去安装SwitchyOmega插件

非科学上网

不能科学上网的同学请看这里，SwitchyOmega插件

安装完成

看到下图的样子，就表示安装成功了

第三步

配置代理

首先需要在插件菜单里选择选项

新建情景模式

切换代理

到现在为止，我们通过前三步的一通操作，已经初见雏形了，下面我们来最激动人心的时刻了，开始实现mock数据和抓包的大业

真正的好戏来了

通过上面三步的操作后，该做的工作都已经搞定了，现在开始启动服务w2 start，启动成功后会看到这样的画面

上面电脑的IP地址是为了方便手机代理时使用的，电脑端配置使用时访问127.0.0.1:8899即可了，记住whistle的默认端口也是8899

安装证书

访问127.0.0.1:8899进到配置界面，先来给电脑安装一下证书，安装了证书后电脑就可以进行抓包(https协议的也可以)

下载好后的证书长这个样子

双击打开证书，之后我们要给证书充分的信任

至此，电脑上的证书也安装完成并且信任了

配置规则和结果

在配置界面Rules中可以配置很多规则(代理的核心就在这里)

由于很多内容都无法通过简单的文字描述出来，So还是直接用图示代替吧，请看大屏幕

上图展示了基本的规则配置，下面再给大家展示一下Values对应的mock数据 基本用法大家一看就会了，就直接开始介绍常用的几种代理方式吧

开始代理

现在假设我们已经和后端同学确定好了要用到的接口，然后前端开始进入了开发阶段

其中一个接口api为/getlist获取列表接口，我们就直接拿这个来举例演示一下

下面出现的IP地址为我电脑的IP(192.168.3.14)，方便代理使用

// Cart.vue组件<script>import axios from 'axios'export default {    mounted() {        axios({            url: 'http://192.168.3.14:9000/getlist'        }).then(res => {            console.log('购物车请求列表：', res)        })    }}</script>

在加载Cart组件的时候，发起了一个ajax请求，然后将请求的数据代理成本地mock好的内容

相信细心的朋友们早已发现了，在配置规则和结果的图示中已经有了相应的规则了

没错就是这段，哈哈

# 代理本地数据  (行首是#为注释)http://192.168.3.14:9000/getlist    resBody://{getList.json}

按理说一切都配好了，那我怎么才能知道代理是否成功呢？

这个很简单，回到whistle配置界面，左侧菜单第一项是Network，在这里你能看到你代理的接口请求是否成功(代理成功的话颜色会是蓝色)

当然了，这只是肉眼所见的代理成功，具体有没有成功mock出我们本地搞出来的数据呢？接着往下看吧

此时此刻，正如彼时彼刻，已经代理成功并且mock出了我们想要的数据了

线上代理举栗

接下来我就直接用线上接口访问然后代理操作了，实战操作让大家直接上手起来，老样子，来看图

https://u.y.qq.com/cgi-bin/musics.fcg这个接口是我们需要进行代理的线上接口，我们要把它代理到写好的测试环境对应的接口上

# 线上接口代理测试环境https://u.y.qq.com/cgi-bin/musics.fcg   http://192.168.3.14:9000/v17/cgi-bin/musics.fcg

规则配置好后，那就让我们再次访问y.qq.com看看有没有代理成功吧！！！

上图我们看到了线上的页面有变化了，可以说确实是代理到了测试环境的数据了

那么，让我们再次回到配置界面的Network看一眼吧

接口参数代理

上面的所有操作其实都是比较粗暴的，直接把整个接口代理了，不管参数是否正确只要命中这个接口就匹配成功了，哈哈

其实有的时候也需要根据接口传入参数的不同值来区分场景之类的，这个时候就需要精确匹配了

还是直接用线上接口https://c.y.qq.com/splcloud/fcgi-bin/gethotkey.fcg来演示一下，大家看这里

我们发现这个fotmat=json参数可能是有输出不同格式的作用，于是我们就简单来代理一下，看看如何根据不同的参数值来返回不同内容的

在新标签页中打开刚才的接口https://c.y.qq.com/splcloud/fcgi-bin/gethotkey.fcg?_=1651564091416&cv=4747474&ct=24&format=jsonp&inCharset=utf-8&outCharset=utf-8&notice=0&platform=yqq.json&needNewCode=1&uin=0&g_tk_new_20200303=5381&g_tk=5381&hostUin=0，这个接口传递了很多的参数

而对于我们来说，我们只关心format参数的，由于参数拼接的顺序显示format在第4个参数上

于是我们用^来表示匹配模式，前面3个参数照常写上，但是在值那个直接写成*，它表示通配符算是任意字符了

# 匹配参数的变化^https://c.y.qq.com/splcloud/fcgi-bin/gethotkey.fcg?_=*&cv=*&ct=*&format=*   http://192.168.3.14:9000/splcloud/fcgi-bin/gethotkey.fcg?_=$1&cv=$2&ct=$3&format=$4

再次访问热词推荐接口(gethotkey.fcg)，将format=json修改为format=jsonp后，我们看到返回了jsonp格式的数据 尽管上面代理的是我本地启的服务，但是这依然不影响大家去理解匹配参数进行代理的过程，dddd

匹配参数这种模式吧，其实你可以理解为是一种模糊匹配，相对于不知道具体参数数值的情况下比较好使

另外一种就是赤裸裸的参数匹配了，那就是精确匹配

比如：有这么一个接口，根据你传递参数role来判断是乘客还是车主身份，返回不同的券信息

# role为1表示车主，返回车主券信息https://wap.car.com/rent/coupons?role=1    http://192.168.3.14:9000/rent/coupons?role=1# role为2表示乘客，返回乘客券信息https://wap.car.com/rent/coupons?role=2    http://192.168.3.14:9000/rent/coupons?role=2

前面介绍的这些代理返回的数据格式都是json这类的，最后再给大家展示一个返回html模板的吧

代理输出html模板

在工作中难免会有些项目还是按照传统的html模板输出的形式进行开发的，这种直接返回html模板的我们也依然可以用whistle进行代理

如上图所示，我们简单演示一下如何代理html模板，哈哈，非常简单，一看就会

http://wap.didialift.com/beatles/campaign/blindbox/index   htmlBody://{blind.html}

htmlBody就是用来mock整个html模板数据的

whistle的规则虽然有很多，但是工作中常用的也就resBody和htmlBody

手机代理

工作中我们不可能单纯的只使用电脑进行代理、抓包、mock数据等操作，更多的时候还是要真机上搞起的，那么现在我们就来看一下，真机是如何进行以上操作的

友情提示： 手机要和你电脑在同一wifi网络下哦

Android设备

第一步，连代理

第一件事也是最重要的一件事，那就是在同一wifi下，给设备连上代理

第二步，下载安装证书

来到whistle的配置界面，点击顶部的HTTPS，展示出二维码弹窗，用你的设备扫码下载证书并安装证书

至此设备就完成了代理了，你在手机访问一个百度页面，whistle的Network也可以抓到包了，完美

IOS设备

IOS设备的代理方式和Android设备的前两步是一样的，区别在于它多了一步，那就是需要证书信任，苹果嘛，就是好这口

该步骤是酱婶的，设置 -> 通用 -> 关于本机 -> 证书信任设置，勾选whistle证书的就可以了

高效使用

写到这里也算是接近尾声了，想必大家也看疲惫了，图片较多也浪费大家的很多流量了，不过我保证这些没有短视频费流量，哈哈

言归正传，我在工作开发中特别的喜欢使用whistle，因为对我而言真的是蛮高效的一件事情

之前因为和后端同学联调，把所有遇到的状态都考虑到了，在提测后只有1个bug，剩下的全是后端同学的bug，当时还骄傲的告诉测试同学，按照我这个来测，所有case都能跑通的，哈哈

结尾

whistle还有一点要比隔壁charles好的地方那就是对于小程序来说，charles抓包有时候会抓不到，而whistle就没有这样的烦恼，所以也是我特别推崇大家使用它的原因吧，哈哈

讲真的，太久没有在掘金上写文章了，看到很多人还在给我留言，甚是感动。其中还有一位同学问我最近可好，是否健在之类的吧，让我哭笑不得之下也真的很感谢了

最后的最后，感谢大家的收看，有写的不好的地方还望指出了，笔芯！

原文：https://juejin.cn/post/7095537562378305566