whistle简易教程

whistle 是什么, 为什么要用它

Whistle 是基于 Node.js 实现的跨平台 Web 抓包调试（HTTP）代理，主要功能有：

• 实时抓包：支持 HTTP、HTTPS、HTTP2、WebSocket、TCP 等常见 Web 请求的抓包；
• 修改请求响应：与一般抓包调试工具采用断点的方式不同，Whistle 采用类似系统 host 的配置规则方式；
• 扩展功能：支持通过 Node 编写插件，或作为独立 NPM 包引入项目两种扩展方式。

我们在日常开发中，会遇到以下场景:

• 难以定位的线上 bug，需要在本地开发环境下，连接生产环境接口进行 debug
• 后端接口还没有完成，需要用 mock 接口模拟后端接口来进行前端开发工作

这个时候就可以使用 whistle 解决这些痛点问题，并且相比于同类软件如 Charles，whistle 配置简单，更为方便易用。

安装 whistle

官方文档中 http://wproxy.org/whistle/install.html 已经给出了安装步骤，这里结合自身经验和踩过的坑，整理了一份安装攻略，建议直接根据该攻略安装&使用 whistle

1. 安装 Node

whistle支持` v0.10.0 以上版本的Node。

Windows或Mac系统，访问https://nodejs.org/，安装LTS 版本的Node，默认安装即可。

2. 全局安装 whistle

npm install -g whistle
# 或
yarn global add whistle

3. 启动 whistle

// 启动 w2 start
// 停止 w2 stop
// 重启 w2 restart

4. 配置代理

推荐使用浏览器代理，需要安装Chrome代理插件：推荐安装[SwitchyOmega]

添加一个 whistle 情景模式，配置代理服务器为本地 whsitle 服务的端口

之后在SwitchyOmage中切换到该情景模式

5. 安装证书

whistle 必须安装证书才可以代理 https 请求，这里我们还需要安装一下证书。

首先打开 whistle 控制面板 http://127.0.0.1:8899

之后打开下载的证书文件

安装完之后，我们还需要设置信任该证书。

打开证书管理界面（启动台-钥匙串访问），找到带有 whistle 的字样的证书，双击设置始终信任该证书

如果记录中包含协议为 H2 和 HTTPS 的记录，说明证书配置成功，接下来可以愉快地使用了。

配置规则

打开 http://localhost:8899/#rules 进入whistle的规则配置页面。左侧为规则集列表，默认规则集 Default。可以添加新的规则集，右键规则集可以看到更多操作。

我们需要把规则写在右侧的文本编辑器中，默认规则格式为，表示为对所有匹配 pattern 的请求，应用 operatorURI 对应的规则。

pattern operatorURI

• 若 operatorURI 是一个路径，代理该请求，真实请求地址等同于对原地址根据规则做请求地址替换
• **operatorURI 还可以是 whistle 支持的协议，whistle 的协议基本涵盖了抓包调试工具可以做的所有事情，包括修改请求头内容，修改响应体内容等等。完整协议列表可以查看 **http://wproxy.org/whistle/rules/

**详细的匹配模式见 **http://wproxy.org/whistle/pattern.html

请求替换

仅需配置简单的规则就可实现接口地址代理

域名匹配 & 路径匹配 & 精确匹配

# 域名匹配 将k8所有请求代理到k7
k8.dev.xiaoman.cn k7.dev.xiaoman.cn
# 路径匹配 仅将k8下后端请求代理到k7
k8.dev.xiaoman.cn/api k7.dev.xiaoman.cn/api
# 精确匹配 前面加 $，不会匹配子路径的请求
$k8.dev.xiaoman.cn/api k7.dev.xiaoman.cn/api
正则匹配 & 通配符匹配

# 使用正则表达式匹配请求 url
# 支持捕获 最多支持10个子匹配 $0...9，其中$0表示整个请求url，其它跟正则的子匹配一样 下面这条规则表示将所有测试环境中的接口请求代理到生产环境
/^https:\/\/.*\.dev\.xiaoman\.cn\/api\/(.*)/ https://crm.xiaoman.cn/api/$1
# 通配符匹配可看作简化的正则匹配
# 必须以^开头（需要限制结尾可以加上$），*为通配符，支持通过$0...9获取通配符匹配的字符串，其中$0表示整个请求url
# 以下规则与上面正则规则等价
^k*.dev.xiaoman.cn/api/*** crm.xiaoman.cn/api/$2

替换响应内容

实现方式很多，这里推荐使用 resBody 协议（替换响应体内容），可以直接内联使用操作值。

首先设置操作值，打开 http://127.0.0.1:8899/#values，点击上方操作按钮 Create 添加新的操作值，在里面写上 mock 的返回内容。

这里我们 mock 一个 json 接口的返回数据，内容设置为一个 json 对象。

在规则中添加，花括号括起来表示使用 whistle 的操作值，这里使用我们刚才添加的 mock1。

k8.dev.xiaoman.cn/api/purchaseOrderRead/listProductToBePurchase resBody://{mock1}

此时发起请求，可以发现响应的内容已经被替换了。

除了使用 resBody，还可以使用 tpl 和 file 协议，不过个人感觉都没有 resBody 来的方便，感兴趣可以自行了解。

实用小技巧