前端抓包工具——Whistle环境快速搭建

whistle介绍#

基于Node实现的web调试代理工具，对前端很友好

安装启动#

如果没有node环境，先安装node

安裝whistle

1
 # 全局安装whistle
2
 npm i -g whistle
3

4
 # 启动 默认端口8899，可以通过-p指定 --init会为计算机安装证书
5
 w2 start -p 8899 --init

启动后，打开浏览器输入http://127.0.0.1:8899/#network访问

浏览器设置代理

google浏览器安装SwitchyOmega插件，安装完成后需要配置proxy，将浏览器代理到8899端口（whistle的端口），如下图

设置好后一定要点击应用选项，否则不会生效
点击whistle插件，选择刚刚设置的proxy

打开http://127.0.0.1:8899/#network，看到以下页面，就说明成功了
开启捕获HTTPS请求，一定得开，不然https请求不会正常被捕获

whistle页面介绍#

由顶部工具栏、左侧菜单栏和中间内容区域组成

Network#

展示抓到的网络请求及详细信息

Rules#

设置代理规则

配置host

类似于修改全局host文件，为某个域名或具体的url指定ip，绕过dns解析过程，让请求直接到达指定的 ip
Terminal window
```
1
# 为github配置域名解析
2
140.82.113.3  github.com
```
本地启动一个vite服务，在rules中创建一个test文件右键 -> create -> test，添加以下规则
Terminal window
```
1
# 将百度代理本地vite项目上
2
127.0.0.1:5173  baidu.com
```
规则反着写也是一样的
Terminal window
```
1
baidu.com  127.0.0.1:5173
```
当访问baidu.com时就会跳到vite项目

可以在Network中查看这条请求的详情

开发中就可以使用这种方式，将测试环境的域名代理到本地的 localhost，这样就能够在本地请求到测试环境的接口，类似于webpack和vite的proxy设置
替换html文件

将上述的test文件改为
Terminal window
```
1
# 将线上环境的网页内容替换为本地
2
https://app-test.quickcep.com file://${projectPath}/index.html
```
此处的projectPath是在http://127.0.0.1:8899/#values中配置的变量，再次打开baidu.com，就会看到变成了本地index.html中的内容了

替换静态资源

1
 # 将百度代理本地vite项目上
2
 127.0.0.1:3000 baidu.com
3

4
 # 将线上环境的网页内容替换为本地
5
 # https://app-test.quickcep.com file://${projectPath}/index.html
6

7
 # 将线上项目的js替换为本地资源进行调试
8
 https://app-test.quickcep.com/config.js file://${projectPath}/config.

如果线上环境遇到bug时，可以将本地的静态资源通过代理取代线上环境的资源进行调试

模拟接口报错

1
# 通过修改statusCode 模拟接口报错
2
https://app-test.quickcep.com/store/user/getUserInfo statusCode://500

模拟接口超时

1
https://app-test.quickcep.com/store/user/getUserInfo reqDelay://5000 enable://abort

修改返回内容

1
# 模拟接口返回
2
https://app-test.quickcep.com/store/user/getUserInfo resBody://{getUserInfo.json}

解决跨域
Terminal window
```
1
www.baidu.com resCors://*
```

插入js代码

1
# 执行js代码  jsPrepend 允许我们对某个页面注入 JS 脚本
2
https://app-test.quickcep.com jsPrepend://{reload.js}

以上的所有代码整理

1
# 将百度代理本地vite项目上
2
127.0.0.1:3000 baidu.com
3
# 将线上环境的网页内容替换为本地
4
# https://app-test.quickcep.com file://${projectPath}/index.html
5
# 将线上项目的js替换为本地资源
6
https://app-test.quickcep.com/config.js file://${projectPath}/config.js
7
# 解决跨域
8
www.baidu.com resCors://*
9
# 模拟接口报错
10
# https://app-test.quickcep.com/store/user/getUserInfo statusCode://500
11
# 模拟接口超时 reqDelay://5000 5s超时时间
12
https://app-test.quickcep.com/store/user/getUserInfo reqDelay://5000 enable://abort
13
# 模拟接口返回
14
https://app-test.quickcep.com/store/user/getUserInfo resBody://{getUserInfo.json}
15
# 执行js代码  jsPrepend 允许我们对某个页面注入 JS 脚本
16
https://app-test.quickcep.com jsPrepend://{reload.js}

移动端调试#

调试移动端的代码，可以查看这篇文章

注入vConsole whistle 可以通过jsPrepend 注入vConsole，下载vConsole.min.js，copy到Values中取名为vConsole.js，并添加实例化vConsole的代码
```
1
// 此处省略vConsole.min.js的代码
2
// VConsole 默认会挂载到 `window.VConsole` 上
3
var vConsole = new window.VConsole();
```
在Rules中添加vConsole分类，并添加以下代码
Terminal window
```
1
# 为baidu添加vConsole
2
https://www.baidu.com/ jsPrepend://{vConsole.js}
```
重新打开百度，可以看到vConsole的标志
inspect插件 whistle提供了更方便的插件:
Terminal window
```
1
npm i -g whistle.inspect
```
安装完成后，需要重启
Terminal window
```
1
w2 restart
```
配置rules
Terminal window
```
1
# 为baidu添加vConsole
2
https://www.baidu.com/ whistle.inspect://
```
使用 log 功能打印日志除了使用vConsole，还可以开启日志打印
Terminal window
```
1
https://www.baidu.com/  log://
```
重新打开百度，在 Network 的 Tools 下面的 Console 选项下面看到控制台打印的所有 log 信息
手机代理原理：
1. 在 PC 启动一个服务，监听一个端口例如8899
2. 手机连接统一局域网，配置网络代理，指向 PC 端的 IP 地址和 8899 端口
3. 此时，手机上所有的网络通信都会被先转发到 PC 端的 8899 端口，就可以对数据包进行分析处理
手机代理到 whistle
- 手机电脑同一个wifi环境
- 点击whistle的online，查看ip地址
- 手机进入wifi设置，代理设为手动，主机名为ip地址，端口填8899，保存（调试完记得改回去，避免手机上网异常）
- 配置rules
  Terminal window
```
1
 # 插件 m.baidu.com/为移动端
2
 https://m.baidu.com/ whistle.inspect://
3
 # 添加log日志
4
 # https://m.baidu.com/  log://
```

以上代码整理

1
# 为baidu添加vConsole
2
# https://www.baidu.com/ jsPrepend://{vConsole.js}
3
# 插件 m.baidu.com/为移动端
4
https://m.baidu.com/ whistle.inspect://
5
# 添加log日志
6
# https://www.baidu.com/  log://

Values#

设置变量，供其他模块使用

Plugins#

https://wproxy.org/whistle/plugins.html

音乐

音乐