在开发或调试网站接口时,经常会遇到这样的问题:
- 页面加载失败
- 接口返回数据异常
- 请求参数与预期不一致
查看日志无法解释问题,直接查看网络请求更有效。 抓包的目标就是把浏览器与服务器之间的通信记录下来。
下面通过排查,说明网站抓包通常是如何进行的。
一、先用浏览器开发工具查看请求
在大多数情况下,第一步不需要安装任何工具。
打开浏览器开发者工具:
- 在 Chrome 或 Safari 中打开网页
- 按 F12 打开开发者工具
- 切换到 Network 面板
- 刷新页面
页面加载过程中产生的请求会出现在列表中。
可以查看:
- 请求地址
- 请求方法
- 请求参数
- 返回数据
例如在调试登录接口时,可以直接看到 POST 请求发送的 JSON 数据。
二、当浏览器工具不够用时
浏览器开发工具只能看到当前浏览器的请求。
如果需要:
- 修改请求参数
- 重放请求
- 抓取其他应用的请求
就需要使用代理抓包工具。
常见工具包括:
- Charles
- Sniffmaster
- Proxyman
- Fiddler
这些工具的工作方式是,浏览器的请求先发送到代理,再由代理转发到服务器。
因此代理工具可以记录 HTTP 或 HTTPS 请求。
三、在电脑上配置代理抓包
准备一台电脑并启动代理工具,例如 Charles。
操作步骤:
- 启动 Charles
- 查看代理监听端口,例如 8888
- 在浏览器或系统网络设置中配置 HTTP 代理
- 将代理地址设置为 127.0.0.1:8888
保存设置后,浏览器请求会经过代理。
验证抓包是否成功
打开浏览器访问一个网站,例如:
https://example.com
如果 Charles 中出现新的请求记录,说明代理抓包已经成功。
此时可以查看:
- URL
- Header
- Cookie
- Response
四、抓取 HTTPS 网站请求
如果网站使用 HTTPS,还需要安装代理证书。
操作步骤:
- 在浏览器中访问代理工具提供的证书下载地址
- 下载证书
- 安装到系统证书库
- 将证书设置为 信任
完成后,代理工具可以解密 HTTPS 请求。
重新加载网页后,可以看到完整响应内容。
五、修改网站请求参数
在调试接口时,有时需要修改请求参数,例如:
- 修改请求 Header
- 改写 POST 数据
- 重定向 API 地址
在 Charles 或 Proxyman 中,可以使用 Rewrite 或 Breakpoints 功能。 在 Sniffmaster(抓包大师)中也可以使用拦截器功能。 例如:
- 在 Charles 中开启 Breakpoints
- 刷新页面
- 在请求发送前暂停
- 修改参数
- 再发送请求
服务器返回结果后,可以立即看到变化。
六、如果请求来自移动设备
如果网站接口是由手机 App 调用的,可以让手机流量经过电脑代理。
操作步骤:
- 手机与电脑连接同一 Wi-Fi
- 在手机 Wi-Fi 设置中配置 HTTP 代理
- 输入电脑 IP 与代理端口
然后打开手机浏览器访问网站。
代理工具中会出现手机发出的请求。
七、抓取移动设备 HTTPS 请求
如果手机访问的是 HTTPS 网站,还需要安装证书。
操作步骤:
- 在手机浏览器访问Sniffmaster代理工具提供的证书地址
- 下载描述文件
- 安装证书
- 在系统设置中开启证书信任
完成后,代理工具可以解析手机 HTTPS 请求。
八、当代理抓不到请求时
有些 App 或网页请求不会走系统代理。
此时可以使用设备级抓包工具,例如 SniffMaster(抓包大师)。
这种方式不依赖 Wi-Fi 代理,可以直接从设备中直接读取网络数据。
使用 SniffMaster 抓取网络请求
操作步骤:
- 使用 USB 将 iPhone 连接电脑
- 保持设备解锁
- 在手机上点击 信任此电脑
- 启动 SniffMaster
- 在设备列表中选择设备
- 按提示安装描述文件
- 进入 HTTPS 暴力抓包模式
- 点击开始
然后触发手机访问网站。
抓包界面会出现对应的网络请求。
九、分析底层网络问题
如果需要分析更底层的网络行为,例如:
- TCP 连接问题
- 网络延迟
- 数据包重传
可以将Sniffmaster抓到的数据导出到 Wireshark。
在 Wireshark 中可以查看:
- TCP 三次握手
- 数据传输过程
- 连接关闭原因
不同抓包工具的使用场景
不同工具在网络中的使用场景不同:
| 工具 | 抓包方式 | 适用场景 |
|---|---|---|
| 浏览器开发工具 | 浏览器内部 | 页面调试 |
| Charles | 代理抓包 | HTTP / HTTPS |
| Proxyman | 代理抓包 | HTTPS 调试 |
| SniffMaster | 设备本机抓包 | 移动设备网络 |
| Wireshark | 网络层抓包 | TCP / UDP 分析 |