🍂 前言
- 大家有没有遇到同时跟多个后端同学联调的时候
- 不同后端要我们连他们的本地服务进行调试的时候
- 通常做法，前端要在项目里面修改代理路径
- 是不是挺麻烦的，切来又切去，git的时候还得记得不要push上去了
- 于是，whistle就出现在了我的视线内，好不好用，我们往下看看👀
🐰 简介
whistle，是腾讯团队内部的开发联调场景的效率工具，基于node的跨平台代理解决方案，相对于花瓶更贴切前端开发者。Mock、资源代理转发等都是基础且高频功能。
🍃 安装启动
- 根据文档来进行安装（whistle支持v0.10.0以上版本的Node）
- 根据下载安装后，需要捕获https请求，如果开了没捕获到，可能是没安装证书
- 安装证书请参考文档: wproxy.org/whistle/web…
- 这里采用MacBook Pro进行演示
- 安装证书的时候需要注意，记得选择
始终信任
🦢 配置代理地址
- 可以采用正则去匹配，也可以建多个代理地址，双击绿色打勾表示使用该rule
🔥 查看是否抓包成功
- 在NetWork上点击任意请求网址，能看到右边请求详情，Final Url即是我们代理转发的地址
- 左下方也可以对请求网址进行过滤
💧 Yapi+whistle
- 假设/api/customerMailRead/mailCompanyGroupList是后台pb定义的接口地址其中字段有test：xxx
- 定义自己的Yapi
- whistle创建规则
- 接口mock数据
5. 实际运用
🌹 总结
- 使用whistle解放了前端伙伴们频繁切换请求的双手，也可以不用在本地file定义数据json文件， 可以直接把yapi和mock结合起来用，部分需要交互的联调场景，我们自己也能DIY～～
- 实时抓包：支持 HTTP、HTTPS、HTTP2、WebSocket、TCP 等常见 Web 请求的抓包；
- 修改请求响应：与一般抓包调试工具采用断点的方式不同，Whistle 采用类似系统 host 的配置规则方式；
- 扩展功能：支持通过 Node 编写插件，或作为独立 NPM 包引入项目两种扩展方式。 🐯 whistle的强大不仅于此，还有很多功能等着大家去玩转它 🐯
