以前对代理的实践仅限于在webpack中配置使用过，后来入职新公司后，这边好多个应用的登录都是用的同一个登录，在开发过程中就需要我们手机代理，抓包拿到token之后在本地修改token去开发
一，安装 ：
npm install -g whistle
启动：
w2 start
二，配置代理
推荐一个浏览器插件switchyOmega 配置代理
127.0.0.1:8899
我们可以新建情景模式 -> 自动切换模式，域名通配符中设置一批域名，当我们浏览器访问这些域名时就会自动走代理。
三，抓包
a. 这时候我们在浏览器中输入 127.0.0.1:8899 就可以打开Whistle界面
b. 选择左边侧栏 Network面板，此时就可以抓包到代理访问域名的请求接口。
c. 由于我们业务的限制，需要手机登录拿到token之后在浏览器中手动添加登录状态来调试
首先，手机要跟电脑的处于同一个网络中（连同一个wifi）, 手机上需要安装https证书，然后手机wifi信息处，选择配置代理，配置 本地服务器127.0.0.1和端口 8899 。这样我们手机的请求就可以在Whistle处捕捉到了。
四，调试
我们前端在开发过程中，可能接口还没完成，或者场景比较多，此时我们就可以自己模拟接口数据（做自己的大佬🧍）
1，选择Rules面板，会有一个默认的name Default 在左侧板块右键可以新建一个name
（1）可以将线上的域名指向本地的build后的文件夹，这样我们访问线上域名的时候就可以本地调试了
eg: https://*.test.a.com/apply-name file:///Users/root/projects/apply-name/dist
（2） 我们再新建一个name用于mock数据
我们直接将请求接口的api复制到新建的name中，紧接着在接口后面就可以进行对接口的一些操作
eg: api.test.a.com/m.api?_mt=a… replaceStatus://500
将接口的请求状态强制设为500，模拟服务器错误场景
eg: api.test.a.com/m.api?_mt=a… resBody://{queryList}
指定接口响应返回的数据，指向queryList变量，我们点左侧Values面板（command + 鼠标点击queryList变量），就可以看到queryList变量，然后我们按照正确的接口返回格式去模拟数据就可以调试了
（3）还可以注入html,css,js等内容 ，关键字是jsAppend
eg: https://*.test.com/app jsAppend://{eruda}
command+鼠标点击🖱️eruda，进入value的界面，在这里输入我们想要添加的代码即可
以上功能就可以满足我们基本的调试啦
