1. 什么是 whistle?
whistle(读音[ˈwɪsəl],拼音[wēisǒu])基于Node实现的跨平台web调试代理工具,类似的工具有Windows平台上的Fiddler,主要用于查看、修改HTTP、HTTPS、Websocket的请求、响应,也可以作为HTTP代理服务器使用。
不同于Fiddler通过断点修改请求响应的方式,whistle采用的是类似配置系统hosts的方式,一切操作都可以通过配置实现,支持域名、路径、正则表达式、通配符、通配路径等多种匹配方式,且可以通过Node模块扩展功能。
2. 安装启动
npm i whistle -g 全局安装
w2 start 启动服务
w2 stop 停止服务
3. whistle 的代理
Chrome浏览器通过网上应用商店去安装SwitchyOmega插件
或者设置系统代理
设置-系统-代理设置
4. 安装证书
https请求需要安装证书,http请求不需要
PC端
Android设备,需在同一wifi下
扫码下载并安装证书
IOS设备
【Wi-Fi连接】-【代理-手动】-【配置服务器(本机IP地址)&端口(8899)】
设置 -> 通用 -> 关于本机 -> 证书信任设置,勾选whistle证书的就可以了
注意:
必须要配置代理后,才能扫码下载,否则会提示你网页无法访问哦。
5. 自定义某个域名下的请求展示样式
www.baidu.com style://color=@fff&fontStyle=italic&bgColor=blue
6. 模拟返回异常状态码
whistle 支持我们修改接口返回的状态码,如果你想测试接口返回异常状态码(403、404、500、503等等)的情况,此时你的异常处理逻辑是否生效,但后端不愿意配合你把接口改成500,那么你就可以自己用 whistle 来模拟
www.baidu.com/api/sys/ann… statusCode://404
7. 修改接口返回数据
可以模拟返回假数据,让前端调试可以不依赖后端
在values新建一个.json文件,文件内可以编写你需要的数据
www.baidu.com/api/sys/ann… resBody://{test.json}
8. 注入vConsole
A.下载插件 npm i -g whistle.inspect
B. www.baidu.com whistle.inspect://
C. 重启 whistle
9. 参考资料
1. Github 仓库:github.com/avwo/whistl…
2. 官方插件仓库:github.com/whistle-plu…
3. 详细文档:wproxy.org/whistle/