whistle 调试工具

Jioho 7/19/2020 工具

原本已经习惯使用 spy-debugger fiddler 的我已经不屑在去看一个新的调试工具，我觉得很多东西够用就行
当我重新学习使用后，才发现 whistle 是真的香

# whistle 介绍

放上 github 地址： https://github.com/avwo/whistle (opens new window)

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

为什么说 whistle 真香？

手机调试 H5 vue-devtools weinre fiddler (opens new window)
fiddler 强大在于他可以抓取请求，修改请求头，修改响应结果，把线上链接代理为本地文件...等功能
使用 weinre/spy-debugger 调试手机页面 (opens new window)
spy-debugger 基于 weinre 实现了自动注入 JS，常用于抓取请求，查看页面布局（调整 html 和 css 全靠它了）。当然看我们自己代码的console.log也得靠 weinre

但是，他们都有明显的缺点：少了另一半的功能
fiddler 不能调试样式，spy-debugger 不能代理请求等。二者结合唯一的方式就是，手机用 fiddler 代理，然后在fiddler中注入 weinre 。从而达到调试功能，可是这也太麻烦了，毕竟我抓取请求的时候不一定要调样式啊~

whistle 的出现，直接结合了二者！并且简化了非常多的 fiddler的配置

# 安装和启动 whistle

npm 安装，无需多说
启动默认使用的是 8899 。如果不加-p 8888那启动的就是 8899。不过那么多调试工具默认都用了 8888 端口，我就继续 8888 了

# 安装 whistle
npm install -g whistle

# 启动
w2 start -p 8888

1
2
3
4
5

启动后 whistle 并不会占用一个终端
啥意思呢，就是启动后，服务将会在后台运行（我第一次还以为没运行成功。spy-debugger启动后，当前终端就不能使用了（如果还要用终端的功能，还得新开一个终端）。whistle 这细节真的 无 fuck 可说

# 配置代理

whistle 并不能直接把所有请求都抓取过来，所以我们得把请求代理到whistle那边去

# 方法一：直接配置系统代理常适用于可以要抓取一些小程序请求或者其他软件的请求

根据我们启动的端口，我们需要把请求都代理到 127.0.0.1 端口是8888。没设置的话就是8899

mac 用户自行查找（毕竟我还没有 mac 的设备）

# 方法 2：浏览器代理推荐毕竟多数调试网页的

浏览器代理网上有很多插件，而我使用的就是 Proxy SwitchyOmega (opens new window)
这个小玩意可能要翻山越岭，不过都是小 case，自行安装，实在不行就走系统代理把~

完整设置步骤：

打开设置

添加情景模式

关键的设置

最后记得点应用选项，才能生效

如何验证生效没？在启动后，选择我们新增的情景模式

直接访问 http://local.whistlejs.com (opens new window)。如果代理成功了，打开即可看到whistle对应的页面，如果打开是 404 ，那就是配置不对~

配置不对的原因有很多：

比如如果你已经翻山越岭，需要暂时关掉
如果你用了谷歌访问助手，也是需要先关掉（通常都是这个原因导致的）

# 手机调试代理手机端只能用这个代理咯

打开 wifi。找到代理项，对应设置好就行了

# 下载证书

如果用不上调试 https 可以先跳过这一步

安装证书也有讲究

需要选择是受信任的证书，否则 window 会自动把你的证书归位不信任证书。到时候 chrome 打开依旧提示是不受信任的证书，无法打开

mac 用户也是自行看着办~反正受信任这个证书即可

# whistle 的常用功能

# 查看捕获的请求

在最底下的小黑条，可以设置我们要筛选的内容，这样可以排除其他网站的干扰，当然上面工具栏中的Filtter可以设置筛选更多的功能。

# 修改响应的内容

把线上的请求代理到本地的文件 比如，我们把淘宝的请求，代理为本地的 html 文件

taobao.com 的相应为一个 html 文件，我们就把这份代理的文件改了！

我在桌面新建了一个叫 taobao.html的文件，内容如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    代理淘宝的网页
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11

添加一条配置

