Whistle 抓包与 debug 利器

Whistle  抓包与 debug 利器

Whistle  抓包与 debug 利器

什么是 whistle

whistle 是一个跨平台的抓包与  web debug 工具，使用 whistle，你可以配置代理服务器，模拟接口数据，捕获请求重定向到指定 url，修改请求头响应头，修改 GET 请求的参数，往匹配的页面中注入 js、css

whistle 提供了和 fiddler 类似的功能，也提供了一些 fiddler 没有的功能，使用体验比 fiddler 好很多，一开始公司组内只有我一个人用，经过安利，大部分开发、测试都换成了 whistle。而且 whistle 可以在 windows、mac、linux 上运行，目前还在不断迭代更新，维护者对社区的各种问题都能及时响应，是一个很优秀的工具。

这篇文章接下来会介绍 whistle 的安装及常见的使用方法，如果你要上手使用 whistle，建议通篇看完后尝试安装，遇到问题可以看文末的参考资料或自行 google。

whistle 的安装

1. 安装 node.js，点击链接，选择 LTS 版安装

2. 在命令行运行 npm install -g whistle（如果提示没有权限，要以 admin 或 sudo 的方式运行）

whistle 的启动

1. 在命令行运行 whistle start，(推荐 w2 restart，当你需要重启时，按上箭头，回车即可)

2. 在浏览器访问 http://127.0.0.1:8899/，如果能看到一个抓包的界面，那么安装、启动成功了

whistle 的代理

在 whistle 启动完成后，我们需要将浏览器的请求代理到 whistle，这样 whistle 才能处理浏览器发出的请求。为此，我们需要安装一个 SwitchyOmega chrome 扩展程序。

SwitchyOmega 安装与配置

1. 访问这个链接，点击“添加至 CHROME”，点击弹框“添加扩展程序”，如果被墙了访问不了，可以 点这里 选择 SwitchyOmega_Chromium.crx 下载，下载后在浏览器地址栏输入 chrome://extensions/，回车打开页面，将下载的文件拖动到 extensions 那个页面，点击安装扩展即可。

2. 页面会自动跳转到 SwitchyOmega 的配置页，点击“跳过教程”

3. 点击左侧“新建情景模式…”，弹框提示“情景模式名称”，你可以输入“whistle”

4. 点“创建”按钮

5. 代理服务器 -> 代理协议，这个下拉选择框选择 HTTP，将 example.com 改为 127.0.0.1，将 80 改为 8899

6. “不代理的地址列表” 的输入框里的所有文本都删掉，因为里面的 host 在本地开发很大概率会用到

7. 点击左侧“应用选项”

8. 点击 chrome 右上角的圆圈图标，切换成 whistle

9. 浏览器输入 local.whistlejs.com，回车，能打开 whistle 的界面，说明 SwitchyOmega 的配置 ok

whistle 的常用配置

配 host

我们可以为某个域名或具体的 url 指定 ip，绕过 dns 解析，让请求直接到达指定的 ip。通常在工作中，开发、测试和预发布境的切换都通过切换 host 来实现，这样访问不同的环境不需要改变代码，或根据环境配置文件访问不同的 url。

whistle 的 host 在 rules 下配置:

以下是常用的配 host 方法:

将 qq.com 映射到 127.0.0.1，你访问 http://www.qq.com/ 时，请求的是本地的 127.0.0.1

Plain Text 127.0.0.1 qq.com

你也可以把端口带上

Plain Text 127.0.0.1:3000 qq.com

你甚至可以将指定的路径映射到某个 ip 和端口

Plain Text 127.0.0.1:3000 https://www.qq.com/a/b/c

当然，把规则反过来写也是生效的

Plain Text https://www.qq.com/a/b/c 127.0.0.1:3000

除了配 host，whistle 还有其它强大的功能，我们继续往下看

重定向

将 baidu.com 重定向到 qq.com

Plain Text https://www.baidu.com/ redirect://https://www.qq.com/

