whistle介绍

399 阅读2分钟

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 启动服务

image.png

w2 stop 停止服务

3. whistle 的代理

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

或者设置系统代理

设置-系统-代理设置

image.png

4. 安装证书

https请求需要安装证书,http请求不需要

PC端

image.png

Android设备,需在同一wifi下

image.png

扫码下载并安装证书

image.png

IOS设备

【Wi-Fi连接】-【代理-手动】-【配置服务器(本机IP地址)&端口(8899)】

image.png

设置 -> 通用 -> 关于本机 -> 证书信任设置,勾选whistle证书的就可以了

注意:
必须要配置代理后,才能扫码下载,否则会提示你网页无法访问哦。

5. 自定义某个域名下的请求展示样式

www.baidu.com style://color=@fff&fontStyle=italic&bgColor=blue

image.png

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}

image.png

image.png

image.png

8. 注入vConsole

A.下载插件 npm i -g whistle.inspect

B. www.baidu.com whistle.inspect://

C. 重启 whistle

image.png

9. 参考资料

1. Github 仓库:github.com/avwo/whistl…

2. 官方插件仓库:github.com/whistle-plu…

3. 详细文档:wproxy.org/whistle/