跨平台 Web 调试代理工具 Whistle

原创已于 2025-05-22 05:11:39 修改 · 1k 阅读

27 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #Whistle #github #开源 #后端

于 2025-05-22 05:00:02 首次发布

开发工具专栏收录该内容

6 篇文章

订阅专栏

跨平台 Web 调试代理工具 Whistle 完全指南：原理、使用与实战

一. Whistle 是什么？

Whistle 是一款基于 Node.js 开发的 跨平台 Web 调试代理工具，支持 Windows、macOS 和 Linux。它通过拦截和修改 HTTP/HTTPS 请求，帮助开发者快速调试网络问题、Mock 数据、分析性能瓶颈，是前端开发和网络抓包的利器。

二. 核心用途与优势

核心功能

抓包分析： 实时监控请求/响应内容（Header、Body、Cookie 等）。
请求转发： 修改请求目标地址（类似 Hosts 或 Nginx）。
Mock 数据： 拦截请求并返回自定义响应（JSON、HTML 等）。
内容替换： 动态修改 HTML/CSS/JS 文件内容。
弱网模拟： 延迟响应测试页面性能。
HTTPS 调试： 支持解密 HTTPS 流量（需安装根证书）。

优势

轻量灵活： 基于 Node.js，无需复杂配置。
规则驱动： 通过简单语法实现复杂需求。
跨平台： Windows/macOS/Linux 全支持。

三. 工作原理

Whistle 本质上是一个本地代理服务器，工作流程如下：

代理拦截： 浏览器或系统流量经过 Whistle 代理（默认端口 8899）。
规则匹配： 根据用户配置的规则（如域名、路径、正则表达式），决定是否修改请求或响应。
请求处理： 支持重定向、Mock、内容替换等操作。
HTTPS 解密： 通过中间人（MITM）方式解密 HTTPS 流量（需信任 Whistle 根证书）

四. 安装与基础使用

whistle安装过程需要以下步骤(缺一不可)：

安装Node
安装whistle
启动whistle
配置代理
安装根证书

1. 安装Node

	whistle支持v0.10.0以上版本的Node
	Windows或Mac系统，访问Node.js，安装LTS版本的Node
	安装完Node后，执行下面命令，查看当前Node版本

	node -v

如果能正常输出Node的版本号，
表示Node已安装成功(Windows系统可能需要重新打开cmd)。

在这里插入图片描述

2. 安装whistle

Node安装成功后，执行如下npm命令安装whistle 
（Mac或Linux的非root用户需要在命令行前面加sudo，
如：sudo npm install -g whistle）

# 全局安装 Whistle 
npm install -g whistle

3. 启动whistle


# 启动 Whistle 
w2 start 

# 停止 Whistle 
w2 stop

# 重启 Whistle
w2 restart

启动成功如下图
在这里插入图片描述

4. 配置代理
浏览器打开 http://127.0.0.1:8899，进入 Whistle 的 Web 控制台。

可在控制台中添加路由规则
注：写完后需Ctrl + S 保存使其生效；若没保存，则在路面名称前面出现星号 * 的样式
在这里插入图片描述

5. 安装根证书
该证书通过中间人（MITM）方式解密 HTTPS 流量（需信任 Whistle 根证书）

（若不需要https代理可忽略此项）

1. 点击https选项
2. 勾选选项
3. 点击dowload下载证书

下载rootCA.crt证书完成后双击该证书即可进行安装
在这里插入图片描述

五. 结合 SwitchyOmega 配置代理

为什么需要 SwitchyOmega？
SwitchyOmega 是 Chrome/Firefox 的代理管理插件，可实现：

按需切换代理： 灵活控制哪些流量走 Whistle。
多场景配置： 区分开发、测试、生产环境。

配置步骤

安装 SwitchyOmega
- 方式一: 官网直接下载
  https://github.com/FelisCatus/SwitchyOmega/releases
- 方式二：百度网盘已下载最新版（截止到2025年5月） switchyomega-2.5.20
  https://pan.baidu.com/s/1IhoT_tZi900uX8Fw-TgqOA?pwd=y85e
创建情景模式
- 新建情景模式（如 Whistle），选择“代理服务器”。
- 填写参数：
```
协议：HTTP
服务器：127.0.0.1
端口：8899
```
- 配置自动切换规则
  - 在 auto switch 标签页中，添加规则：
  - 其他域名默认直连，避免影响非开发流量。
- 启用代理
  - 点击浏览器右上角 SwitchyOmega 图标，选择 Whistle 或 auto switch 模式。

六. 实战场景与示例

1. 场景一：Mock API 数据

# 规则语法
testtest.com/user resBody://{test.json}

在这里插入图片描述

效果： 访问 http://testtest.com/user 直接返回自定义 JSON。

2. 场景二：修改请求域名

# 将线上请求转发到本地开发服务器
https://testtest.com/ http://127.0.0.1:8080/

3. 场景三：替换 CSS 文件内容

https://testtest.com/css/style.css replace://(red)/blue

七. 常见问题解答

Q1：HTTPS 抓包失败？

解决方法：在 Whistle 控制台下载并安装根证书（RootCA 标签页）。

Q2：规则不生效？

检查步骤：
1. 确认代理配置正确（SwitchyOmega 是否启用）。
2. 规则语法是否正确（无拼写错误，路径匹配）。
3. 重启 Whistle：w2 restart。

Q3：如何共享配置？

方案：导出规则文件（Rules → Export），或使用插件同步到团队。

结语

Whistle 的作者是中国的开发者 avwo（GitHub 用户名），该项目是开源工具，有效提升开发效率，结合 SwitchyOmega 可实现精准流量控制。通过灵活的规则配置，开发者可以轻松应对接口调试、性能优化等场景。目前代码托管在 GitHub 上，遵循 MIT 协议，并由作者及开源社区共同维护。

开源时间：2016 年
Star 数：超过 14.8k（截至 2025 年 5 月），可见其广泛认可度。
中文文档完善：社区支持友好（可通过 GitHub Issues 提交问题）。
插件生态：支持第三方插件扩展功能（如 whistle.inspect、whistle.vase 等）。
Whistle GitHub 仓库：https://github.com/avwo/whistle
Whistle文档：https://wproxy.org/whistle