配置写法通常都是第一段是要匹配的链接然后加一个空格，然后填入要进行的操作
file:// 就是说把请求代理为文件
想问 file在哪里来的？等下会说，莫急
添加配置后记得按下 ctrl+s 保存才生效

看下响应结果：

# Values 的使用

还有一个特别实用的功能，在Rules下面一栏，还有一个Values。里面可以写我们自己的文件，比如还是代理淘宝这个例子

创建一个 values 的规则，其名为 taobao.html（这里的.html）加不加都行的，只是如果加了相应的后缀，可能会有对应的颜色高亮，比如.json，.js 代码会对应高亮，比较好看而已~

回到 Rules。把我们之前的文件路径，改为 {}包裹，中间的内容就是values配置项的名称。

那剩下的代理JS,修改 JSON 的接口响应，应该就无须多说了把，在Values添加你想返回的内容，然后使用代理

# 重定向链接

注意和等下说的请求代理的区别

重定向则是访问 a.com 实际上立刻跳转到了 b.com 包括浏览器的域名也会发生变化，只是whistle帮我们做了跳转

使用 redirect 将 baidu.com 重定向到 qq.com
redirect 和上面说的 file 是一样的，都是whistle内置的语法，等下会细说

https://www.baidu.com/ redirect://https://www.qq.com/

# 请求代理

请求代理和 nginx 的代理很像（其实就是一样的），比如我们在开发 vue 项目，本地的 url 为localhost:8080，而接口链接是a.com/api/xxx 这时候直接发起请求，会报跨域的问题。但是这个跨域我们并不需要解决，因为项目上线后，这问题就不存在了啊，我们只需要配置一段规则，本地开发的时候不要报错，能拿到数据即可，那就可以用上代理

http://localhost:8080/api http://a.com/api

# 模拟错误的状态值

用到了 statusCode

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

Web 开发有时会遇到请求 header 设置不对带来的一些问题，如果问题出现在正式环境，我们可以通过修改请求 header （比如修改 Cookie、user-agent、Content-Type 等）来模拟修复，等确认问题后，再修改代码，提高效率。

{} 写法就是我们在Value配置中的内容。我们可以通过这项功能，模拟允许跨域请求的情况

我们可以通过 resHeaders 来修改响应头，但这么做可能导致一些跨域的 header 丢失，对此，我们可以通过 resHeaders 加上跨域相关 header

reqHeaders 设置请求头
resHeaders 设置响应头

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

1
2

Value 中 CORSHeaders 的配置：

Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, token
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true
content-type: application/json
status: 200

1
2
3
4
5
6

# 动态添加 JS

使用 jsPrepend

https://www.taobao.com jsPrepend://{alert.js}

alert.js 内容如下（在Value中写的配置）

alert('hello taobao')

能动态插入 JS，那能实现的功能就很多啦，比如用 JS 去引入一些第三方库之类的~
脑洞有多大，调试就有多方便！

# 调试界面

关于调试，whistle 提供了插件，是 vConsole 的

npm install whistle.inspect -g

然后在 Rules 中添加，这时候淘宝就有 vConsole 出现了

https://www.taobao.com whistle.inspect://

既然调试，就少不了一开始提到的weinre，whistle 也是帮我们内置了这个功能。要开启这个功能，也是得写一句命令

https://www.taobao.com weinre://

然后点击上面工具栏中的 weinre 即可打开调试页面，看到自己的节点就可以调试了

# whistle 中 Rules 内置的命令有多少

很简单，打开Rules，按下 F1 ，自动打开了 http://wproxy.org/whistle/rules/ (opens new window) 就可以看到全部支持的命令了，还有详细用法

当然这些命令也有智能提示，并不用你全部记得，比如我们想注入 JS。输入 js：

内置的命令中还有非常多实用的功能，只有你想不到，没有 whistle 做不到

# whistle 命令部分笔记

# 启动 whistle

启动就很简单了

w2 start -p 8080
# 或
w2 start

1
2
3

# 停止 whistle

因为启动后是在后台运行的，调试完成后我们可以关闭 whistle

w2  stop

# 重启 whistle

w2 restart

# 更新 whistle

npm install whistle -g

# 查看帮助

w2  --help
# 或
w2  -h

1
2
3

Jioho 的博客

Choose mode