Charles作为一款抓包工具,在web调试,尤其是移动端的调试过程中意义重大。下面对它的使用流程做个记录,方便后续查阅。

一. 在PC(Mac)上抓包

  1. 打开菜单栏,选择“Proxy”,勾选“Starting Recording”和“Mac OS X Proxy”

  1. 打开系统偏好设置-网络-高级-代理;勾选“网络代理(HTTP)”和“安全网络代理(HTTPS)”,并设置网络代理服务器为127.0.0.1:8888(每次开完vpn以后这一项都得重新设置)。这样可以同时抓包http和https的请求。

  2. 抓包成功。

二. 移动端http请求抓包

  1. 在mac端charles内的设置:打开菜单栏,选择“Proxy-Proxy Settings”,设置端口,并勾选“Enable transparent HTTP proxying”

  1. 获取本机IP地址。打开”Help-Local IP Address”,即显示本机IP。

  1. 将手机与电脑连接至同一局域网。

  2. 点开手机当前连接网络的网络设置,修改代理方式为“手动”,并填写第一步设置的端口与第二步获取的IP。

  3. 点击确定,代理成功。

三. 移动端https抓包

上一步完成后,我们会发现抓取的都是http的包,https的请求是抓取不到的。此时需要安装移动端设备安装 Charles 的 CA 证书

以下以小米5为例。

  1. 点击’Help-SSL Proxying-Install Charles Root Certificate on a Mobile Device or Remote Browser’;

  2. 手机完成之前http的操作

  3. PC浏览器打开http://www.charlesproxy.com/getssl/,浏览器自动下载charles-proxy-ssl-proxying-certificate.pem

  4. 传送到手机。设置 > 更多设置(系统和设备) > 系统安全 > 加密与凭据 > 从存储设备安装。安装证书。

  5. 此时可以抓取了。但是默认情况下 Charles 并不做截取,你还需要在要截取的网络请求上右击,选择 SSL proxy 菜单项。