whistle 在实际开发中有哪些应用场景和实战技巧？ - 面试题

答案

Whistle 在实际开发中有许多实用的应用场景，可以大大提高开发效率和问题排查能力。

常见应用场景

1. 本地开发调试

场景描述： 前端开发时需要调用后端接口，但后端服务在本地运行，需要将线上域名指向本地服务。

解决方案：

shell
# 将线上域名指向本地服务
www.example.com host 127.0.0.1:3000
api.example.com host 127.0.0.1:3001

# 或者使用 forward 操作符
www.example.com forward http://127.0.0.1:3000

优点：

无需修改代码中的域名
快速切换本地和线上环境
便于前后端联调

2. 解决跨域问题

场景描述： 前端开发时遇到跨域问题，需要添加 CORS 响应头。

解决方案：

shell
# 添加 CORS 响应头
www.example.com resHeaders://{cors-headers.json}

cors-headers.json:

json
{
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
  "Access-Control-Allow-Headers": "Content-Type, Authorization"
}

优点：

无需后端修改代码
快速解决跨域问题
适合开发环境使用

3. 接口数据模拟

场景描述： 后端接口尚未开发完成，前端需要先开发功能，需要模拟接口返回数据。

解决方案：

shell
# 模拟用户接口
www.example.com/api/user resBody://{mock-user.json}

# 模拟列表接口
www.example.com/api/list resBody://{mock-list.json}

# 使用脚本动态生成数据
www.example.com/api/dynamic resScript://{dynamic-mock.js}

mock-user.json:

json
{
  "code": 0,
  "data": {
    "id": 1,
    "name": "张三",
    "age": 25
  }
}

优点：

前后端并行开发
提高开发效率
便于测试各种场景

4. 多环境切换

场景描述： 需要在开发、测试、生产环境之间快速切换，测试不同环境的功能。

解决方案：

创建不同环境的配置文件：

rules-dev:

shell
www.example.com host 127.0.0.1:3000
api.example.com host 127.0.0.1:3001

rules-test:

shell
www.example.com host test.example.com
api.example.com host api-test.example.com

rules-prod:

shell
www.example.com host prod.example.com
api.example.com host api-prod.example.com

切换环境：

bash
# 切换到开发环境
w2 restart -f rules-dev

# 切换到测试环境
w2 restart -f rules-test

# 切换到生产环境
w2 restart -f rules-prod

优点：

快速切换环境
避免修改代码
提高测试效率

5. 性能优化测试

场景描述： 需要测试网站性能，找出性能瓶颈。

解决方案：

shell
# 启用 gzip 压缩
www.example.com resHeaders://{compression-headers.json}

