Whistle使用心得

# 前端抓包代理工具利器

# 抓包和代理

抓包：包，是指网络数据包，包括客户端发送的请求和服务端返回的数据。PC 端，可以通过 chrome 直观的看到网络状态，但是 App 抓包则需要专门的抓包工具了。

代理：是指一个中间角色，它可以在本地调试时不需要经过鉴权或者其他限制的情况下，直接代理 url 请求，可以代理请求，也可以代理响应。

# whistle 简介

对比成名已久的 fiddler 和 charles，今天介绍的 whistle 作为后起之秀，优势很明显。

	Fiddler	Charles	Whistle
收费	免费	收费	免费
平台支持力度	不支持 mac	支持	支持
上手难度	中等	中等	简单
文档	英文文档	中文文档	中文文档
是否开源	否	否	是
占用内存	非常占用内存	-	占内存很少

whistle 功能非常强大，官方文档十分详细，一切操作都可以通过配置实现，很容易上手。

下面从前端常用的几个功能来进行介绍，更多功能请移步👉whistle 官方文档 (opens new window)。

# 安装启动

步骤如下，(缺一不可)。如果不想手动配置代理，见下文 LightProxy。

# whistle

安装 Node
安装 whistle
```
npm install -g whistle
```
1

启动 whistle

w2 start

日志信息如下

[i] whistle@2.7.20 started
[i] 1. use your device to visit the following URL list, gets the IP of the URL you can
access:
       http://127.0.0.1:8899/
       http://10.11.16.34:8899/
       Note: If all the above URLs are unable to access, check the firewall settings
             For help see https://github.com/avwo/whistle
[i] 2. configure your device to use whistle as its HTTP and HTTPS proxy on IP:8899
[i] 3. use Chrome to visit http://local.whistlejs.com/ to get started

1
2
3
4
5
6
7
8
9

任选一个方式打开界面，但还不能抓包。

配置代理

如果是浏览器抓包，推荐使用谷歌插件SwitchyOmega (opens new window)

配置代理。

推荐使用 chrome 插件Proxy SwitchyOmega (opens new window)，新建一个场景模式，然后配置如下

网址协议代理协议代理服务器代理端口

HTTP 127.0.0.1 8899

选择该模式，即配置了浏览器代理。

注意：如果是其他工具（比如微信开发者工具），则需要另外配置。
安装根证书

通常公司的网站是 https 的，抓 https 包需要安装 https 证书。

在 whistle 界面顶部HTTPS->Download RootCA下载，切记确保证书存储到受信任的根证书颁发机构下。

详细步骤见Https (opens new window)。

网址协议	代理协议	代理服务器	代理端口
	HTTP	127.0.0.1	8899

走完上述流程，已经可以愉快的抓包和代理了。不过本次安利的是 whistle 的衍生版本，LightProxy，它是 whistle 的桌面版，使用更方便。

# LightProxy

直接 github 安装👉lightproxy-github-releases (opens new window)。

打开后右下角默认会开启系统代理，这样就省去了上述第 4 步。我们发现啥也不用配置，就可以直接对 http 请求抓包了。不过为了抓取 https，还是需要安装证书，同第 5 步。

# 代理

# 请求转发

whistle 的 url匹配模式 (opens new window)非常强大，大体分为域名、路径、正则、精确匹配、通配符匹配。

# 匹配模式 如果有多个都符合匹配规则，已第一个为准
pattern ip/domain/filepath

1
2

演示：

场景 1：域名-ip 映射、域名映射

# 场景1：host映射
# 域名-ip+端口
https://www.tencent.com localhost:3000
https://www.baidu.com localhost:8080
# 域名-域名
# https://www.baidu.com/ https://www.tencent.com/

1
2
3
4
5
6

场景 2：本地文件代理，类似于 fiddler 的 willow 插件功能。

# 场景2：本地文件代理 域名-file协议
# 精准匹配
https://www.tencent.com/zh-cn/about.html  file://F:\frost-app\demos\test-html\test1.html
# 通配符匹配
# ^www.tencent.com/*** file://F:\frost-app\demos\test-html\test2.html

1
2
3
4
5

