whistle常用功能汇总
Published in：2024-11-02 | category： 调试

前言

whistle 除了抓包外，它还能修改请求与响应、真机调试 h5 移动端、解决跨域、域名映射等等。

安装&使用

安装与启动 whistle

1
2
3
4
npm install -g whistle
w2 start // 启动whistle

w2 stop //停止whistle

启动之后会在本机启动一台服务器，默认端口是8899

在本机打开该地址会进入 whistle 的控制面板，如下图所示。抓包，修改请求和响应的内容都是在这个控制面板内进行配置的。

如果要防止其他人访问配置页面，可以在启动时加上登录用户名和密码_-n yourusername -w yourpassword_

浏览器代理插件

在启动本地启动了 whistle 之后，要抓包网络的请求并不会经过 whistle，这时候我们就需要安装一个插件，让目标网站的请求经过 whistle 完成抓包等后续的操作。

官方推荐的插件是SwitchyOmega，如果你使用的谷歌浏览器需要在应用商店翻墙进行下载。如果不想翻墙可以直接使用自带的 edge 浏览器，在 edge 的应用商店下载可以免翻墙。点击获取即可轻松下载。

安装完成之后浏览器的工具栏内就会出现一个圆圈图标。

我们进入选项界面对浏览器代理进行配置，把代理服务器填写 whistle 启动的端口和地址，然后把 switchyOmega 的选项改为 proxy 服务器代理就完成了。

这时候在浏览器内打开想要抓包的网站就可以抓包了。目前只可以抓 http 的请求，因为我们还没有进行证书配置，如何配置证书后面会说。

注意如果使用 edge 下载的插件就只能在 edge 插件内进行抓包，如果在谷歌打开网站，并不会有抓包的信息。

配置证书

虽然现在在 whistle 的 network 内打印出了一些信息，但全部都是 http 的请求，并没有 https 的请求，这是因为我们没有配置证书。配置证书方法如下，点击二维码进行证书下载（没错这个二维码是可以点击的，绷住了），随后跟着步骤走就行了。

安装证书请参考文档: wproxy.org/whistle/web…

配置成功的话 https 这块会变成一个对勾。

配置完证书之后再次刷新页面，就可以看到所有的 https 请求了，可以清晰的看到请求体和响应体的内容

手机抓包

首先抓包的前提是手机和电脑要处于一个网络下。关闭电脑端的防火墙，然后在手机的 wifi 设置中，把 WiFi 的代理模式设置为手动代理，主机名和端口号是 电脑的 ip 地址+whistle 的端口号。ip 地址可以通过终端的 ipconfig 查询。

配置完之后手机发送的请求在 whistle 的 network 列表中就能看到了。在手机端访问一下掘金的官网。

在工具栏这块可以通过 settings 选项对请求进行过滤。可以在 whistle 中看到手机端访问的列表数据。

配置代理

为了让 Whistle 能够拦截和处理网络请求，需要将系统或浏览器的代理设置为 Whistle 的地址（默认是 127.0.0.1:8899）。

在系统中配置代理

Windows

  1. 打开“控制面板” -> “网络和 Internet” -> “Internet 选项”。
  2. 选择“连接”选项卡，点击“局域网设置”。
  3. 勾选“为 LAN 使用代理服务器”，并在地址栏中输入 127.0.0.1，端口填写 8899。
  4. 点击“确定”保存设置。

macOS

  1. 打开“系统偏好设置” -> “网络”。
  2. 选择当前使用的网络连接（如 Wi-Fi），点击“高级”。
  3. 选择“代理”选项卡，勾选“Web 代理 (HTTP)”和“安全 Web 代理 (HTTPS)”，并在地址栏中输入 127.0.0.1，端口填写 8899。
  4. 点击“确定”保存设置。

在浏览器中配置代理

如果不想全局配置代理，可以在浏览器中单独配置。以 Chrome 为例，可以使用 SwitchyOmega 插件来管理代理设置。

  1. 安装 SwitchyOmega 插件。
  2. 创建一个新的情景模式，命名为“Whistle”。
  3. 在代理服务器设置中，填写代理地址 127.0.0.1 和端口 8899。
  4. 保存设置并切换到“Whistle”情景模式。

