乐闻世界logo
5月27日 21:56

whistle 代理工具有哪些应用场景？

答案

Whistle 是基于 Node.js 的跨平台 Web 调试代理工具，通过规则文本拦截和修改 HTTP/HTTPS 请求与响应。相比直接改代码或配 hosts，核心优势是不改代码、不切环境、规则可复用且仅对本地生效。

前端开发中最常用的五个场景：

本地联调

将线上域名指向本地开发服务，省去切环境或改代码：

bash
api.example.com host 127.0.0.1:3000

联调只影响你自己，其他同事访问线上不受干扰。多个后端服务可同时指向不同本地端口：

bash
api.example.com host 127.0.0.1:3000
pay.example.com host 127.0.0.1:4000

需要同时联调 WebSocket 时也没问题，whistle 默认支持 ws/wss 协议代理。

接口 Mock

后端接口未就绪时，用本地 JSON 文件返回模拟数据：

bash
api.example.com/user resBody://{mock-user.json}

在 Whistle 的 Values 面板中创建 mock-user.json，写入模拟响应体即可。也可以直接指定状态码：

bash
api.example.com/error resStatus://500

用 resDelay://3000 模拟接口超时，验证前端的 loading 和兜底逻辑。需要按条件 Mock 时，用 resScript 编写动态逻辑：

javascript
// timeout.js — 支付接口模拟 5 秒超时
if (rules.requestHeaders.referer && rules.requestHeaders.referer.indexOf('/pay') !== -1) {
  rules.responseDelay = 5000;
  rules.responseStatus = 504;
}

跨域处理

开发阶段给响应注入 CORS 头，绕过浏览器同源限制：

bash
api.example.com resHeaders://{cors.json}

cors.json 内容示例：

json
{
  "access-control-allow-origin": "*",
  "access-control-allow-methods": "GET,POST,PUT,DELETE,OPTIONS",
  "access-allow-headers": "Content-Type,Authorization"
}

比后端加跨域配置更安全——只有你自己生效，不会影响线上环境。

移动端抓包与调试

手机配代理指向电脑 IP:8899，安装根证书后可捕获 HTTPS 请求：

  1. 手机 Wi-Fi 设置中配置 HTTP 代理，服务器填电脑 IP，端口填 8899
  2. 手机浏览器访问 ip:8899，下载并安装根证书
  3. iOS 需在"设置 → 通用 → 关于本机 → 证书信任设置"中手动启用信任
  4. Android 7+ 默认不信任用户证书，需用 whistle.startProxy(8899, true) 开启全局代理或 root 后安装到系统证书目录

配合内置 weinre 远程调试移动端页面 DOM 和控制台：

bash
m.example.com weinre://debug

也可以安装 whistle.inspect 插件注入 vConsole/Eruda，在 App 内直接查看调试面板：

bash
npm i -g whistle.inspect
m.example.com whistle.inspect://vconsole

异常场景模拟

用规则快速构造边界条件，测试前端兜底逻辑：

bash
# 模拟接口延迟 3 秒
api.example.com/api resDelay://3000
# 模拟 500 错误
api.example.com/api resStatus://500
# 模拟弱网（限速 30kb/s）
api.example.com/api reqSpeed://30

复杂条件用 resScript 处理，简单场景一条规则就够。

规则管理建议

  • 用 # 注释 标记每条规则的用途，方便团队协作
  • JSON 数据统一放在 Values 面板管理，别直接内联在规则里
  • 调试完及时关闭代理并移除证书，防止隐私泄露和证书风险
  • 善用 ignore://* 跳过不需要代理的请求，减少干扰

追问

  • whistle 和 Charles/Fiddler 的区别？ —— whistle 免费开源、基于规则文本配置（可版本管理）、支持 Node 插件扩展；Charles/Fiddler 偏 GUI 操作，Charles 收费且仅 macOS/Windows，Fiddler 仅 Windows。whistle 天然跨平台且规则可团队共享。

  • 如何让 whistle 代理 HTTPS 请求？ —— 需要安装并信任 whistle 的根证书：在 Whistle 界面点击 HTTPS → 安装根证书，桌面端安装到系统钥匙串/iOS 信任设置中并启用信任，Android 7+ 用户证书默认不被信任需特殊处理。浏览器和系统层面都需要配置信任。

  • SwitchyOmega 和 whistle 是什么关系？ —— SwitchyOmega 是浏览器代理切换插件，负责把浏览器流量导向 whistle 所在的地址和端口；whistle 负责具体的规则匹配和请求处理。两者配合：SwitchyOmega 控制哪些流量走代理，whistle 决定代理后怎么处理。

  • whistle 规则的优先级是什么？ —— 默认从上到下匹配，先匹配到的规则优先。可用 enable://proxyFirst 改为代理优先模式。ignore:// 规则会跳过所有其他规则，优先级最高。同名规则后写的会覆盖前面的。

  • whistle 插件有什么用？ —— 通过 Node 模块扩展功能，如 whistle.inspect 注入 vConsole/Eruda、whistle.vase 做接口录制回放、whistle.autocoder 自动生成规则。安装后 w2 restart 即可使用。

标签：Whistle