前端码农

Appearance

whistle 使用指南 ​

安装 whistle ​

bash
npm install -g whistle

常用命令 ​

bash
w2 start     # 启动 whistle（开机后需要在 CMD 中输入）
w2 restart   # 重启 whistle
w2 stop      # 停止 whistle
w2 run       # 调试模式启动（用于查看异常及插件开发）

浏览器代理配置 ​

1. 安装代理插件 ​

  • ZeroOmega 下载

  • 推荐插件：Zeroomega-3.4.1.crx

  • 注：Proxy SwitchyOmega 已不被新版谷歌支持

2. 配置代理设置 ​

浏览器代理配置

安装 HTTPS 证书 ​

步骤 ​

  1. 访问 http://127.0.0.1:8899/
  2. 选择 HTTPS → 勾选 "Capture TUNNEL CONNECTs" → 点击 "download"

下载HTTPS证书

Windows 系统 ​

受信任的根证书

  • 安装证书时需手动选择"受信任的根证书"目录

Mac 系统 ​

mac1mac2

  • 双击下载的 rootCA.crt
  • 在钥匙串访问中，将 whistle 证书设置为"始终信任"

配置 host 代理规则 ​

操作步骤 ​

  1. 访问 http://127.0.0.1:8899/
  2. 选择左侧 "Rules" → 点击顶部 "Create"
  3. 输入规则名称创建代理规则

代理配置

环境配置 ​

本地 whistle 代理通常包含以下环境：

  • local
  • dev
  • ...

可通过双击规则名快速切换环境

手机代理配置 ​

前提条件 ​

  • 手机与电脑需在同一局域网

代理设置 ​

查看 IP 地址 ​

  • 访问 http://127.0.0.1:8899/ 点击右上角 "Online"
  • 或在 CMD 中输入 ipconfig

iOS 系统 ​

ios

  • 点击 WiFi → 配置代理 → 手动 → 输入 IP 和端口

Android 系统 ​

安卓

  • 长按 WiFi → 修改网络 → 显示高级选项 → 配置代理

安装手机证书 ​

下载证书 ​

二维码

  • 扫描二维码下载证书

Android 安装 ​

  • 打开下载的文件 → 输入锁屏密码
  • 证书名称随意，必须勾选"VPN 和应用"

iOS 安装 ​

  1. Safari 访问 rootca.pro 或扫描二维码安装

  2. 设置 → 通用 → 描述文件 → 安装证书

安装证书

  1. 设置 → 通用 → 关于本机 → 证书信任设置 → 信任该证书

信任证书

功能使用 ​

页面重定向 ​

bash
https://www.test1.com/ redirect://https://www.test2.com/
  • 访问www.test1.com 时自动跳转到 www.test2.com

模拟慢速网络及接口错误 ​

模拟接口错误 ​

bash
wq.xx.com/official_account/queryCouponInfo statusCode://500
  • 接口返回 500 状态码

模拟网络延迟 ​

bash
wq.xx.com/official_account/queryCouponInfo resDelay://1000
  • 接口延迟 1 秒响应

Mock 接口数据 ​

bash
https://beta-api.m.xx.com/queryCouponInf resBody://{queryCouponInf.json}

mock

  • 接口返回本地 JSON 文件内容

注入 Eruda 调试工具 ​

配置规则 ​

  • 通过 Ctrl+单击模拟数据名称（html_test）跳转到 values 界面，写 js 代码
bash
https://m.xx.com/ htmlAppend://{html_test}

注入1

编写注入代码 ​

注入2

html
<script src="https://cdn.bootcss.com/eruda/1.5.4/eruda.min.js"></script>
<script>
  eruda.init();
  window.GLOBAL_SQ_HEADER = true;
</script>

注意：域名需精确匹配，避免影响其他接口

配置 Weinre 远程调试 ​

配置规则 ​

bash
https://m.xx.com/ weinre://test1

使用步骤 ​

  1. 保存规则后，鼠标悬停 weinre 展开菜单
  2. 点击新建的 test1 css

调试界面 ​

weinre界面