如何使用Whistle进行优雅的web调试

Whistle 是一款 Web 调试工具，使用 Whistle，能够修改一个 HTTP/HTTPS 请求的方方面面，咱们能够经过它 Mock 数据、修改请求延迟时间、修改静态文件等等。市面上有许多 Web 调试工具，好比在 Windows 上比较有名的 Fiddler，好比说 Charles 等等。而 Whistle 具备开源免费、配置简单、以及跨平台等特色，在使用它一段时间以后，我认为在前端开发中它彻底可以代替上述的工具。下面让咱们结合实际场景来看看 Whistle 能帮助咱们作什么吧。

快速起步
在开始使用 Whistle 以前，须要安装以及进行一些配置。

1. 下载

npm i -g whistle

2. 启动 whistle 默认监听在 8899 端口

w2 start
启动 Whistle 以后，咱们访问 localhost:8899 就能够看到 Whistle 的配置界面了，如图，界面左侧有 4 个菜单项，Network 能够查看请求响应的详情。Rules 是规则配置的地方，关于规则是什么，咱们放到后面讲。在 Values 中咱们能够配置 key-value 数据，以后能够在 Rules 使用对应的键值进行引用。Plugins 里展现了咱们额外安装的 Whistle 插件，而且能够对这些插件进行配置。

Whistle 配置界面
Whistle 的规则主要由两部分组成，pattern 和 operatorURI，Whistle 使用 pattern 对请求进行匹配，并对匹配上的请求上应用 operatorURI 定义的操做，经过不一样的 operatorURI，能够作到替换请求体、响应体、响应码等等事情。

规则
为了让咱们的请求被 Whistle 代理，还需配置 HTTP 代理或者 HTTPS 代理到 Whistle，若是使用 Chrome 浏览器，推荐 SwitchyOmega 配置代理，这样更加灵活。另外，为了可以抓取 HTTPS 协议的包，咱们还须要下载安装并信任 Whistle 的 HTTPS 证书，其中，关于 iOS 的证书配置，我以前写了一篇短文。

关于 Whistle 更加详细的配置方法，请参考 Whistle 的官方文档。

下面，让咱们看看 Whistle 的一些功能。

映射
example.com localhost:8000
经过配置这样的规则，当咱们访问 example.com 的时候，实际请求会打到 localhost:8000。

若是咱们的 API 是同源的，而且咱们只想将静态资源的请求替换为本地开发中的，还能够这样配置：

假设全部 API 路径为 /api，仍然走实际地址

example.com/api example.com/api

其余请求到本地

example.com localhost:8000
Mock 数据
平常开发中，咱们常常须要对后端接口进行 Mock，这样就不须要依赖后端实际部署状况了，或者咱们须要测试一些边缘状况，Mock 这些边缘状况就能够免除为测试这样的边缘链路须要作的许多麻烦事情。最简单的 Mock 能够针对一个 pattern 替换响应体和响应码等等。以下所示：

Rules

将 example.com/api/user 接口的响应内容替换为 user.json 中的内容，并将响应码替换成 200

其中，user.json 在 Values 面板中保存

example.com/api/user resBody://{user.json} replaceStatus://200
咱们甚至能够设定请求的响应延时，只须要再加一个 resDelay 的 operatorURI：

10s 后返回

example.com/api/user resBody://{user.json} replaceStatus://200 resDelay://10000
可能有时候会有更加复杂的 Mock 需求，好比几个接口之间互相有关联，须要跑通一个完整的链路可能须要一些定制的逻辑。Whistle 提供了不少插件，其中有一个可以提供很是强大 Mock 能力的插件——whistle.vase。使用这个插件，咱们甚至能够直接写 JS 代码，根据咱们的具体请求参数做出各类具体逻辑。

npm i -g whistle.vase
在安装完以后，就能够在 Plugins 中对其进行配置了。

移动端调试
移动端最佳的调试方案应该是直接链接到桌面浏览器的调试工具，好比说移动端的 Safari 能够直接链接到 Safari 上，安卓的 Chrome 能够直接链接到 Chrome 的 DevTools 上，这种调试方法所获得的调试功能最多最强大。可是，并非全部状况下咱们均可以使用这种方式进行调试的，此时就可使用更加通用的方法，下面介绍两种借助 Whistle 进行移动端调试的方案。

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

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

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

(function() {
var script = document.createElement('script');
script.onload = function() {

eruda.init();

};
script.src = 'https://cdn.jsdelivr.net/npm/...';
document.body.appendChild(script);
})()
假设咱们要调试知乎（http://www.zhihu.com），利用 jsAppend 将这段自定义脚本加到 HTML 后方，像这样增长规则：

www.zhihu.com jsAppend://{load_eruda.js}
打开 www.zhihu.com，就能够看到 Eruda 的调试按钮了。

总结
以上就是对 Whistle 的介绍，Whistle 提供了超过 60+ 个协议（operatorURI），能够知足咱们平时在 Web 调试过程当中各式各样的需求，能够查看 Whistle 的文档进一步探索。固然，目前 Whistle 也存在一些不足，好比如今还不支持 HTTP/2 的抓包（做者有计划支持），好比 Mock 数据如何与团队共享的问题。不过，做为一款在积极开发且功能在我看来已经比较完善的应用，很是推荐你们一试。

附：其余相似工具Wireshark - 网络数据包分析软件，网络协议栈的各个层的数据均可以很方便地查看。Termshark - 「终端版」的 WiresharkCharles - 一款老牌 HTTP/HTTPS 抓包调试工具Fiddler - 又一款免费的 Web 调试工具mitmproxy - 一款开源免费的交互式的 HTTPS 代理