什么是 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。