痛点
- 开发环节
需要切换环境时，现在有两种方式：
- 修改 Hosts，不方便
- 修改项目中的 proxy 配置，会重启项目
- 联调环节
后端：【再调一下试试】
- 测试环节
当测试反馈了一个 bug，开发：【我这好好的】【我这复现不了】
- 上线后
生产环境有 bug，如何本地调试
whistle 简介
whistle 是基于 Node 实现的跨平台 Web 调试代理工具，类似 Windows 平台 的 Fiddler，macOS 平台的 Charles。
快速上手
安装
安装 Node.js
在 Node.js 官网 安装最新的 LTS 版本
安装 whistle
npm install -g whistle
# 非 root 需要 sudo
sudo npm install -g whistle安装浏览器代理扩展 SwitchyOmega
- Chrome：Proxy SwitchyOmega
- Firfox：Proxy SwitchyOmega
启动
whistle 安装完成后，可以使用几个一样的命令 wisl、whistle、w2、wproxy
# 默认启动
w2 start
# 指定端口启动
w2 start -p 8080
# 重启
w2 restart配置代理
配置 SwitchyOmega
安装后新建代理服务器
转发请求到 whistle
使用设置的配置
基础用法
抓包调试
访问 http://local.whistlejs.com/#network 查看管理页面
此时浏览器的请求会显示在这里
切换环境
在 Rules 页面可以添加配置
可以添加多份配置来切换环境
HTTPS
参考 文档 配置 HTTPS 证书
解决开头的痛点
-
环境切换
-
请求重放
-
导出导入
支持将请求导出到文件进行分享
也可以导入 Chrome DevTools、Charles 和 Fiddler 导出的文件
备注：Chrome DevTools 也支持导出导入，但目前只能批量导出
进阶用法
修改请求与响应
请求修改：reqHeaders
响应修改：resHeaders
Mock 数据：使用 reqBody 替换本地文件
设置跨域
www.example.com resCors://enable手机端调试
输出 log
www.example.com log://注入 vconsole
安装inspect插件：
w2 i whistle.inspect添加配置
www.example.com whistle.inspect://其他
相关项目
GUI
- 阿里的 lightproxy
- 有赞的 Zan Proxy
抓包调试平台