Whistle这个工具我用了大概三年多从一开始只是临时拿来抓包看接口到后来直接把它做成了团队联调的固定环节可以说是我电脑里安装频率最高的开发辅助软件之一。如果你平时做前端开发、移动端调试或者经常需要排查线上接口问题那 Whistle 几乎是绕不开的一个选择。它是一款基于 Node.js 的跨平台抓包工具安装简单、规则灵活还支持手机端代理抓包对比 Fat、Charles 这些老牌工具Whistle 在规则配置和二次扩展上明显更轻巧顺手。这篇文章不打算写成一板一眼的说明书我更想用实际操练过的经验把 Whistle 从安装到日常调试再到问题排查这一整套流程给你捋清楚。尤其是那些文档里不会写、但实际用起来特别关键的细节比如证书装不上怎么办、为什么手机连不上代理、规则不生效的几种原因这些我在现场踩过不少坑这次一并整理出来。1. 先聊聊抓包这件事1.1 抓包到底在干什么抓包这个词听着挺高深其实本质就是把自己设备上的网络流量拦下来看一眼。你在浏览器里打开一个页面背后无非是发了很多 HTTP/HTTPS 请求请求里带了什么参数、返回了什么数据、有没有报错这些信息在开发者工具里能看到一部分但一旦遇到 App、小程序、电视盒子或者你想模拟弱网、改动返回结果浏览器自带那些工具就不太够了这时候就得靠独立的抓包工具。说白了抓包就是“中间人”式的流量观察。正常情况下客户端直接跟服务端通信。打开 Whistle 之后它会在本地起一个代理服务你的请求先经过它它复制一份记录下来再转发给服务端。服务端的响应回来它同样扒开看一眼再回传给你。过程中它不改数据只是看这就是抓包的基本原理。如果需要修改就靠规则配置来介入。1.2 为什么选 Whistle而不是 Fiddler 或 Charles市面上能抓包的工具不算少Fiddler 是 Windows 老牌工具Charles 在 macOS 上用户量也很大。我之所以推荐 Whistle不光是它免费开源这一条更看重几点实际的体验差异。Fiddler 的界面默认比较拥挤配置规则虽然强大但上手有门槛Charles 的 UI 确实精致但商业授权价格不便宜而且跨平台时每次换电脑都要重新激活。Whistle 走的是另一个路线安装简单配置走文件界面是 Web 面板。你启动它之后直接在浏览器里打开 127.0.0.1:8899 就能看到操作界面不用装客户端这个特性在很多场景下非常香尤其是我有时候在服务器上临时抓包直接远程部署一个 Whistle 就能用。但真正让我最终倒向 Whistle 的是它的规则系统。Fiddler 和 Charles 都有规则功能可写起来总有点绕。Whistle 的规则更接近“如果什么就怎么样”的直白逻辑比如把某个域名代理到测试环境、给某个接口插入一段脚本、把图片请求全部转到本地目录这些场景在 Whistle 里写起来非常顺手。1.3 适合什么人用如果你是下面这几类人Whistle 会特别合适前端工程师需要本地开发时把线上域名代理到本地服务或者排查线上问题时的接口数据。移动端开发者需要抓手机 App 的请求看接口参数和返回。测试工程师需要做接口回归、模拟不同返回值、验证异常场景。后端开发想快速确认某个接口到底收到什么内容、响应是不是功。哪怕是刚入门的新手只要理解“代理”和“请求/响应”这两个概念跟着下面的步骤走一遍也能很快上手。Whistle 设置了很低的门槛但上限又很高这也是它能在一众抓包工具里站稳脚跟的原因。2. Whistle 安装与环境准备2.1 先装 Node.jsWhistle 是跑在 Node.js 上的所以第一步得确保电脑里有 Node 环境。如果你以前装过前端工具链大概率已经有 Node 了可以在终端里敲node -v看一眼能输出版本号就说明环境没问题。如果还没装直接去 Node.js 官网下载 LTS 版本安装时一路下一步就行。提醒一句装完以后一定要重启终端否则新加的环境变量不会生效。我早期给别人配环境时见过好几回新人装完 Node 不重启终端然后直接敲npm提示找不到命令当场就懵了。Node 版本方面Whistle 对版本要求不算苛刻Node 12 以上的版本基本都能跑新版本我建议直接用最新的 LTS省心。2.2 安装 Whistle装好 Node 之后安装 Whistle 就一条命令的事npm install -g whistle如果是在 macOS 或者 Linux 上安装可能涉及全局权限问题命令前加sudo就行。Windows 用户建议以管理员身份打开命令行工具再执行避免后面操作文件时权限不够。安装完成后验证一下whistle -v能输出版本号就说明安装成功。这里有个小细节npm 全局安装的模块可执行文件默认在 Node 的安装目录下如果whistle命令提示找不到多半是全局目录没配进 PATHWindows 上重新打开终端基本能解决macOS 上检查一下/usr/local/bin是否在 PATH 里。2.3 启动与访问控制台启动 Whistle 的命令是w2 start注意新版 Whistle 的命令是w2老版本叫whistle。如果你看网上的老教程可能会看到whistle start新版本下直接敲w2 start即可。启动成功后终端会提示默认代理端口 8899然后浏览器访问http://127.0.0.1:8899看到 Whistle 的操作面板就说明服务起来了。这个面板本身是纯本地 Web 应用不需要联网。面板左侧是抓包列表右侧是请求详情和规则配置区。还有一个比较隐蔽但实用的点面板页面本身不通过代理。你访问 127.0.0.1 的时候不会经过 Whistle 自己这避免了“代理工具自己请求自己的死循环”问题。如果你后面配置了全局代理还发现面板打不开了多半是代理设置把 localhost 也代理了记得在系统代理排除列表里加上 127.0.0.1 和 localhost。3. Whistle 核心设计思路与规则系统3.1 代理工作模式Whistle 启动后会在本机开一个 HTTP 代理端口默认是 8899。你把设备可以是电脑本身也可以是手机的网络代理指向这个端口流量就会被 Whistle 接管。这里有个概念要分清楚系统代理和应用代理不是一回事。比如 Chrome 默认跟随系统代理设置所以你在系统里把代理指向 127.0.0.1:8899Chrome 的请求就会被抓取。但有些软件不走系统代理比如部分网络游戏、某些独立客户端这些就需要在软件自己的设置里单独填代理地址。手机抓包时操作逻辑也一样。手机和电脑连同一个 Wi-Fi在手机 Wi-Fi 设置里手动配置 HTTP 代理填上电脑的局域网 IP 和 8899 端口手机上的流量就会经过 Whistle。这里有个很容易踩的坑我放到后面问题排查部分细说。3.2 规则设计的核心思想Whistle 之所以在调试场景里效率高核心在于它的规则配置。规则文件本质上是一个文本每行一条规则格式很接近“模式 操作”。举个例子我想把example.com的请求全部指向本地127.0.0.1:8080只需要写example.com 127.0.0.1:8080就这么一行。如果是想改 HTTPS 请求到本地写法也差不多但要多一步证书信任这部分后面单独讲。规则还有很多高级用法比如正则匹配/api\.example\.com/ http://127.0.0.1:9090或者按路径匹配example.com/api/user http://127.0.0.1:9090/mock/user这种“路径级别的规则”在联调时特别有用。后端只改了某个接口你只需要把那一个代理到测试环境其他的还走线上不用整体切换环境联调体验一下子提升不少。另外Whistle 的规则支持分组和注释。你可以在规则中写#注释说明当前分组是干什么的便于维护多套规则。比如一套是“生产环境调试”一套是“本地 mock”通过界面右上角的开关快速切换非常方便。3.3 为什么比正则表达式更友好用过 Charles 或者 Fiddler 的朋友可能会有印象那些工具的规则配置往往带一个图形界面看起来友好但真要精准匹配某个路径时反而要翻半天菜单。Whistle 直接面向文本初看有点原始实际用上去之后才发现这种设计的高明之处文本规则可以直接复制粘贴到团队文档里方便交流也方便版本管理。我们团队里现在就有个共享规则库谁遇到问题直接把自己配好的规则粘贴到群里其他人复制进 Whistle 就能复现这个效率是图形界面工具很难比的。4. 实操从零到一配置 Whistle 抓包4.1 PC 端浏览器抓包先把最简单的场景跑通——用浏览器抓包。启动 Whistle 后确认终端显示server started。然后把本机代理指向 8899 端口。Windows 系统在“设置”里找“代理”手动设置macOS 在“网络偏好设置”里配置代理。不过我更推荐另一种方式Whistle 面板首页会显示一个“已开启代理”的按钮点一下就能自动设置系统代理省得手动填。代理开启后在浏览器里随便访问一个网站切回 Whistle 面板左侧列表就会刷刷刷地出现请求记录。点击某一条右边能看到请求头、请求体、响应头、响应体以及耗时和状态码。这里有一个关键概念要记住抓包列表默认是按请求顺序记录的但一次页面加载会触发很多请求你可以通过域名过滤来快速定位目标。面板顶部的过滤框输入关键词只显示匹配的请求。4.2 手机端抓包配置手机端抓包是 Whistle 的高频场景。配置分三步走第一步确认手机和电脑在同一个局域网内。这里有个直觉误区有时候你以为连的是同一个 Wi-Fi实际上手机走的是蜂窝数据或者电脑插了网线而手机连了 Wi-Fi两者不在同一网段手机代理就会配不上。第二步在手机 Wi-Fi 设置里找到“HTTP 代理”选项选择手动服务器地址填电脑的局域网 IP端口填 8899。电脑的局域网 IP 可以在终端里用ipconfigWindows或者ifconfigmacOS查看也可以从 Whistle 面板首页直接看到。第三步确认 Whistle 面板上出现了手机的请求记录。此时手机访问任意页面列表里应该能看到来自手机网络的请求。这个流程看起来简单但实际配置时很多人卡在“电脑局域网 IP”这一步。如果手机一直显示无法连接代理先别急着怀疑手机用电脑浏览器访问一下http://[你的局域网IP]:8899如果打不开说明 Whistle 监听的地址可能只绑定了本机。这时需要重新启动 Whistle绑定 0.0.0.0w2 stop w2 start -H 0.0.0.0-H参数指定监听地址0.0.0.0 表示所有网卡接口。这个细节不起眼却能解决一大半手机连不上的问题。4.3 HTTPS 解密配置我敢说第一次抓 HTTPS 包时绝大多数人都被证书坑过。因为默认情况下Whistle 能看到 HTTPS 请求的域名和连接信息但看不到里面的明文内容。要看到明文必须装证书并信任它。Whistle 的证书方案分两步先让设备下载证书再在系统设置里信任证书。以手机为例在手机浏览器里访问http://rootca.pro或者从 Whistle 面板首页找到二维码手机扫码下载根证书。下载完成后需要到手机设置里安装此证书并且显式地把这个证书标记为“信任”这里有两个完全不同的操作。Android 和 iOS 的差异非常大。iOS 下载证书后要去“设置-通用-关于本机-证书信任设置”里把 Whistle 的证书开关打开很多人卡在这一步以为下载完就算装好了结果照样看不到 HTTPS 明文。Android 则相对宽松一些但部分新版本的 Android 对用户证书的限制更加严格需要分应用选择是否信任用户证书。电脑端相对简单直接访问 Whistle 的证书下载地址把证书安装到“受信任的根证书颁发机构”即可。macOS 上装完还要在“钥匙串访问”里把证书的信任级别调整为“始终信任”否则照样不行。这里说一句我的经验如果你抓包的时候列表里某个请求显示为隧道Tunnel一般就是 HTTPS 证书没受信。处理证书这一步千万别省也别嫌麻烦它的产出是你能看到 App 和服务器之间的明文交互这在排查加密协议问题时价值巨大。4.4 配置一条真实可用的代理规则光能抓到包还不够Whistle 真正的威力在于“改包”和“接本地环境”。我举个例子说明规则怎么配。假设线上环境是https://api.example.com本地开发服务跑在http://127.0.0.1:8080。现在我想让 App 里的接口请求指向本地服务。在 Whistle 面板的“规则”页签里新建一个分组输入api.example.com 127.0.0.1:8080保存后勾选启用这个分组。此时手机或者电脑再请求api.example.com实际会打到本地 8080 端口。这个配置我在前后端联调时几乎每天都在用比后端改配置、上线测试环境要快得多。如果只想 mock 某个接口的数据也可以不用起本地服务。Whistle 支持直接返回固定内容比如api.example.com/user file:///Users/me/mock/user.json这样当请求这个地址时Whistle 会直接返回本地 JSON 文件的内容接口本身根本不会收到请求。这类能力对于测试异常场景特别有用比如后端口出问题了你想模拟超时Whistle 也提供了相应的规则延迟参数。另外Whistle 还内置了一套插件机制你可以在规则里写 JS 脚本动态处理请求和响应。这个功能强大到可以提供无限灵活度但坦白说80% 的场景用不到脚本——基础的路径代理和返回值模拟已经解决绝大多数问题了。5. 常见问题与排查技巧实录5.1 手机能装上证书但 HTTPS 还是看不到明文的排查顺序这个问题出现频率最高。我的排查顺序是第一步先确认代理是否真的生效。手机浏览器访问一个 HTTP 网站比如http://example.com再看 Whistle 列表里是否有记录。没记录说明代理没生效往回查 IP 和端口。第二步如果 HTTP 能抓到而 HTTPS 看不到内容大概率是证书信任没设置到位。iOS 上重点检查“证书信任设置”开关macOS 上检查钥匙串里的信任级别。第三步如果证书也信任了但仍然不行可能是某个 App 启用了证书固定Certificate Pinning。这类 App 不信任系统证书抓包工具自然看不到内容解决方式一般需要配合 Hook 或者特殊配置这个超出了文章基础范围遇到时可以单独研究。5.2 手机连不上代理或者频繁断连手机连不上代理八成原因是电脑防火墙拦截了 8899 端口。这听起来基础但实际上非常常见。新装 Whistle 后macOS 会弹窗询问是否允许外部连接有时候手快点成“不允许”事后完全不记得。Windows 上则可能出现“防火墙已阻止此应用”之类的提示。排查步骤就三步先确认电脑上 8899 端口处于监听状态执行lsof -i :8899再确认防火墙放行最后用手机访问http://[电脑IP]:8899测试连通性。如果访问不了优先去防火墙设置里放行 Node.js 或者 whistle 进程。还有一种情况是公司网络做了隔离不同设备之间禁 ping、禁访问。这种环境下手机连不上电脑代理就不奇怪只能换一个网络或者用远程代理方案。5.3 规则不生效的几种原因规则写好了但请求还走原地址我在新手阶段被这个问题捶过很多次。后来总结出几种最常见的情况。第一种规则分组没启用。Whistle 支持多组规则但同一时间只有启用的组才生效。我见过有人把规则写在旧组里新组是空的然后半天找不到原因。第二种匹配的域名写错了。比如实际接口地址是api.example.com你规则写的是example.com就不会命中。这里注意子域名不自动继承父域名需要额外加一行。第三种请求走了 HTTP/2 或者 QUIC某些场景下规则匹配会有延迟或异常。这种情况在普通网页里较少出现但在一些优化过的 App 里容易出现。如果怀疑这种问题可以强制关闭 HTTP/2 再做验证。5.4 抓包会导致网络变慢正常吗正常情况下抓包工具的流量转发延迟极低几乎感受不到。但你手机所有流量都要先到电脑再到互联网如果电脑 Wi-Fi 信号差或者带宽跑满体验网络变卡是完全可能的。另外如果你开启了大规模的 HTTPS 解密加解密过程确实会消耗一点 CPU但也不至于卡到不能用的程度。如果真的卡得离谱先看看抓包列表里是不是有大量高频请求在刷新比如某些 App 的心跳接口、日志上报接口。这种情况下建议开启过滤只保留你关心的域名能明显降低负载。5.5 Whistle 的数据能导出吗抓包数据往往需要拿去做分析或者交给别人看Whistle 提供了数据导出能力。你可以在抓包列表里选中需要的请求然后右键导出 HAR 格式HAR 是 HTTP Archive 的缩写算是一种标准化的请求记录格式。其他工具像 Charles、Fiddler 也支持导入导出 HAR协作时非常通用。微信小程序的调试、网页前端的性能分析甚至后端接口的耗时统计我都能基于 HAR 数据进一步做分析。这点也是我比较推荐 Whistle 的原因之一它不是单纯的“看一眼”工具而是可以作为整个调试流程的枢纽。6. 从抓包到日常调试工作流的延伸6.1 本地 Mock 数据的高效用法除了调试联调Whistle 在本地 mock 这块也能玩出各种花样。你可以准备一个 mock 目录里面放着不同接口的 JSON 文件然后按照路径规则把它们代理过去。比如api.example.com/user file:///Users/me/mock/user.json api.example.com/list file:///Users/me/mock/list.json好处是前端不再依赖后端是否有可用数据也不需要代码里硬编码假数据。调整 mock 内容时只要改 JSON 文件页面下一次请求就会拿到新数据整个流程对测试 UI 边界情况特别友好。6.2 弱网模拟的意外收获Whistle 还有一个能力是模拟延迟和弱网这在我做移动端上线前自测时经常用到。开发测试时遇到一个问题在 Wi-Fi 条件下接口响应都很快线下用户反馈“页面白屏”一查才知道是网络差时接口超时前端没有处理超时。这时候用 Whistle 加一个几秒的延迟规则直接在本地复现弱网场景就能快速验证页面到底会不会崩溃。配置延迟的规则很简单api.example.com reqDelay:3000意思是对这个域名的请求延迟 3 秒。还可以再加一句resDelay:5000模拟服务端响应慢的情况。这种小而美的功能往往在关键时刻能省很大的力气。6.3 配合抓包做接口监控有时候线上问题不是“没数据”而是“数据错了”。这种错可能来自前端传参、后端逻辑、中间层字段映射任何一个环节。每次打开生产环境页面一顿操作Whistle 里就留下了一串请求记录。你可以在里面找到操作对应的接口然后查看它的请求参数和响应内容前后端双方对着这个记录扯皮就变得非常高效。我甚至见过有人把 Whistle 用在售前阶段——给客户展示系统时通过抓包工具现场演示请求过程方便非技术人员理解系统架构。这算是抓包工具“跨界”玩法了但也就说明 Whistle 的应用场景确实比想象中宽。7. 最后分享一点个人的使用体会抓包工具这类软件网上教程一搜一大把但真正用得好的人往往不是记住多少快捷键而是懂得它的底层逻辑代理是什么、证书是怎么回事、规则是怎么匹配的。把这几个底层观念搞通不管换到 Whistle 还是 Charles 都能很快上手。我个人在实际工作中最大的收获其实是把 Whistle 嵌进了日常开发流程。以前调接口全靠后端同事给日志费时间还限制多。现在自己拿着 Whistle几下就把请求拦住想改参数就改参数想 mock 就 mock省下的沟通成本难以估量。如果你还在犹豫要不要花时间学这个工具我建议直接装一个跟着文章里的流程抓一次包只要把第一个 HTTPS 包解出来你就会打开新世界的大门。最后再送一个小技巧Whistle 的规则文件其实可以通过分享功能导出建议你维护一个自己专属的规则库换电脑或者带新人的时候直接导入规则环境秒开不用每次都重新配一遍。这大概就是效率工具的终极形态——不是给人增加负担而是把复杂事情变简单。
Whistle抓包工具实战指南：从安装到HTTPS解密与规则配置
Whistle这个工具我用了大概三年多从一开始只是临时拿来抓包看接口到后来直接把它做成了团队联调的固定环节可以说是我电脑里安装频率最高的开发辅助软件之一。如果你平时做前端开发、移动端调试或者经常需要排查线上接口问题那 Whistle 几乎是绕不开的一个选择。它是一款基于 Node.js 的跨平台抓包工具安装简单、规则灵活还支持手机端代理抓包对比 Fat、Charles 这些老牌工具Whistle 在规则配置和二次扩展上明显更轻巧顺手。这篇文章不打算写成一板一眼的说明书我更想用实际操练过的经验把 Whistle 从安装到日常调试再到问题排查这一整套流程给你捋清楚。尤其是那些文档里不会写、但实际用起来特别关键的细节比如证书装不上怎么办、为什么手机连不上代理、规则不生效的几种原因这些我在现场踩过不少坑这次一并整理出来。1. 先聊聊抓包这件事1.1 抓包到底在干什么抓包这个词听着挺高深其实本质就是把自己设备上的网络流量拦下来看一眼。你在浏览器里打开一个页面背后无非是发了很多 HTTP/HTTPS 请求请求里带了什么参数、返回了什么数据、有没有报错这些信息在开发者工具里能看到一部分但一旦遇到 App、小程序、电视盒子或者你想模拟弱网、改动返回结果浏览器自带那些工具就不太够了这时候就得靠独立的抓包工具。说白了抓包就是“中间人”式的流量观察。正常情况下客户端直接跟服务端通信。打开 Whistle 之后它会在本地起一个代理服务你的请求先经过它它复制一份记录下来再转发给服务端。服务端的响应回来它同样扒开看一眼再回传给你。过程中它不改数据只是看这就是抓包的基本原理。如果需要修改就靠规则配置来介入。1.2 为什么选 Whistle而不是 Fiddler 或 Charles市面上能抓包的工具不算少Fiddler 是 Windows 老牌工具Charles 在 macOS 上用户量也很大。我之所以推荐 Whistle不光是它免费开源这一条更看重几点实际的体验差异。Fiddler 的界面默认比较拥挤配置规则虽然强大但上手有门槛Charles 的 UI 确实精致但商业授权价格不便宜而且跨平台时每次换电脑都要重新激活。Whistle 走的是另一个路线安装简单配置走文件界面是 Web 面板。你启动它之后直接在浏览器里打开 127.0.0.1:8899 就能看到操作界面不用装客户端这个特性在很多场景下非常香尤其是我有时候在服务器上临时抓包直接远程部署一个 Whistle 就能用。但真正让我最终倒向 Whistle 的是它的规则系统。Fiddler 和 Charles 都有规则功能可写起来总有点绕。Whistle 的规则更接近“如果什么就怎么样”的直白逻辑比如把某个域名代理到测试环境、给某个接口插入一段脚本、把图片请求全部转到本地目录这些场景在 Whistle 里写起来非常顺手。1.3 适合什么人用如果你是下面这几类人Whistle 会特别合适前端工程师需要本地开发时把线上域名代理到本地服务或者排查线上问题时的接口数据。移动端开发者需要抓手机 App 的请求看接口参数和返回。测试工程师需要做接口回归、模拟不同返回值、验证异常场景。后端开发想快速确认某个接口到底收到什么内容、响应是不是功。哪怕是刚入门的新手只要理解“代理”和“请求/响应”这两个概念跟着下面的步骤走一遍也能很快上手。Whistle 设置了很低的门槛但上限又很高这也是它能在一众抓包工具里站稳脚跟的原因。2. Whistle 安装与环境准备2.1 先装 Node.jsWhistle 是跑在 Node.js 上的所以第一步得确保电脑里有 Node 环境。如果你以前装过前端工具链大概率已经有 Node 了可以在终端里敲node -v看一眼能输出版本号就说明环境没问题。如果还没装直接去 Node.js 官网下载 LTS 版本安装时一路下一步就行。提醒一句装完以后一定要重启终端否则新加的环境变量不会生效。我早期给别人配环境时见过好几回新人装完 Node 不重启终端然后直接敲npm提示找不到命令当场就懵了。Node 版本方面Whistle 对版本要求不算苛刻Node 12 以上的版本基本都能跑新版本我建议直接用最新的 LTS省心。2.2 安装 Whistle装好 Node 之后安装 Whistle 就一条命令的事npm install -g whistle如果是在 macOS 或者 Linux 上安装可能涉及全局权限问题命令前加sudo就行。Windows 用户建议以管理员身份打开命令行工具再执行避免后面操作文件时权限不够。安装完成后验证一下whistle -v能输出版本号就说明安装成功。这里有个小细节npm 全局安装的模块可执行文件默认在 Node 的安装目录下如果whistle命令提示找不到多半是全局目录没配进 PATHWindows 上重新打开终端基本能解决macOS 上检查一下/usr/local/bin是否在 PATH 里。2.3 启动与访问控制台启动 Whistle 的命令是w2 start注意新版 Whistle 的命令是w2老版本叫whistle。如果你看网上的老教程可能会看到whistle start新版本下直接敲w2 start即可。启动成功后终端会提示默认代理端口 8899然后浏览器访问http://127.0.0.1:8899看到 Whistle 的操作面板就说明服务起来了。这个面板本身是纯本地 Web 应用不需要联网。面板左侧是抓包列表右侧是请求详情和规则配置区。还有一个比较隐蔽但实用的点面板页面本身不通过代理。你访问 127.0.0.1 的时候不会经过 Whistle 自己这避免了“代理工具自己请求自己的死循环”问题。如果你后面配置了全局代理还发现面板打不开了多半是代理设置把 localhost 也代理了记得在系统代理排除列表里加上 127.0.0.1 和 localhost。3. Whistle 核心设计思路与规则系统3.1 代理工作模式Whistle 启动后会在本机开一个 HTTP 代理端口默认是 8899。你把设备可以是电脑本身也可以是手机的网络代理指向这个端口流量就会被 Whistle 接管。这里有个概念要分清楚系统代理和应用代理不是一回事。比如 Chrome 默认跟随系统代理设置所以你在系统里把代理指向 127.0.0.1:8899Chrome 的请求就会被抓取。但有些软件不走系统代理比如部分网络游戏、某些独立客户端这些就需要在软件自己的设置里单独填代理地址。手机抓包时操作逻辑也一样。手机和电脑连同一个 Wi-Fi在手机 Wi-Fi 设置里手动配置 HTTP 代理填上电脑的局域网 IP 和 8899 端口手机上的流量就会经过 Whistle。这里有个很容易踩的坑我放到后面问题排查部分细说。3.2 规则设计的核心思想Whistle 之所以在调试场景里效率高核心在于它的规则配置。规则文件本质上是一个文本每行一条规则格式很接近“模式 操作”。举个例子我想把example.com的请求全部指向本地127.0.0.1:8080只需要写example.com 127.0.0.1:8080就这么一行。如果是想改 HTTPS 请求到本地写法也差不多但要多一步证书信任这部分后面单独讲。规则还有很多高级用法比如正则匹配/api\.example\.com/ http://127.0.0.1:9090或者按路径匹配example.com/api/user http://127.0.0.1:9090/mock/user这种“路径级别的规则”在联调时特别有用。后端只改了某个接口你只需要把那一个代理到测试环境其他的还走线上不用整体切换环境联调体验一下子提升不少。另外Whistle 的规则支持分组和注释。你可以在规则中写#注释说明当前分组是干什么的便于维护多套规则。比如一套是“生产环境调试”一套是“本地 mock”通过界面右上角的开关快速切换非常方便。3.3 为什么比正则表达式更友好用过 Charles 或者 Fiddler 的朋友可能会有印象那些工具的规则配置往往带一个图形界面看起来友好但真要精准匹配某个路径时反而要翻半天菜单。Whistle 直接面向文本初看有点原始实际用上去之后才发现这种设计的高明之处文本规则可以直接复制粘贴到团队文档里方便交流也方便版本管理。我们团队里现在就有个共享规则库谁遇到问题直接把自己配好的规则粘贴到群里其他人复制进 Whistle 就能复现这个效率是图形界面工具很难比的。4. 实操从零到一配置 Whistle 抓包4.1 PC 端浏览器抓包先把最简单的场景跑通——用浏览器抓包。启动 Whistle 后确认终端显示server started。然后把本机代理指向 8899 端口。Windows 系统在“设置”里找“代理”手动设置macOS 在“网络偏好设置”里配置代理。不过我更推荐另一种方式Whistle 面板首页会显示一个“已开启代理”的按钮点一下就能自动设置系统代理省得手动填。代理开启后在浏览器里随便访问一个网站切回 Whistle 面板左侧列表就会刷刷刷地出现请求记录。点击某一条右边能看到请求头、请求体、响应头、响应体以及耗时和状态码。这里有一个关键概念要记住抓包列表默认是按请求顺序记录的但一次页面加载会触发很多请求你可以通过域名过滤来快速定位目标。面板顶部的过滤框输入关键词只显示匹配的请求。4.2 手机端抓包配置手机端抓包是 Whistle 的高频场景。配置分三步走第一步确认手机和电脑在同一个局域网内。这里有个直觉误区有时候你以为连的是同一个 Wi-Fi实际上手机走的是蜂窝数据或者电脑插了网线而手机连了 Wi-Fi两者不在同一网段手机代理就会配不上。第二步在手机 Wi-Fi 设置里找到“HTTP 代理”选项选择手动服务器地址填电脑的局域网 IP端口填 8899。电脑的局域网 IP 可以在终端里用ipconfigWindows或者ifconfigmacOS查看也可以从 Whistle 面板首页直接看到。第三步确认 Whistle 面板上出现了手机的请求记录。此时手机访问任意页面列表里应该能看到来自手机网络的请求。这个流程看起来简单但实际配置时很多人卡在“电脑局域网 IP”这一步。如果手机一直显示无法连接代理先别急着怀疑手机用电脑浏览器访问一下http://[你的局域网IP]:8899如果打不开说明 Whistle 监听的地址可能只绑定了本机。这时需要重新启动 Whistle绑定 0.0.0.0w2 stop w2 start -H 0.0.0.0-H参数指定监听地址0.0.0.0 表示所有网卡接口。这个细节不起眼却能解决一大半手机连不上的问题。4.3 HTTPS 解密配置我敢说第一次抓 HTTPS 包时绝大多数人都被证书坑过。因为默认情况下Whistle 能看到 HTTPS 请求的域名和连接信息但看不到里面的明文内容。要看到明文必须装证书并信任它。Whistle 的证书方案分两步先让设备下载证书再在系统设置里信任证书。以手机为例在手机浏览器里访问http://rootca.pro或者从 Whistle 面板首页找到二维码手机扫码下载根证书。下载完成后需要到手机设置里安装此证书并且显式地把这个证书标记为“信任”这里有两个完全不同的操作。Android 和 iOS 的差异非常大。iOS 下载证书后要去“设置-通用-关于本机-证书信任设置”里把 Whistle 的证书开关打开很多人卡在这一步以为下载完就算装好了结果照样看不到 HTTPS 明文。Android 则相对宽松一些但部分新版本的 Android 对用户证书的限制更加严格需要分应用选择是否信任用户证书。电脑端相对简单直接访问 Whistle 的证书下载地址把证书安装到“受信任的根证书颁发机构”即可。macOS 上装完还要在“钥匙串访问”里把证书的信任级别调整为“始终信任”否则照样不行。这里说一句我的经验如果你抓包的时候列表里某个请求显示为隧道Tunnel一般就是 HTTPS 证书没受信。处理证书这一步千万别省也别嫌麻烦它的产出是你能看到 App 和服务器之间的明文交互这在排查加密协议问题时价值巨大。4.4 配置一条真实可用的代理规则光能抓到包还不够Whistle 真正的威力在于“改包”和“接本地环境”。我举个例子说明规则怎么配。假设线上环境是https://api.example.com本地开发服务跑在http://127.0.0.1:8080。现在我想让 App 里的接口请求指向本地服务。在 Whistle 面板的“规则”页签里新建一个分组输入api.example.com 127.0.0.1:8080保存后勾选启用这个分组。此时手机或者电脑再请求api.example.com实际会打到本地 8080 端口。这个配置我在前后端联调时几乎每天都在用比后端改配置、上线测试环境要快得多。如果只想 mock 某个接口的数据也可以不用起本地服务。Whistle 支持直接返回固定内容比如api.example.com/user file:///Users/me/mock/user.json这样当请求这个地址时Whistle 会直接返回本地 JSON 文件的内容接口本身根本不会收到请求。这类能力对于测试异常场景特别有用比如后端口出问题了你想模拟超时Whistle 也提供了相应的规则延迟参数。另外Whistle 还内置了一套插件机制你可以在规则里写 JS 脚本动态处理请求和响应。这个功能强大到可以提供无限灵活度但坦白说80% 的场景用不到脚本——基础的路径代理和返回值模拟已经解决绝大多数问题了。5. 常见问题与排查技巧实录5.1 手机能装上证书但 HTTPS 还是看不到明文的排查顺序这个问题出现频率最高。我的排查顺序是第一步先确认代理是否真的生效。手机浏览器访问一个 HTTP 网站比如http://example.com再看 Whistle 列表里是否有记录。没记录说明代理没生效往回查 IP 和端口。第二步如果 HTTP 能抓到而 HTTPS 看不到内容大概率是证书信任没设置到位。iOS 上重点检查“证书信任设置”开关macOS 上检查钥匙串里的信任级别。第三步如果证书也信任了但仍然不行可能是某个 App 启用了证书固定Certificate Pinning。这类 App 不信任系统证书抓包工具自然看不到内容解决方式一般需要配合 Hook 或者特殊配置这个超出了文章基础范围遇到时可以单独研究。5.2 手机连不上代理或者频繁断连手机连不上代理八成原因是电脑防火墙拦截了 8899 端口。这听起来基础但实际上非常常见。新装 Whistle 后macOS 会弹窗询问是否允许外部连接有时候手快点成“不允许”事后完全不记得。Windows 上则可能出现“防火墙已阻止此应用”之类的提示。排查步骤就三步先确认电脑上 8899 端口处于监听状态执行lsof -i :8899再确认防火墙放行最后用手机访问http://[电脑IP]:8899测试连通性。如果访问不了优先去防火墙设置里放行 Node.js 或者 whistle 进程。还有一种情况是公司网络做了隔离不同设备之间禁 ping、禁访问。这种环境下手机连不上电脑代理就不奇怪只能换一个网络或者用远程代理方案。5.3 规则不生效的几种原因规则写好了但请求还走原地址我在新手阶段被这个问题捶过很多次。后来总结出几种最常见的情况。第一种规则分组没启用。Whistle 支持多组规则但同一时间只有启用的组才生效。我见过有人把规则写在旧组里新组是空的然后半天找不到原因。第二种匹配的域名写错了。比如实际接口地址是api.example.com你规则写的是example.com就不会命中。这里注意子域名不自动继承父域名需要额外加一行。第三种请求走了 HTTP/2 或者 QUIC某些场景下规则匹配会有延迟或异常。这种情况在普通网页里较少出现但在一些优化过的 App 里容易出现。如果怀疑这种问题可以强制关闭 HTTP/2 再做验证。5.4 抓包会导致网络变慢正常吗正常情况下抓包工具的流量转发延迟极低几乎感受不到。但你手机所有流量都要先到电脑再到互联网如果电脑 Wi-Fi 信号差或者带宽跑满体验网络变卡是完全可能的。另外如果你开启了大规模的 HTTPS 解密加解密过程确实会消耗一点 CPU但也不至于卡到不能用的程度。如果真的卡得离谱先看看抓包列表里是不是有大量高频请求在刷新比如某些 App 的心跳接口、日志上报接口。这种情况下建议开启过滤只保留你关心的域名能明显降低负载。5.5 Whistle 的数据能导出吗抓包数据往往需要拿去做分析或者交给别人看Whistle 提供了数据导出能力。你可以在抓包列表里选中需要的请求然后右键导出 HAR 格式HAR 是 HTTP Archive 的缩写算是一种标准化的请求记录格式。其他工具像 Charles、Fiddler 也支持导入导出 HAR协作时非常通用。微信小程序的调试、网页前端的性能分析甚至后端接口的耗时统计我都能基于 HAR 数据进一步做分析。这点也是我比较推荐 Whistle 的原因之一它不是单纯的“看一眼”工具而是可以作为整个调试流程的枢纽。6. 从抓包到日常调试工作流的延伸6.1 本地 Mock 数据的高效用法除了调试联调Whistle 在本地 mock 这块也能玩出各种花样。你可以准备一个 mock 目录里面放着不同接口的 JSON 文件然后按照路径规则把它们代理过去。比如api.example.com/user file:///Users/me/mock/user.json api.example.com/list file:///Users/me/mock/list.json好处是前端不再依赖后端是否有可用数据也不需要代码里硬编码假数据。调整 mock 内容时只要改 JSON 文件页面下一次请求就会拿到新数据整个流程对测试 UI 边界情况特别友好。6.2 弱网模拟的意外收获Whistle 还有一个能力是模拟延迟和弱网这在我做移动端上线前自测时经常用到。开发测试时遇到一个问题在 Wi-Fi 条件下接口响应都很快线下用户反馈“页面白屏”一查才知道是网络差时接口超时前端没有处理超时。这时候用 Whistle 加一个几秒的延迟规则直接在本地复现弱网场景就能快速验证页面到底会不会崩溃。配置延迟的规则很简单api.example.com reqDelay:3000意思是对这个域名的请求延迟 3 秒。还可以再加一句resDelay:5000模拟服务端响应慢的情况。这种小而美的功能往往在关键时刻能省很大的力气。6.3 配合抓包做接口监控有时候线上问题不是“没数据”而是“数据错了”。这种错可能来自前端传参、后端逻辑、中间层字段映射任何一个环节。每次打开生产环境页面一顿操作Whistle 里就留下了一串请求记录。你可以在里面找到操作对应的接口然后查看它的请求参数和响应内容前后端双方对着这个记录扯皮就变得非常高效。我甚至见过有人把 Whistle 用在售前阶段——给客户展示系统时通过抓包工具现场演示请求过程方便非技术人员理解系统架构。这算是抓包工具“跨界”玩法了但也就说明 Whistle 的应用场景确实比想象中宽。7. 最后分享一点个人的使用体会抓包工具这类软件网上教程一搜一大把但真正用得好的人往往不是记住多少快捷键而是懂得它的底层逻辑代理是什么、证书是怎么回事、规则是怎么匹配的。把这几个底层观念搞通不管换到 Whistle 还是 Charles 都能很快上手。我个人在实际工作中最大的收获其实是把 Whistle 嵌进了日常开发流程。以前调接口全靠后端同事给日志费时间还限制多。现在自己拿着 Whistle几下就把请求拦住想改参数就改参数想 mock 就 mock省下的沟通成本难以估量。如果你还在犹豫要不要花时间学这个工具我建议直接装一个跟着文章里的流程抓一次包只要把第一个 HTTPS 包解出来你就会打开新世界的大门。最后再送一个小技巧Whistle 的规则文件其实可以通过分享功能导出建议你维护一个自己专属的规则库换电脑或者带新人的时候直接导入规则环境秒开不用每次都重新配一遍。这大概就是效率工具的终极形态——不是给人增加负担而是把复杂事情变简单。
