简洁而强大的抓包工具 Whistle - 不容错过

晓得迷路了
4,991 阅读9分钟

之前个人常用的抓包工具是 Fiddler，Fiddler 版本中 Fiddler Classic 是免费的，但是不再更新维护了，官方推出了 Fiddler Everything，但是需要付费使用。

公司为了避免版权问题，不让在办公电脑上使用 Fiddler，并建议使用 LightProxy 代替。LightProxy 是阿里推出的抓包工具，基于 Electron 和 whistle 实现，但是在 github 上 LightProxy 已经不维护了，最近一次发布版本是在 3 年前，所以想再找找有没有其他开源抓包工具。

随后去看了看 whistle 现状，惊喜地发现 whistle 还在更新维护，github star 有 14.2k。whistle 其实很早之前就有了，不过那时还只有命令行方式启动相关功能，现在 whistle 也提供了 Mac 和 Windows 版本的客户端，使用上更加方便了，所以果断放弃 LightProxy，直接使用 whistle。

安装 whistle

whistle 的安装分为客户端安装和命令行安装，推荐使用客户端安装。

界面介绍

整体界面如下：

image-20240828203634360

根据左侧边栏分为四个模块：网络(Network)、规则(Rules)、数据(Values)、插件(Plugins)。

网络(Network)

网络界面和其他抓包工具大同小异，用来查看请求响应的详细信息及请求列表的 Timeline。

whistle-network

网络界面有几个值得注意的功能：

  1. Componser

Componser 功能可以用来构造请求和重发请求，支持自定义请求的 url、请求方法、请求头、请求内容。

image-20240828210227310
  1. Log

主要用于调试远程页面特别是移动端页面，通过此功能可以把远程页面 console 打印的信息展示出来。

首先在规则模块配置一个特殊映射，然后就可以在网络界面中 Tools - Console 中看到页面输出的 log。

image-20240829071303898
  1. Weinre

