前端你应该知道的web调试工具——whistle

官网：http://wproxy.org/whistle/

whistle，拼音[wēisǒu])基于 Node 实现的跨平台 web 调试代理工具，类似的工具有 Windows 平台上的 Fiddler，主要用于查看、修改 HTTP、HTTPS、Websocket 的请求、响应，也可以作为 HTTP 代理服务器使用，不同于 Fiddler 通过断点修改请求响应的方式，whistle 采用的是类似配置系统 hosts 的方式，一切操作都可以通过配置实现，支持域名、路径、正则表达式、通配符、通配路径等多种匹配方式，且可以通过 Node 模块扩展功能。

一. 安装和使用：

1. 安装：

npm install -g whistle
// Mac
sudo npm install -g whistle

2. 启动 whistle。
   通过命令 w2 start 即可启动。启动之后，我们看到以下提示，就表示安装成功了
   

这里还需要留意其他几个经常使用的命令

	w2 help // 查看帮助，里面很多常用的命令
	w2 restart // 重启 whistle
	w2 stop // 停止 whistle
	w2 run // 调试模式启动whistle(主要用于查看whistle的异常及插件开发)

3. 配置代理：
   分为全局代理、浏览器代理和移动端代理。这里主要谈谈 chrome 浏览器代理。其他详情可以查看官方文档。需要注意的是，代理服务器：127.0.0.1 端口号：8899。如果端口被占用，可以通过 -p 来指定新的端口
   1. 首先先下载 Chrome 代理插件：推荐安装 SwitchyOmega ，然后新建一个情景模式，配置如下：
      
   2. 安装根证书，假如不安装根证书的话，就不能抓 HTTPS 的包。

二. 界面讲解

对于新手来说，我们先熟悉下 whistle 的界面，有个大概的印象

以下是 whistle 的界面，常见的几个选项：

• Network——请求列表页面
• Rules——操作规则配置页面
• Values——存放 KeyValue 的系统
• Plugins——插件列表页面
  

三. 请求代理和跨域问题解决

whistle 使用的是类似代理的方式，Rules 版面下默认有一个 default 的分组，我们可以创建、重命名、删除一个分组，可以根据以下示例快速建立一个分组，如动图所示：

接下来，我们就可以在右侧建立一些规则了。我们来拿掘金做个演示吧，掘金推荐首页获取列表数据的接口为 https://apinew.juejin.im/recommend_api/v1/article/recommend_all_feed，以下是目前的页面，注意，该接口的响应头设置了 access-control-allow-origin: https://juejin.im

我们根据这个接口设置一条规则，以下规则表示完全匹配该接口，返回指定的juejinList.json数据，相当于 Mock 这个接口的返回.

# 完全匹配，相当于 Mock 这个接口的返回
https://apinew.juejin.im/recommend_api/v1/article/recommend_all_feed file://{juejinList.json}

查看效果，报错了，看看报错，跨域问题，线上的之所以没有报错，原因在于，线上的接口的响应头设置了 access-control-allow-origin: https://juejin.im，所以我们还应该 Access-Control-Allow-Origin 请求头

怎么办，就没有方法了么？当然不是，这个时候只需要多配置另外一条规则，总的规则如下：

https://apinew.juejin.im/recommend_api/v1/article/recommend_all_feed file://{juejinList.json}
https://apinew.juejin.im/recommend_api/v1/article/recommend_all_feed resCors://enable

上面的路径如果太长，可以用正则匹配替代。

查看效果，可以看到访问掘金推荐首页，返回了我们代理的数据了

---

代理请求、响应的header等信息

https://www.qq.com reqHeaders://{loginCookie}
https://www.qq.com/some/ajax resHeaders://{CORSHeaders}

demo测试：

200.test.baidu.com reqCookies://{cookies.json}
dev-szom.back.baidu.com reqCookies://{cookies.json}

其中，200.test.baidu.com与dev-szom.back.baidu.com都是Ajax发送请求的域名，会根据正则匹配。

cookies.json的配置为：

{
    "like": 'xiaoming',
    name: 'wangnan'
}

修改返回码

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

whistle高级用法

https://blog.csdn.net/ib_yeang/article/details/122047794

参考链接1：https://cloud.tencent.com/developer/article/1704552
参考链接2：https://github.com/avwo/whistle/issues/271
参考链接3：https://juejin.im/post/6844904137457565710
参考链接4： https://juejin.im/post/6844904137457565710#comment