Whistle是一款由阿里巴巴开源的前端调试工具，主要用于抓包、改写请求和响应、模拟接口数据等功能。它可以帮助前端开发者在开发过程中快速调试和测试接口。关于如何安装这里就不赘述了，网上有很多教程，这里只演示使用案例

SwitchyOmega

SwitchyOmega‌ 是一款用于 ‌Chrome 和 Firefox 浏览器‌ 的代理管理扩展程序，主要用于‌快速切换多个代理配置‌，支持 HTTP、HTTPS、SOCKS4、SOCKS5 等多种代理协议。它本身‌不提供代理服务‌，需配合已有的代理节点（如 Shadowsocks、V2Ray、Trojan 等）使用。

使用SwitchyOmega将特定的接口代理到whsitle，让whistle能够拦截请求。

关于自动切换情景模式如果根据IP来自动切换模式，只能采用手动别写规则的方式

案例

拦截接口并修改接口的返回值

拦截https://ip/identification/portal/getPortalInfo接口，并修改接口的返回值

规则如下：


https://具体的IP地址/identification/portal/getPortalInfo file://{getPortalInfo.json}

这里是将返回值写在values配置里

注意如果是将返回值直接写在规则里可以参考如下规则


https://10.7.215.68/portal-index/config/logoAndTitle resBody://({"code":200,"result":{"logoName":"123"}})

注意: json字符串不要有空格

延迟请求 / 模拟耗时接口

核心指令：reqDelay / resDelay

reqDelay：请求阶段延迟（客户端发完请求，卡住多久才转发给服务端）
resDelay：响应阶段延迟（服务端返回数据后，卡住多久再发给前端，最常用）

单位：毫秒 ms

延迟响应（推荐，模拟接口慢加载）


# 该接口返回数据前，延迟 3000ms = 3秒
https://xxx.com/api/xxx resDelay://3000

延迟请求发送


https://xxx.com/api/xxx reqDelay://2000

3.随机耗时（模拟网络波动）


# 随机 1~5 秒延迟
https://xxx.com/api/xxx resDelay://1000-5000

搭配弱网限速（更真实慢网络）

延迟 + 限速一起用，完美模拟弱网


# 延迟3秒 + 下行限速 50kb/s
https://xxx.com/api/xxx resDelay://3000 speedDown://50k

模拟接口异常

有时候我们需要验证一些特殊的效果，例如接口异常后是否有提示信息等，这是需要让whistle来修改接口的响应状态

场景 1：延时 3 秒 + 服务端 500/502 错误（最常用）


# 规则: 接口先等3秒，再返回 500 服务器错误
https://xxx.com/api/xxx resDelay://3000 statusCode://500

场景2：服务端错误前端会直接报 net::ERR_EMPTY_RESPONSE


https://xxx.com/api/xxx resDelay://4000 enable://abortRes

或者


http://10.7.215.136:22140/assetportrait/list resDelay://3000 enable://abort

区别： enable://abortRes 会在resDelay配置的延时后报错 enable://abort 会立即报错

响应时间随机延时

Whistle 本身没有 resDelay://随机语法，但可以用 resScript 脚本实现随机响应延时（每次请求延迟都不一样）。

resDelay://ms：固定延迟（响应阶段，返回给客户端前）
reqDelay://ms：固定延迟（请求阶段，发往服务器前）
resScript://{xxx.js}：用 JS 动态生成规则，实现随机延迟

实现随机响应延时（resDelay 随机）

步骤如下：

新建脚本（Values → 新建 randomResDelay.js）

JS
// 随机 1–5 秒延迟（1000–5000ms）
const min = 1000;
const max = 5000;
const delay = Math.floor(Math.random() * (max - min + 1)) + min;

// 对所有请求添加随机 resDelay
rules.push(`* resDelay://${delay}`);

规则引用（Rules 里写）


# 匹配目标域名/路径，走随机延迟脚本
www.example.com resScript://{randomResDelay.js}

随机请求延时

和随机响应类似,脚本如下

js
// 随机 500–3000ms 请求延迟
const delay = 500 + Math.floor(2500 * Math.random());
rules.push(`* reqDelay://${delay}`);

whistle 小技巧

network只显示指定的请求

如果浏览器安装了某些插件，在network还能看到这些插件的请求，有点干扰我们的实现，我们只关注我们指定的ip或域名下的请求，其它的隐藏掉该如何做呢？可以通过rules实现


# 1. 先隐藏所有请求
* enable://hide
# 2. 放行你要的域名（写在下面）
api.test.com enable://show
10.7.215.68 enable://show

# 匹配目标接口
https://ip/identification/portal/getPortalInfo file://{getPortalInfo.json}
https://ip/identification/portal/loginByTicket file://{loginByTicket.json}
## filter,在Network不会出现某些域名的请求
/qq.com/ filter://hide

resBody紧跟响应体字符串

如果响应体内容很少，不用写在values，规则resBody://(json字符串)，注意json字符串不要有空格


https://10.7.215.68/portal-index/config/logoAndTitle resBody://({"code":200,"result":{"logoName":"123"}})

目录