Whistle 和 SwitchyOmega 是两种常用的网络代理工具，它们可以结合使用来实现更灵活和高效的网络代理配置。以下是它们如何协同工作的基本原理和步骤：

SwitchyOmega

SwitchyOmega 是一个浏览器扩展（支持 Chrome 和 Firefox），用于管理和切换代理设置。它可以根据 URL 模式、时间、地理位置等条件自动切换代理。

工作原理

  1. Whistle 作为代理服务器：
    • 首先，你需要在本地或服务器上运行 Whistle。Whistle 会监听一个特定的端口（例如 8899），作为代理服务器来接收和处理 HTTP/HTTPS 请求。
  2. 配置 Whistle 规则：
    • 在 Whistle 的配置界面中，你可以定义各种规则来拦截和修改请求。例如，你可以设置规则将特定域名的请求转发到不同的代理服务器，或者修改请求头等。
  3. 安装和配置 SwitchyOmega：
    • 在浏览器中安装 SwitchyOmega 扩展。
    • 创建一个新的代理情景模式（Profile），并将其类型设置为 HTTP 代理。
    • 将代理服务器地址设置为 127.0.0.1，端口设置为 Whistle 监听的端口（例如 8899）。
  4. 设置自动切换规则：
    • 在 SwitchyOmega 中，你可以定义自动切换规则。例如，你可以设置某些域名或 URL 模式使用 Whistle 代理，而其他请求则直接连接。

示例配置

假设 Whistle 监听端口为 8899，以下是一个简单的配置示例：

  1. Whistle 配置：
    • 打开 Whistle 的配置界面（通常是 http://127.0.0.1:8899）。
    • 添加一个规则，例如：
1
www.example.com proxy://another-proxy-server:8080

这条规则表示将所有访问 www.example.com 的请求转发到 another-proxy-server:8080。

  1. SwitchyOmega 配置：
    • 打开 SwitchyOmega 扩展，创建一个新的情景模式，命名为 “Whistle Proxy”。
    • 设置代理服务器为 127.0.0.1，端口为 8899。
    • 保存配置。
  2. 自动切换规则：
    • 在 SwitchyOmega 中，创建一个新的自动切换规则。
    • 添加一个规则，例如：
1
www.example.com -> Whistle Proxy

这条规则表示当访问 www.example.com 时，使用 “Whistle Proxy” 情景模式。

总结

通过上述配置，当你在浏览器中访问 www.example.com 时，请求会先通过 SwitchyOmega 转发到 Whistle，Whistle 根据配置的规则处理请求，然后将请求转发到最终的目标服务器。这样，你可以灵活地控制和调试网络请求。

使用 Whistle 进行调试

配置规则

Whistle 通过配置规则来拦截和处理网络请求。在 Whistle 的管理界面中，点击左侧的“Rules”选项卡，可以看到规则配置界面。

示例规则

  1. 重定向请求

将所有对 http://example.com 的请求重定向到 http://test.com：

1
http://example.com http://test.com
  1. 修改响应内容

将 http://example.com 的响应内容替换为本地文件 response.txt：

1
http://example.com file://path/to/response.txt
  1. 拦截并修改请求头

为所有对 http://example.com 的请求添加一个自定义请求头：

1
http://example.com reqHeaders://{ "X-Custom-Header": "value" }

查看请求和响应

在 Whistle 的管理界面中，点击左侧的“Network”选项卡，可以查看所有被拦截的请求和响应。点击某个请求，可以查看详细的请求头、响应头和响应内容。

使用插件

Whistle 提供了丰富的插件，可以扩展其功能。在 Whistle 的管理界面中，点击左侧的“Plugins”选项卡，可以查看和管理已安装的插件。常用的插件包括：

  • whistle.har：用于导出 HAR 文件，方便分析请求和响应。
  • whistle.weinre：集成 Weinre，方便进行移动端调试。

可以通过以下命令安装插件：

1
w2 install <plugin-name>

高级用法

多环境切换

