web调试之Whistle

Whistle

官方文档

是基于 Node 实现的跨平台抓包调试代理工具，有以下基本功能：

1）查看 HTTP、HTTPS、HTTP2、WebSocket、TCP 请求响应数据

2）修改 HTTP、HTTPS、HTTP2、WebSocket、TCP 请求响应数据

修改请求 url、方法、头部、内容等
修改响应状态码、头部、内容，并支持本地替换等
修改 WebSocket 和 TCP 收发的帧数据

3）设置 hosts（支持 IPv6）、http-proxy、https-proxy、socks

4）作为HTTP代理或反向代理

5）集成常用的 web 调试工具，如 weinre 和 log 等

6）支持用 Node 编写插件扩展

whistle基本上覆盖了所有抓包调试代理可以实现的功能，且所有操作都可以通过类似配置hosts的方式实现。类似的工具有Windows平台上的Fiddler；

1、安装

whistle安装过程需要以下步骤（缺一不可）：

安装Node
安装whistle
启动whistle
配置代理
安装根证书

上述步骤的详细操作分别参见如下文档：

1）安装启动whistle

2）安装whistle根证书

2、基本命令

启动、停止、重启whistle的命令行命令如下：

bash 复制代码

# 查看whistle的所有命令行操作
w2 --help
# 启动
w2 start
# 停止
w2 stop
# 重启
w2 restart

3、配置代理

配置信息：默认代理本地127.0.0.1，端口8899。
使用代理

1）全局代理，直接配置系统代理；

2）浏览器代理：安装浏览器代理插件SwitchyOmega (推荐)；

3）移动端配置代理（以ios为例）

如果连接的是Wi-Fi代理不成功，原因是不能和电脑本机处于相同ip，同一个iP不能互访。切换Wi-Fi即可。

4）其他：微信开发工具使用代理

4、创建规则

打开http://127.0.0.0:8899，通过右键菜单或页面上方菜单栏的Create 按钮创建一个分组

1）设置hosts

指定 www.ifeng.com 的ip和端口，把请求转发到本地8080端口，这个在平时开发中可以用来去掉url中的端口号:

bash 复制代码

# www.ifeng.com 127.0.0.1
www.ifeng.com 127.0.0.1:8080
# or
127.0.0.1:8080 www.ifeng.com

也可以用某个域名的ip设置hosts

bash 复制代码

www.ifeng.com host://www.qq.com:8080
# or
host://www.qq.com:8080 www.ifeng.com

2）本地替换

平时开发中经常会用到这个功能，把响应替换成本地文件内容。

bash 复制代码

# Mac、Linux
www.ifeng.com file:///User/username/test
# or www.ifeng.com file:///User/username/test/index.html

# Windows的路径分隔符可以用 \ 或者 /
www.ifeng.com file://E:\xx\test
# or www.ifeng.com file://E:\xx\test\index.html

http://www.ifeng.com会先尝试加载/User/username/test这个文件，如果不存在，则会加载/User/username/test/index.html，如果没有对应的文件则返回404。

请求转发

www.ifeng.com 域名下的请求都替换成对应的www.aliexpress.com域名

bash 复制代码

www.ifeng.com www.aliexpress.com

注入html、js、css

whistle会自动根据响应内容的类型，判断是否注入相应的文本及如何注入(是否要用标签包裹起来)。
bash 复制代码
```
     # Mac、Linux
     www.ifeng.com html:///User/xxx/test/test.html
     www.ifeng.com js:///User/xxx/test/test.js
     www.ifeng.com css:///User/xxx/test/test.css
     
     # Windows的路径分隔符可以用`\`和`/`
     www.ifeng.com html://E:\xx\test\test.html
     www.ifeng.com js://E:\xx\test\test.js
     www.ifeng.com css://E:\xx\test\test.css
```
所有www.ifeng.com域名下的请求，whistle都会根据响应类型，将处理好的文本注入到响应内容里面，如是html请求，js和css会分别自动加上script和style标签后追加到内容后面。
调试远程页面

利用whistle提供的weinre和log两个协议，可以实现修改远程页面DOM结构及自动捕获页面js错误及console打印的信息，还可以在页面顶部或js文件底部注入指定的脚步调试页面信息。

使用whistle的功能前，先把要相应的系统代理或浏览器代理指向whistle，如何设置可以参考：安装启动

weinre：
bash 复制代码
```
www.ifeng.com weinre://test
```
配置后保存，打开[[www.ifeng.com](http://](https://link.juejin.cn?target=http%3A%2F%2Fwww.ifeng.com%255D(http%3A%2F%2F "http://www.ifeng.com%5D(http://") /)，鼠标放在菜单栏的weinre按钮上会显示一个列表，并点击其中的test项打开weinre的调试页面选择对应的url切换到Elements即可。

log:
bash 复制代码
```
www.ifeng.com log://{test.js}
```
配置后保存，鼠标放在菜单栏的Values按钮上会显示一个列表，并点击其中的test.js项，whistle会自动在Values上建立一个test.js分组，在里面填入console.log(1, 2, 3, {a: 123})保存，打开Network -> 右侧Log -> Console，再打开 www.ifeng.com ，即可看到Log下面的Page输出的信息。
Mock 数据

最简单的 Mock 可以针对一个 pattern 替换响应体和响应码等等。如下所示：
bash 复制代码
```
# Rules
# 将 www.mock.com/api/user 接口的响应内容替换为 user 中的内容，并将响应码替换成 200
# 其中，user 在 Values 面板中保存
www.mock.com/api/user resBody://{user} replaceStatus://200
```
设定请求的响应延时，只需要再加一个 resDelay 的 operatorURI：
bash 复制代码
```
# 10s 后返回
www.mock.com/api/user resBody://{user} replaceStatus://200 resDelay://10000
```
可能有时候会有更加复杂的 Mock 需求，比如几个接口之间互相有关联，需要跑通一个完整的链路可能需要一些定制的逻辑。Whistle 提供了很多插件，其中有一个能够提供非常强大 Mock 能力的插件------ whistle.vase 。使用这个插件，我们甚至可以直接写 JS 代码，根据我们的具体请求参数作出各种具体逻辑。
bash 复制代码
```
npm i -g whistle.vase
```
在安装完之后，就可以在 Plugins 中对其进行配置了。

5、捕获https

whistle支持抓取https 请求，具体配置方法参见：HTTPS拦截

6、真机调试

调试移动页面有两种方式，一种是Weinre，另外一种是log日志输出。

weinre可以用于调试远程页面。

bash 复制代码

www.midea.cn weinre://midea

当用手机打开配置的页面时，在顶部操作栏的Weinre栏，在下拉列表就可以找到设置的weinre id的，点击会新开一个weinre调试页面，就可以开始使用weinre。

bash 复制代码

www.midea.cn log://{log.js}

通过自动监控 html 页面或 js 文件出现的错误及 console.xxx 打印出来的信息，会自动在 whistle 界面的 log 模块显示这些错误及信息日志。