Whistle 使用全攻略：让 Web 调试变得前所未有的简单

NolanKy
6,126 阅读8分钟

前言

Whistle 是一个基于 Node.js 的跨平台 Web 调试代理工具。它可以拦截和修改 HTTP/HTTPS 请求和响应，支持多种规则配置，适用于调试和开发环境。

安装 Whistle

Whistle 依赖于 Node.js 环境，因此在安装 Whistle 之前需要确保已经安装了 Node.js。可以通过以下命令检查 Node.js 是否已安装：

node -v
npm -v

如果没有安装 Node.js，可以前往 Node.js 官网 下载并安装。

接下来，通过 npm 安装 Whistle：

npm install -g whistle

安装完成后，可以通过以下命令启动 Whistle：

w2 start

image.png 启动成功后，Whistle 会在本地启动一个 Web 服务，默认监听 8899 端口。可以在浏览器中访问 http://127.0.0.1:8899 进入 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”情景模式。

image.png

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）。
    • 添加一个规则，例如： 
      www.example.com proxy://another-proxy-server:8080
      这条规则表示将所有访问 www.example.com 的请求转发到 another-proxy-server:8080。

  2. SwitchyOmega 配置：

    • 打开 SwitchyOmega 扩展，创建一个新的情景模式，命名为 "Whistle Proxy"。
    • 设置代理服务器为 127.0.0.1，端口为 8899。
    • 保存配置。

  3. 自动切换规则：

    • 在 SwitchyOmega 中，创建一个新的自动切换规则。
    • 添加一个规则，例如： 
      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：

    http://example.com http://test.com

  2. 修改响应内容

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

    http://example.com file://path/to/response.txt

  3. 拦截并修改请求头

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

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

image.png

查看请求和响应

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

image.png

使用插件

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

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

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

w2 install <plugin-name>

高级用法

多环境切换

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

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

动态数据注入

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

  1. 在 Whistle 的管理界面中，点击左侧的“Rules”选项卡。

  2. 配置一个规则，将请求或响应的数据注入到 JavaScript 脚本中：

    http://example.com js://path/to/script.js

  3. 在 script.js 中编写 JavaScript 代码，动态修改请求或响应的数据：

    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 数据文件：

    http://api.example.com/data file://path/to/mock/data.json

  3. 在 data.json 中编写 Mock 数据：

    {
  "status": "success",
  "data": {
    "id": 1,
    "name": "John Doe"
  }
}

流量录制与回放

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

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

常见使用场景

接口调试

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

抓包分析

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

本地开发

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

avatar
文章
阅读
粉丝