在实际开发中，我们经常需要在不同的环境之间切换，例如开发环境、测试环境和生产环境。Whistle 提供了多环境切换的功能，可以通过配置不同的规则组来实现。

  1. 在 Whistle 的管理界面中，点击左侧的“Rules”选项卡。
  2. 创建多个规则组，例如“开发环境”、“测试环境”和“生产环境”。
  3. 在不同的规则组中配置相应的规则。
  4. 通过切换规则组来实现多环境切换。

动态数据注入

在调试过程中，有时需要动态地修改请求或响应的数据。Whistle 提供了动态数据注入的功能，可以通过 JavaScript 脚本来实现。

  1. 在 Whistle 的管理界面中，点击左侧的“Rules”选项卡。
  2. 配置一个规则，将请求或响应的数据注入到 JavaScript 脚本中：
1
http://example.com js://path/to/script.js
  1. 在 script.js 中编写 JavaScript 代码，动态修改请求或响应的数据：
1
2
3
4
5
6
7
module.exports = function (req, res) {
  // 修改请求头
  req.headers['X-Custom-Header'] = 'value';

  // 修改响应内容
  res.body = res.body.replace('old content', 'new content');
};

HTTPS 解密

Whistle 支持 HTTPS 解密，可以拦截和查看 HTTPS 请求和响应的内容。为了实现 HTTPS 解密，需要安装 Whistle 的根证书。

  1. 在 Whistle 的管理界面中，点击左侧的“HTTPS”选项卡。
  2. 点击“Download Root CA”下载 Whistle 的根证书。
  3. 安装根证书并信任它。

Windows

  1. 双击下载的根证书文件，打开证书安装向导。
  2. 选择“将所有的证书放入下列存储”，点击“浏览”。
  3. 选择“受信任的根证书颁发机构”，点击“确定”。
  4. 完成证书安装。

macOS

  1. 双击下载的根证书文件，打开“钥匙串访问”。
  2. 将证书拖动到“系统”钥匙串中。
  3. 右键点击证书，选择“显示简介”。
  4. 展开“信任”选项，将“使用此证书时”设置为“始终信任”。

Mock 数据

在前端开发过程中，有时需要模拟后端接口返回的数据。Whistle 提供了 Mock 数据的功能，可以通过配置规则来实现。

  1. 在 Whistle 的管理界面中，点击左侧的“Rules”选项卡。
  2. 配置一个规则，将请求重定向到本地的 Mock 数据文件：
1
http://api.example.com/data file://path/to/mock/data.json
  1. 在 data.json 中编写 Mock 数据：
1
2
3
4
5
6
7
{
  "status": "success",
    "data": {
    "id": 1,
      "name": "John Doe"
  }
}

流量录制与回放

Whistle 提供了流量录制与回放的功能，可以记录网络请求和响应，并在需要时回放这些流量，方便进行回归测试。

  1. 在 Whistle 的管理界面中，点击左侧的“Network”选项卡。
  2. 点击“Record”按钮开始录制流量。
  3. 完成录制后，点击“Stop”按钮停止录制，并保存录制的流量。
  4. 在需要回放流量时，点击“Replay”按钮选择录制的流量文件进行回放。

常见使用场景

接口调试

在开发过程中，我们经常需要调试接口请求。通过 Whistle，可以方便地拦截和修改请求，模拟各种场景。例如，可以模拟接口返回错误，测试前端的错误处理逻辑。

抓包分析

Whistle 可以用来抓取和分析网络请求，帮助我们了解应用的网络行为。例如，可以分析页面加载过程中发起的所有请求，找出性能瓶颈。

本地开发

在本地开发过程中，可以通过 Whistle 将某些请求重定向到本地服务器，方便调试。例如，可以将对生产环境接口的请求重定向到本地开发环境。

应用场景

whistle 的强大远远不止能够抓包这么简单，它还有很多其他的功能。

Weinre 控制台