此规则在移动端调试时有个场景特别有用：比如想在某个 APP 里打开一个的网页，但是该 APP 没有一个 url 输入框，我们可以随机地点击这个 app 的信息流，如果捕获到有页面请求，重定向为我们的 url 即可。

修改返回体

该功能在后端接口挂了或者没有开发好的时候，可以模拟返回假数据，让前端调试可以不依赖后端

Plain Text http://example.com/api/getUserList file://D:/path/to/your/file/userList.json

将 getUserList 这个请求的返回替换成本地的 userList.json 文件，如果觉得文件放在磁盘里写路径麻烦，可以放在 whistle 自带的 Values 里，那么上面的规则就更简洁了：

Plain Text http://example.com/api/getUserList file://

Values 是个很有用的功能，位置如下:

创建的文件尽量带文件后缀，有语法高亮，另外如果不是 .json 结尾，whistle 不会在 Response Headers 里自动添加 content-type: application/json; charset=utf-8，那么一些请求库就拿不到正确的返回。

替换线上文件

如果有正式环境 bug，可以将 js 替换成本地文件或文件夹，提高调试效率。

Plain Text http://example.com/cdn/example.js file://D:/path/to/your/file/example.js

替换请求 url

Plain Text http://qq.com/a/b?c=d http://qq.com/v/w?x=y&z=z

注意：这个规则的修改在浏览器的 network 里体现不出来，因为请求已经发出去，到 whistle 层才被修改的，我们可以在 whistle 的 Network 右侧里看到 Real Url

修改返回码

通过修改返回码，可以模拟接口出错

Plain Text https://www.qq.com statusCode://500

修改请求、响应的 header

Web 开发有时会遇到请求 header 设置不对带来的一些问题，如果问题出现在正式环境，我们可以通过修改请求 header （比如修改 Cookie、user-agent、Content-Type 等）来模拟修复，等确认问题后，再修改代码，提高效率。

Plain Text https://www.qq.com reqHeaders://

同样，我们可以通过 resHeaders 来修改响应头，上文提到我们可以通过 file://{userList.json} 来模拟假数据，但这么做可能导致一些跨域的 header 丢失，对此，我们可以通过 resHeaders 加上跨域相关 header

Plain Text https://www.qq.com/some/ajax resHeaders://

Values 中的 CORSHeaders 值为

Plain Text Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, token Access-Control-Allow-Methods: POST, GET, OPTIONS Access-Control-Allow-Origin: * Access-Control-Allow-Credentials: true content-type: application/json status: 200

插入 js

我们可以在不修改页面代码的情况下，通过 whistle 往页面插入 js，比如我们插入一个使页面刷新的 js:

Plain Text https://www.google.com jsPrepend://

更有用的，是往页面中插入调试相关的 js，比如 vConsole.js，我们当然可以到 github 上将 vConsole.min.js 下载到本地，或放在 Values 中，然后把初始化代码也加上，最后将 vConsole.js 注入到页面来 debug。不过，whistle 提供了更方便的插件:

Plain Text npm i -g whistle.inspect

Plain Text https://www.google.com whistle.inspect://

reqScript

考虑一种场景：我们要测一个视频上传接口返回 500 的情况，看是否走到了正常的提示逻辑，通常我们模拟状态码就可以解决，但如果接口跨域了，会先发起一个路径一致的 options 请求，我们希望这个 options 请求依然返回 200，只处理 post 请求，这时我们可以这么做：

Plain Text http://qq.com/media/video reqScript://

Values 中的 onlyPostRule:

Plain Text if (method === 'POST') 

https

抓取 https 请求需要安装证书，官网文档 已经很详细了，这里就不再赘述，不过有两点要补充说明:

1. 安装了某台电脑的 whistle 证书，换另一台，还需要继续安装另一台电脑的 whistle 证书

2. rootCA.crt 之所以能下载，是 whistle 做了代理，所以移动端安装证书时要先连上 whistle 的代理才能安装

手机代理到 whistle