# 设置缓存策略
www.example.com/static/* resHeaders://{cache-headers.json}

# 模拟慢速网络
www.example.com resScript://{slow-network.js}

slow-network.js:

javascript
module.exports = function(req, res) {
  setTimeout(() => {
    res.end(JSON.stringify({ code: 0, data: 'success' }));
  }, 2000); // 延迟2秒
};

优点：

模拟真实网络环境
发现性能问题
优化用户体验

6. 移动端调试

场景描述： 需要在移动设备上调试 Web 应用或混合应用。

解决方案：

配置手机代理
- 手机和电脑连接同一 Wi-Fi
- 配置手机代理指向电脑 IP 和 whistle 端口
- 安装 HTTPS 证书
添加移动端专用规则

shell
# 移动端接口模拟
m.example.com/api/user resBody://{mobile-mock-user.json}

# 移动端跨域处理
m.example.com resHeaders://{cors-headers.json}

优点：

真实设备测试
捕获移动端网络请求
解决移动端特定问题

7. 接口错误模拟

场景描述： 需要测试应用对各种错误情况的处理，如网络错误、服务器错误等。

解决方案：

shell
# 模拟 500 错误
www.example.com/api/error resBody://{"code":500,"message":"服务器错误"}

# 模拟超时
www.example.com/api/timeout resScript://{timeout.js}

# 模拟网络错误
www.example.com/api/network-error resScript://{network-error.js}

timeout.js:

javascript
module.exports = function(req, res) {
  // 不返回响应，模拟超时
  setTimeout(() => {
    // 可选：返回超时错误
    res.statusCode = 408;
    res.end(JSON.stringify({ code: 408, message: '请求超时' }));
  }, 30000);
};

优点：

测试异常处理逻辑
提高应用健壮性
便于排查问题

8. 接口数据修改

场景描述： 需要修改接口返回的数据，测试不同数据场景。

解决方案：

shell
# 修改响应数据
www.example.com/api/user resScript://{modify-data.js}

# 替换响应内容
www.example.com resReplace://old-string/new-string

modify-data.js:

javascript
module.exports = function(req, res) {
  const originalEnd = res.end;
  
  res.end = function(chunk, encoding) {
    if (chunk) {
      const body = chunk.toString();
      const jsonData = JSON.parse(body);
      
      // 修改数据
      jsonData.data.status = 'active';
      jsonData.data.timestamp = Date.now();
      
      originalEnd.call(res, JSON.stringify(jsonData), encoding);
    } else {
      originalEnd.call(res, chunk, encoding);
    }
  };
};

优点：

快速测试不同数据场景
无需后端修改
提高测试效率

9. 接口请求修改

场景描述： 需要修改请求参数或请求头，测试不同请求场景。

解决方案：

shell
# 修改请求头
www.example.com reqHeaders://{custom-headers.json}

# 使用脚本修改请求
www.example.com reqScript://{modify-request.js}

custom-headers.json:

json
{
  "X-Custom-Header": "Custom Value",
  "X-Request-ID": "12345"
}

modify-request.js:

javascript
module.exports = function(req, res) {
  // 添加请求参数
  if (req.url.includes('/api/user')) {
    const separator = req.url.includes('?') ? '&' : '?';
    req.url += separator + 'debug=true';
  }
  
  // 修改请求头
  req.headers['X-Debug-Mode'] = 'true';
};

优点：

测试不同请求场景
添加调试信息
便于问题排查

10. WebSocket 调试

场景描述： 需要调试 WebSocket 连接和消息。

解决方案：

shell
# WebSocket 代理
ws.example.com host 127.0.0.1:8080

# 使用插件调试 WebSocket
ws.example.com plugin://websocket-debugger

优点：

捕获 WebSocket 消息
调试实时通信
解决连接问题

实战技巧

1. 规则分组管理

使用注释和分组来管理大量规则：

shell
# ==================== 本地开发 ====================
www.local.com host 127.0.0.1:3000
api.local.com host 127.0.0.1:3001

# ==================== 测试环境 ====================
www.test.com host test.example.com
api.test.com host api-test.example.com

# ==================== 数据模拟 ====================
www.example.com/api/user resBody://{mock-user.json}
www.example.com/api/list resBody://{mock-list.json}

2. 快速启用/禁用规则

在规则前添加 # 来快速禁用规则：

shell
# www.example.com host 127.0.0.1:3000  # 禁用
www.example.com host test.example.com  # 启用

3. 使用 Values 文件

创建 Values 文件存储常用配置：

values.json:

json
{
  "local-ip": "127.0.0.1",
  "local-port": "3000",
  "test-host": "test.example.com"
}

在规则中使用：

shell
www.example.com host {{local-ip}}:{{local-port}}

4. 导出和导入配置

定期导出配置文件，便于备份和分享：

bash
# 导出配置
cp ~/.whistle/rules ~/backup/whistle-rules-$(date +%Y%m%d)

# 导入配置
cp ~/backup/whistle-rules-20240101 ~/.whistle/rules

最佳实践

定期备份配置
- 避免配置丢失
- 便于回滚
使用版本控制
- 使用 Git 管理配置文件
- 便于团队协作
添加清晰注释
- 说明规则用途
- 便于维护
定期清理规则
- 删除不再使用的规则
- 保持配置简洁
安全考虑
- 不要在公共网络使用
- 调试完成后关闭代理
- 保护证书安全