Web 数据抓包调试

作为一名 Web 开发工程师，平时工作当中常常需要对web请求、数据进行调试，是网页端还相对容易，如果是微信小程序、移动App或者桌面应用程序就需要进行抓包分析了，Charles 作为一款网络抓包工具，几乎成了 Web 开发的标配。

1. 下载

Charles Web Debugging Proxy • HTTP Monitor / HTTP Proxy / HTTPS & SSL Proxy / Reverse Proxy

如果是http请求可以看到数据包并直接显示具体详细的内容

但是如果抓到的是https的报文，是没有办法直接显示的

2. 抓取HTTPS

要查看https的报文，具体步骤如下

2.1. 安装证书

如果需要抓取并分析 Https 协议的数据报文，需要先安装 Charles 的 CA 证书。具体步骤如下：

点击 Charles 的顶部菜单，选择 “Help” –> “SSL Proxying” –> “Install Charles Root Certificate”

安装证书选择“本地计算机”，将证书放到“受信任的根证书颁发机构”

2.2. 开启SSL代理

点击【Proxy】—> 【SSL proxying Settings】

勾选“Enable SSL Proxying”，并在Include区域点击“Add”新建地址，在Host和Port区域填上“*”，表示匹配所有，那么就可以抓取所有的https数据报文，也可以填写指定的host地址。

再次请求就可以看到https的报文了

3. 微信小程序

使用微信PC版，登录页点右上角设置网络代理，端口默认是8888，可以在【Proxy】—> 【Proxy Settings】中查看

然后登录微信，打开小程序就可以抓包调试了

4. 移动App

点击 Charles 的顶部菜单，选择 “Help” –> “SSL Proxying” –> “Install Charles Root Certificate on a Mobile Device or Remote Browser”

4.1. 配置网络代理

配置前我们要保证手机和电脑在同一个局域网里（一般手机电脑连同一个 Wi-Fi 就行），进入已连接的 Wi-Fi 的设置页面，选择配置代理

4.2. 安装证书

可能会影响手机正常使用，建议使用模拟器

手机上任意浏览器打开并访问地址： http://charlesproxy.com/getssl（按提示进行下载证书）

此时下载的是个.pem 格式的，需要手动更改为.crt 格式，然后系统设置→加密与凭据→从存储设备安装

 

5. 常见问题

• 大部分问题比如https显示unknown、提示证书不正确：建议检查Charles Root Certificate根证书是否安装
• 无法打开网页、网络连接异常：建议检查 “Proxy” –> "Proxy Settings" 或 “SSL proxying Settings” 中的配置是否正确
• 没有抓取到任何记录：查看是否开启记录“Proxy” –> "Start Recording"，是否开启“Proxy” –> "Windows Proxy“，charles需要代理才能查看http请求