我们可以将电脑、手机连在同一个局域网下 (一般连同一个 wifi 就可以，公司有网络策略限制得再想办法)，然后点击 whistle 界面右上角的 Online

手机上进入 wifi 设置，代理设为手动，主机名填圈出来的 ipv4 ip，端口填 whistle 默认的 8899:

这么操作后，我们就可以抓到手机上的请求了。

Mock 数据

日常开发中，我们经常需要对后端接口进行 Mock，这样就不需要依赖后端实际部署情况了，或者我们需要测试一些边缘情况，Mock 这些边缘情况就可以免除为测试这样的边缘链路需要做的许多麻烦事情。最简单的 Mock 可以针对一个 pattern 替换响应体和响应码等等。如下所示：

Bash # Rules # 将 example.com/api/user 接口的响应内容替换为 user.json 中的内容，并将响应码替换成 200 # 其中，user.json 在 Values 面板中保存 example.com/api/user resBody://{user.json} replaceStatus://200

我们甚至可以设定请求的响应延时，只需要再加一个 resDelay 的 operatorURI：

Bash # 10s 后返回 example.com/api/user resBody://{user.json} replaceStatus://200 resDelay://10000

可能有时候会有更加复杂的 Mock 需求，比如几个接口之间互相有关联，需要跑通一个完整的链路可能需要一些定制的逻辑。Whistle 提供了很多插件，其中有一个能够提供非常强大 Mock 能力的插件——whistle.vase。使用这个插件，我们甚至可以直接写 JS 代码，根据我们的具体请求参数作出各种具体逻辑。

Plain Text npm i -g whistle.vase

在安装完之后，就可以在 Plugins 中对其进行配置了。

移动端调试

移动端最佳的调试方案应该是直接连接到桌面浏览器的调试工具，比如说移动端的 Safari 可以直接连接到 Safari 上，安卓的 Chrome 可以直接连接到 Chrome 的 DevTools 上，这种调试方法所得到的调试功能最多最强大。但是，并不是所有情况下我们都可以使用这种方式进行调试的，此时就可以使用更加通用的方法，下面介绍两种借助 Whistle 进行移动端调试的方案。

Whistle 自带了 Weinre，可以进行移动端远程调试，开启该功能很简单，只需在需要调试的 pattern 后面加上如下operatorURI：

Bash www.zhihu.com weinre://debug

其中 debug 为类别（可以自由指定名称），方便我们对各个页面进行分类，这样一来，我们在 Whislte 的应用界面的 Weinre 菜单中就可以看到 debug 了，点击 debug，在手机上打开对应的页面，就可以愉快地进行调试了。

另一种方案是使用移动端的调试面板（引入特定的包），目前有许多移动端的调试面板工具可以满足轻量级的调试需求，比如 vConsole、Eruda 等等。不过，我们的代码中不一定有加载这些调试包（比如我们生产环境代码），我们可以借助 Whistle 在 HTML 响应体后面增加一段加载移动端调试面板的代码。比如说我们使用 Eruda，那么我们可以在 Values 中增加下面一段代码，取名为 load_eruda.js：

JavaScript (function() {   var script = document.createElement('script');   script.onload = function() {     eruda.init();   };   script.src = 'https://cdn.jsdelivr.net/npm/eruda';   document.body.appendChild(script); })()

假设我们要调试知乎（http://www.zhihu.com），利用 jsAppend 将这段自定义脚本加到 HTML 后方，像这样增加规则：

Bash www.zhihu.com jsAppend://

打开 www.zhihu.com，就可以看到 Eruda 的调试按钮了。

关于 whistle 就介绍到这里，如有疑问或任何想法，欢迎大家评论。

/https://az.800best.com/api/.*ldap/ file://‪‪C:\Users\gaotian\Desktop\1.json resCors://*

https://az.800best.com/api http://10.64.228.131:8080/api

参考资料：

whistle 官方文档

Whistle，web 抓包与 debug 利器

使用 Whistle 作为你的 Web 调试工具吧