whistle规则配置
在前端开发中，我们经常会遇到各种调试场景，比如：切换接口地址、注入本地资源、模拟接口返回数据等。如果每次都要修改代码或后端配合，无疑会浪费很多时间。这时，一款好用的调试代理工具就显得非常重要。
Whistle 是一个基于 Node.js 的 Web 调试代理工具，支持请求转发、重定向、本地资源注入、Mock 接口等功能，特别适合前端在开发和联调阶段使用。本文将系统地介绍 Whistle 的安装、启动及常用规则配置，可以更高效地完成代码的调试工作。
简介
Whistle 支持 HTTP/HTTPS/WS/WSS 请求，具备以下核心功能：
- 本地资源注入（JS、CSS、JSON 等）
- 请求与响应的头信息修改
- 接口代理、重定向
- Mock 接口数据返回
- 注入脚本、页面覆盖
- 响应延迟、状态码模拟等
只需要写几条规则，就能大幅度提升调试效率。
安装与启动
安装
1 | npm install -g whistle |
启动服务
1 | # 启动 |
启动后，访问管理界面：http://127.0.0.1:8899 查看和配置规则
规则配置基础
Whistle 的规则结构如下：
1 | 请求匹配路径 操作指令://参数 |
比如：
1 | www.example.com/app.js file:///Users/me/app.js |
表示将线上 JS 文件替换为本地文件。
常用规则示例
请求重定向
1 | www.example.com/index.js http://127.0.0.1:3000/mock.js |
将请求定向到本地 mock 数据。
注入本地资源
1 | www.example.com/app.css file:///Users/you/project/app.css |
注入本地样式文件，用于样式调试。
接口代理转发
1 | api.example.com/ forward://127.0.0.1:8080/ |
将接口请求转发到本地服务。
添加请求头
1 | api.example.com/ reqHeaders://{ "token": "abc123" } |
为请求添加 token 头信息。
修改响应头
1 | api.example.com/ resHeaders://{ "Cache-Control": "no-cache" } |
修改响应头内容，控制缓存策略等。
Mock 返回内容
1 | api.example.com/data.json resBody://{ "code": 0, "data": [] } |
直接返回指定 JSON，无需发起实际请求。
延迟响应模拟慢网速
1 | www.example.com/ delay://3000 |
延迟 3 秒返回，适合测试 loading 效果。
状态码模拟
1 | api.example.com/ statusCode://500 |
模拟接口返回 500 错误，测试异常处理逻辑。
返回 HTML 内容
1 | www.example.com/page resBody://html:<h1>调试中</h1> |
直接返回 HTML 页面，适合页面测试。
正则路径匹配
1 | /www\.example\.com\/user\/\d+ resBody://{ "id": 1, "name": "mock user" } |
匹配 /user/123、/user/456 等路径，返回相同数据。
注入 JS/CSS 脚本
1 | www.example.com/ injectScript://file:///Users/you/debug.js |
无需改动源代码即可调试页面脚本或样式。
返回本地 JSON 文件内容
1 | api.example.com/data.json file:///Users/you/mock/data.json |
用本地 JSON 文件替换接口返回，适合本地 mock。
合并多个请求资源
1 | static.example.com/*.js reqMerge:// |
合并多个资源请求，适合合并 mock 接口或批量重定向。
组合多个规则
1 | www.example.com/ rule://rule1 rule2 rule3 |
同时激活多个规则组，提升管理效率。
其他建议与技巧
- 可以在规则中使用通配符
*，例如：*.js匹配所有 JS 文件 - 正则匹配需开启右上角「正则匹配」开关
- 规则越靠上，优先级越高，建议先写精确规则
- 支持规则导入/导出，方便跨设备使用
- 建议配合
SwitchyOmega、ZeroOmega设置系统代理，快速切换调试环境
whistle规则配置