集成weinre的功能，用户只需通过简单配置(pattern weinre://id)即可使用，具体参见weinre，更多移动端调试方法可以参考：利用 whistle 调试移动端页面。

相信有过 h5 开发经历的同学都遇到过这种情况，我电脑 f12 模拟移动端调试的时候非常的完美，但是一到真机上会出现各种奇奇怪怪的问题，而这些问题往往是比较难以定位问题并修复的，因为在真机的 h5 页面上没有控制台，我们无法审查元素。

但是当你使用了 whistle 你会发现只需要配置一行规则，就可以轻松的调出控制台调试真机的 h5 页面，这就是 Weinre 控制台。具体效果如下图，这里为了方便展示，真机调试就用 pc 端模拟手机代替（真实调试的时候，需要先实现上述的手机抓包，即手机电脑在同一网络下，并且修改手机 wifi 的代理。）。可以看到左侧并不是浏览器自带的控制台，而是 whistle 自带的功能，在视察与修改左侧元素时，我们手机上的内容也会随之改变。

那么如何实现上面的效果呢？

我们只需要在 Whistle 控制台左侧的 Rules 中添加一条规则即可。

${监听的网址} weinre://${实例名称} 这个实例名称是工具栏中 Weinre 下拉框中的名字可以任意起

1
https://juejin.cn/ weinre://juejin

点击工具栏中 Weinre 下面的 juejin 即可跳转到 Weinre 控制台页面，再刷新下监听网址的页面即可审查元素。

借助 Weinre 控制台，我们可以更加容易的解决真机兼容性问题。

篡改响应

修改响应体还是很常用的，例如修复 bug 的时候，如果怀疑是接口返回值有误导致的问题，就可以通过修改响应体，来排查到底是不是后端的问题。

在调试接口的时候，例如后端接口新增了一个返回值，我们需要根据这个返回值进行相应的逻辑处理，这时候我们也可以通过修改响应体的方式 mock 一下新增的字段，只要确保自己 mock 的结果和接口返回的结构一样，就可以提前完成接口联调。

具体做法：

前半段是请求地址（支持正则匹配） 后半段是响应体的文件。file://${路径} 默认找的是 Values 下文件。

Ctrl+右键点击橘色的路径，会自动跳转到 Values 下对应的文件里，如果没有会自动创建非常方便。

mock.json

可以看到 加完配置之后对应接口的响应体就变成了 mock.json 里面的内容。

解决跨域

解决跨域是篡改响应的一种应用，有的后端接口没有配置 CORS，导致前端接口跨域

历史解决：通过 vite 或者 webpack 等工具做一个反向代理

通过 Whistle 的resHeaders 可直接修改跨域接口的响应头，增加 cors 配置

1
2
3
4
5
6
7
8
9
10
11
12
13
/getList/ resHeaders://{cors}

# cors 文件
access-control-allow-credentials: true always
access-control-allow-headers: *
access-control-allow-methods: GET, PUT, POST, DELETE, HEAD, OPTIONS
access-control-allow-origin: *
access-control-expose-headers: *
access-control-max-age: 18000L
content-type: application/json
date: Fri, 02 Dec 2022 04:00:28 GMT
server: 123123
Access-Control-Allow-Origin: *

当然功能远不止这些，还可以 篡改 API 响应时间、HTTP 响应状态码等。。。

篡改请求

可以使用 reqMerge 修改修改请求体，它会把merge.json文件的请求体合并到原本接口的请求体中。

1
2
3
4
5
6
/savePerson/ reqMerge://{merge.json}

# merge.json
{
  name:'张三'
}

jsPrepend 进行 js 注入

使用 jsPrepend 可以在目标网址的 srcipt 中添加任意的 js 代码。我们这里向页面中注入一个 Vconsole 移动端调试工具。${注入到哪个地址} jsPrepend://${注入的js路径}

1
2
https://juejin.cn/ jsPrepend://https://cdn.jsdelivr.net/npm/eruda@2.4.1/eruda.min.js
https://juejin.cn/ jsPrepend://{test.js}

test.js

1
var vConsole = new window.VConsole();

打开控制台可以发现，我们注入的 js 被添加到了 head 的最顶部。

VConsole 成功显示到了页面上

域名映射

1
2
# 可以一个ip 配置多个域名 并且支持端口号
127.0.0.1:9000 ddd.com aaa.com

文档

whistle 文档

whistle
Next:
puppeteer知识汇总

    • Copyright © 2019 - 2024 zhangzhiyong | Powered by Hexo