场景 1 在测试环境和线上环境是同一套域名的开发部署模式中使用非常频繁。

另外在微信网页开发中，由于微信 jssdk 只支持用线上域名进行开发，这时候也需要用到 url 转发功能。

# 响应拦截

mock 后端的返回数据，这是非常高频的操作。直接在代码中写 mock 数据会很臃肿且难以维护，接入第三方 mock 平台也有较高的接入成本，而通过代理修改响应数据则更加轻便灵活。

配置方式：

pattern tpl://filepath

filepath 为Values (opens new window)里面的{key}或者本地文件，pattern 参见匹配模式 (opens new window)。

下面演示下完整的捕获一个 http 请求，并进行响应拦截。

在Network面板中选择一个请求，右键->Copy->Full URL。
点击面板右侧，Inspectors->Response->Body->+Value->OK。
发现与Network同级的Values多了一个刚刚新增的响应包，基于此我们可以修改返回数据。
往上点击Rules，Create->输入好听的名字->粘贴第 1 步复制好的 url->输入 tpl 转发到第 3 步的 value，如
```
https://www.tencent.com/user tpl://{user}
```
1

# 抓包

# chrome 抓包

抓包不需要做任何配置，直接在 network 面板查看即可。

# 手机抓包

前提

LightProxy->手机代理->查看 ip 和端口
连接与电脑同一个 WIFI，设置代理，这里包括主机 ip 和端口。端口号默认 12888，这里致敬 fiddler，改为相同的端口 8888，修改路径在 LightProxy->设置->默认端口号。
LightProxy->手机代理->扫码安装证书

iOS

需要手动信任自定义根证书，设置路径：Settings > General > About > Certificate Trust Testings

Android

没有意外的话，已经安装成功了，可以愉快的抓包了。

很遗憾的是，对于微信小程序，安卓 7.0 以上版本无法抓 HTTPS 的包，见安卓抓 HTTPS 包问题 (opens new window)。微信网页和其他浏览器可以正常抓包，iOS 全部可以。

# 微信开发者工具抓包

设置代理即可，操作路径是：设置->代理设置->使用系统代理或者手动设置代理。

# 其他功能

# 模拟网络

# 设置延迟响应的时间(单位：毫秒)
www.tencent.com resDelay://5000

# 设置响应速度(单位：kb/s)
www.tencent.com resSpeed://5
# * resSpeed://50

1
2
3
4
5
6

# 输出日志

# 代理后端接口
https://www.tencent.com ip:3000

# 分别代理pc和手机
https://www.baidu.com ip:8080
https://m.baidu.com ip:8080

# 输出日志
www.baidu.com log://
m.baidu.com log://

1
2
3
4
5
6
7
8
9
10

分别在 pc 打开www.baidu.com，在手机打开m.baidu.com，然后 whistle 面板上看到项目中的日志输出了。这在移动端真机调试中非常便利。

另外，whistle 支持注入 vconsole，可以移步这里 (opens new window)。

# 解决跨域问题

这其实是whistle做了响应拦截的代理，对比下普通本地开发和代理线上开发的区别。

本地web开发：

npm run dev启动项目
打开localhost:8080访问页面
如果后端未做跨域设置，访问后端服务器时，报跨域

通常情况下，后端接口和前端线上页面是部署在同一个服务器下的，如果不是，则后端或者nginx需做跨域处理。

代理线上开发：

npm run dev
在whistle配置代理，如
```
www.baidu.com localhost:8080
```
1
打开线上页面，如www.baidu.com
将后端接口根据路径进行匹配，指向服务器的地址，如
```
www.baidu.com/api 10.1.1.123/api
```
1

可以看出线上开发的优点，在于不需要后端和服务器处理跨域问题，直接使用代理工具解决了。

缺点也有，比如js/css热更新就无法进行了。

# 总结

介绍使用原生 whistle 和 whistle 桌面版 LightProxy 的方法
举例使用 lightproxy 进行常见的前端抓包代理操作，包括不同平台抓包、代理请求与响应和其他可能需要的功能。

whistle 官方文档 (opens new window)

[whistle 工具全程入门](

#调试

上次更新: 2021/11/04, 20:03:22

如何高效管理浏览器书签→