集成 weinre 的功能，用户只需通过简单配置(pattern weinre://id)即可使用，用于调试远程页面特别是移动端的网页。

image-20240829071800488

配置好后就可以打开 weinre 模块，开始调试对应的页面。

whistle-weinre
  1. https 安装根证书

如果你想要抓 https 的包，就需要在设备上线安装一个根证书。

image-20240830071242963

规则(Rules)

whistle 的匹配顺序是从左到右，这与传统 hosts 从右到左的配置方式不同，但是 whistle 也兼容传统 hosts 配置方式，除了 pattern 和 operatorURI 都为请求 url 外(这种情况 whistle 无法自动区分 pattern 和 operatorURI，只能按约定的顺序匹配)，其它情况 whistle 都支持配置两边的位置对调，即：pattern operatorURI 和 operatorURI pattern 等价。

# 默认方式：pattern operatorURI，匹配 baidu.com 替换为 127.0.0.1
baidu.com 127.0.0.1

# 传统 hosts 配置方式：operatorURI pattern，匹配 baidu.com 替换为 127.0.0.1
127.0.0.1 baidu.com

# 两边都是域名，只支持默认方式，匹配 test.com，映射为 example.com/index.html
www.test.com www.example.com/index.html

  1. 普通的 Hosts 配置：

     test1.wproxy.org 127.0.0.1
 test2.wproxy.org 127.0.0.1

 # 或按 hosts 方式配置 operatorURI pattern
 127.0.0.1 test1.wproxy.org test2.wproxy.org

  2. 支持带端口，也可以设置路径、协议、正则、通配符等：

     # 路径和端口
 test1.wproxy.org/path/to 127.0.0.1:6001
 https://test2.wproxy.org/path1/to1 127.0.0.1:6001
 
 # 匹配正则设置 host
 /google/ 127.0.0.1:6001

# 或按 hosts 方式配置
 127.0.0.1:6001 test1.wproxy.org/path/to https://test2.wproxy.org/path1/to1 /google/

  3. 支持 cname：

     # 只支持默认方式，匹配 test1.wproxy.org/path/to，映射为 host://www.qq.com:8080
 test1.wproxy.org/path/to host://www.qq.com:8080

  4. 支持通过请求参数设置 Hosts：

     # 读取 url 上 host 参数，再替换到 $1 的位置
 /host=([\w.:-]+)/ host://$1

  1. 修改请求 Cookie
# 访问 www.qq.com 时，请求头 cookie 会带上 custom_key1=123&custom_key2=789
www.qq.com reqCookies://custom_key1=123&custom_key2=789
  1. 修改响应状态码
# 模拟响应 500（请求不会到后台服务）
test3.wproxy.org/path/to statusCode://500

# 修改响应状态码（请求会到后台服务）
test4.wproxy.org/path/to replaceStatus://400

# 302 重定向
test5.wproxy.org/path redirect://https://ke.qq.com/

# 301 重定向
test6.wproxy.org/path redirect://https://ke.qq.com/ replaceStatus://301
  1. 查看 JS 报错及页面 console.log
# 在上面网络界面介绍中展示过其功能
ke.qq.com log://
  1. 替换本地文件
 test.wproxy.org/test file:///Users/xx/statics

数据(Values)

配置 key-value 的数据，在 Rules 里面配置可以通过 {key} 获取，如：www.ifeng.com file://{key}。

首先在 Values 新建一个 index.html，随后在 Rules 就可以使用。

image-20240829201649166 image-20240829201621388

配置完成后，访问 baidu.com 就会显示你在 Values 中新建的 index.html。

插件(Plugins)

显示所有已安装的插件列表，开启关闭插件功能等。比如你可以安装 whistle.inspect 插件，这个插件能轻松让你在页面中加入 Vconsole 或者 Erude 调试工具。

image-20240831164217575

这边安装时指定了淘宝源，安装完成后可以在插件列表看到这个插件，同时你也可以查看它的规则。

image-20240831164401944 image-20240831164426155

可以看到这个插件主要用到了 jsPrepend 在 html 中引入调试工具。whistle.inspect 插件安装完成后，就可以在 Rules 中配置规则。

# 插入 Vconsole
juejin.cn/ whistle.inspect://vConsole
# 插入 Erude
juejin.cn/ whistle.inspect://eruda
image-20240831164804436

有兴趣的同学还可以去搜索一些其他插件使用。

常用功能

前端开发中，目前调试工具主要是 Chrome DevTools，谷歌调试工具功能强大，基本能满足开发中绝大部分需求。PC 端的调试直接使用 Chrome DevTools 即可，移动端调试可以使用 chrome://inspect，只要把手机连到电脑上就行（USB 连接或者 abd 命令行连接，手机设置要开启 USB 调试），或者可以使用像 VConsole 一样的工具，不过调试能力就会少一些。

所以我发现自己使用抓包工具的场景并不是很多，主要有以下几个场景：

  • 中间页快速跳转的情况下，抓包查看请求，比如跳转到一个中间页做登录，登录完后 302 到主页。
  • 移动端真机 Weinre 调试（chrome://inspect 是第一选择）。
  • 请求内容替换，替换静态文件或接口响应满足调试需求。

抓包快速跳转页面的请求

业务开发中，有时会有中间页的场景，中间页调用接口处理完逻辑后就会跳转到其他页面。Chrome Devtools 中要看之前页面的请求，就必须开启保留日志功能，但是开启后也只能看到有这条请求记录，无法看到具体的响应内容。比如下面这个例子，请求完接口后就跳转到百度页面。

<!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>
  <script>
    // 请求后接口后跳转其他页面
    fetch('https://api.oioweb.cn/api/common/OneDayEnglish')
      .then(res => res.json())
      .then((res => {
        console.log(res)
        location.href = "https://baidu.com"
      }))
  </script>
</body>
</html>

在浏览器中打开页面后，可以看到有这条请求记录，但是看不到响应内容。

image-20240830075330335

这时就要使用 Whistle 来看请求响应了。

image-20240831073444563

上图可以看到 Whistle 可以正确抓包并看到响应内容。

移动端调试

除了插件章节介绍的引入 VConsole 之类的工具，还可以使用 Weinre 来调试移动端，前提是保证运行 Whistle 的 PC 端和要调试的真机在同一网络环境。

  1. 首先先查看 PC 的 ip，可以通过 ipconfig 命令，或者 whistle 右上角的 online 按钮查看，在 online 界面查看 IPv4 的配置，这边有多个，选择和手机网络同一网段的 ip 即可。
image-20240831155504148
  1. 配置代理，选择你当前的 WLAN，设置手动代理，填入同一网段的 PC 端的 IP 和 端口。
image-20240831074607398

  1. 点击 Whistle 菜单栏的 HTTPS，安装证书以便抓取 HTTPS 包，如果你无需抓取 HTTPS 包，可不用安装，证书的地址在上文网络界面介绍中已说明。

    不过 APP 抓包方面有各种限制，如 APP 不会使用系统代理、APP 只信任系统根证书，而抓包安装的通常在用户证书下、APP 安全机制等，所以如果不能抓到 APP 包，需要采取其他更复杂方式进行，不在本文范围内讨论。

  2. 配置 Weinre 规则 192.168.3.7:8080 wenire://test，在 Whistle 菜单栏点击 Wenire，选择对应配置的名称 test， 即可打开 Wenire 界面，手机访问对应 web 界面，即可在 PC 端开始调试。

image-20240831091622864

要注意的是 Weinre github 项目 2018 已归档，功能不再更新，像 fetch 请求就抓取不到，调试还是尽可能使用 chrome://inspect。

请求内容替换

内容替换可以像界面介绍-数据章节中一样，在数据(Values)界面配置数据源，然后在 Rules 界面配置映射规则。当然还有更简单的方法，首先点击某个请求，查看右侧 inspectors，再点击 Response 的 Preview 菜单，使用右上角的 Mock 功能。

image-20240831154858577

点击 Mock 后，就可以在弹窗中配置对应规则和返回内容，最后点保存即可，Rules 界面就会自动写入对应映射规则。

image-20240831155124040 image-20240831155223349

案例中替换的是掘金的搜索提示，完成上面配置后，可以看到你修改后的响应。

image-20240831155435206

用这个方法你也可以替换 html、js、css 等静态资源。

拓展

Chrome Devtools 替换内容

其实 chrome devtools 也早已支持了替换内容功能，支持在本地替换响应内容或者响应头。使用方法如下：

  1. 打开开发者工具，前往网络面板，右键点击要替换的请求，然后从下拉菜单中选择替换标头或替换内容。
choosing-override-content-4044ba6cb6b2d_960

  1. 如果你还未设置过本地替换，则开发者工具会在顶部的操作栏中提示你执行以下操作：

    a. 选择一个文件夹以存储替换文件。

    devtools-prompts-to-sele-32ccd7905701f_960

    b. 点击允许以授予开发者工具访问权限。

    devtools-requests-access-cde58bce33675_960

  2. 如果你设置过本地替换项但停用了，则开发者工具会自动启用它们。

  3. 最后你可以在来源面板编辑替换内容，同时对于替换的文件会有一个小标识。

    the-corresponding-icons-n-763a990adb8a_960

具体效果可查看下面演示，修改完内容后使用 Ctrl + S 保存，随后即可看到替换效果：

cd-tihuan2

除了替换响应内容，还可以替换响应头，有兴趣的同学可以自己试一试。

总结

Whistle 的界面很简洁，但是功能是很强大的。不过现代 web 开发的调试工具 Chrome DevTools 功能同样很强大，基本能满足日常开发需求。下面是个人一些使用抓包工具的场景：

  • 抓包快速跳转页面的请求。
  • 移动端生产环境注入 VConsole 等调试工具（测试环境一般都带有 VConsole 等工具）。
  • 移动端请求的静态资源和接口替换（PC 端直接使用 Chrome DevTools 能力）。
  • 移动端真机 Weinre 辅助调试（chrome://inspect 是第一选择，VConsole 引入使用方便，Wenire 在 PC 上，比 Vconsole 查看 DOM 和控制台输入命令等方便些）。

除了上面一些场景，你还会在什么场景下使用抓包工具，欢迎交流。

avatar
文章
阅读
粉丝