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



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

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

![image.png](/static/img/b7949d6850b4cfe945002d28946f8096.image.webp)

关于自动切换情景模式
![image.png](/static/img/8233c7426fc0d2da7878f942499af419.image.webp)
如果根据IP来自动切换模式，只能采用手动别写规则的方式

# 案例

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

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

![image.png](/static/img/dc5c1a0376e6c05720908e2ad8db6b99.image.webp)
规则如下：
```
https://具体的IP地址/identification/portal/getPortalInfo file://{getPortalInfo.json}
```
这里是将返回值写在values配置里

![image.png](/static/img/d5e6d57db7f8f7396d395b7a02f38713.image.webp)

注意如果是将返回值直接写在规则里可以参考如下规则
```
https://10.7.215.68/portal-index/config/logoAndTitle resBody://({"code":200,"result":{"logoName":"123"}})
```
注意: json字符串不要有空格

## 延迟请求 / 模拟耗时接口
核心指令：reqDelay / resDelay
- reqDelay：请求阶段延迟（客户端发完请求，卡住多久才转发给服务端）
- resDelay：响应阶段延迟（服务端返回数据后，卡住多久再发给前端，最常用）

单位：毫秒 ms
1. 延迟响应（推荐，模拟接口慢加载）
```
# 该接口返回数据前，延迟 3000ms = 3秒
https://xxx.com/api/xxx resDelay://3000
```
2. 延迟请求发送
```
https://xxx.com/api/xxx reqDelay://2000
```
3.随机耗时（模拟网络波动）
```
# 随机 1~5 秒延迟
https://xxx.com/api/xxx resDelay://1000-5000
```
4. 搭配弱网限速（更真实慢网络）

    延迟 + 限速一起用，完美模拟弱网
    ```
    # 延迟3秒 + 下行限速 50kb/s
    https://xxx.com/api/xxx resDelay://3000 speedDown://50k
    ```

![image.png](/static/img/ae6097c68ee2c48a0d3917ac65e5093d.image.webp)

## 模拟接口异常
有时候我们需要验证一些特殊的效果，例如接口异常后是否有提示信息等，这是需要让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 随机）
步骤如下：
1. 新建脚本（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}`);
    ```
2. 规则引用（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"}})
```

whistle 开发调试实战

发布订阅

snabbdom源码解读

typescript的装饰器有点类似Java里的注解，方便便捷对原有函数进行特定功能增强，本文列举了一些小编用到的案例，方便大家参考。



# 统计函数方法运行消耗的时间

```ts
const methodRunTime = () => {
    return function(target:any,methodName:string,desc:PropertyDescriptor){
        // 保存原来的函数
        const originMethod: Function = desc.value;
        // 改造函数实现
        desc.value = function(...args:any[]){
            const start = Date.now();
            try {
                originMethod.apply(this,args);
            } catch (error) {
                throw error
            } finally {
                const end = Date.now()
                console.log(`函数 ${methodName} 运行时间： ${end - start} ms`)
            }            
        }
    }
}

// 测试案例使用
@methodRunTime()
function fun1(){
    // Todo
}
```

# 同步异常捕捉
上面的代码稍加改造也可以成为同步异常捕捉器
```ts
const methodTryCatch = (errBubble = false) => {
    return function(target:any,methodName:string,desc:PropertyDescriptor){
        // 保存原来的函数
        const originMethod: Function = desc.value;
        // 改造函数实现
        desc.value = function(...args:any[]){
            try {
                originMethod.apply(this,args);
            } catch (error) {
                console.error(`函数 ${methodName} 运行异常 ${error}`)
                if(errBubble){
                   throw error 
                }
            }           
        }
    }
}

// 测试案例使用
@methodTryCatch()
function fun1(){
    // Todo
}
```