前后端开发者必备：如何配置 Charles 抓包工具

抓包是一种基本手段，方便我们进行调试和排查问题。常用的抓包工具有 Fiddler 和 Charles。在这里，主要讲解一下 Charles 的基本用法

废话不多说, 直接进入主题.

1. 下载 Charles

Charles

2. 安装 Charles

下载完成后,傻瓜式点击安装即可.

3. 配置代理

下面通过android和ios为例, 不同手机稍微有些区别. 通用步骤如下:

• 确保电脑和手机连上同一个 wifi
• 设置后,在手机上找到对应 wifi, 配置代理信息
• 输入主机(主机值安装 chrles 的客户端)的 IP 和 端口(默认端口为 8888)
• 关闭认证
• 当配置正确后, 可以看到 chrles 弹窗, 是不是允许手机链接上来(第一次才会).

注意
请记住, 当您停止使用Charles时，请在“设置”中禁用HTTP代理, 否则, 您的应用程序中的网络会出现故障！

先来配置 IOS, 大概步骤如下:

此时应该可以进行正常的抓包操作了, 下面在手机上输入 https://cn.bing.com, Charles 中应该可以看到相应的请求信息, 如下:

出现访问地址说明手机被成功代理了. 细心的您应该能够发现请求列表中http和 https有区别, https 请求前面多了一把灰枷锁 “🔒”.

为什么呈现这样区分 ? 通常灰色表示不可用状态, Charles 默认是没有启用 SSL Proxying 的需要我们自己去配置相应的证书才能正常查阅 https 协议相关的请求.

配置 SSL Proxying 大概步骤如下:

• 进入 Charles -> Proxy -> SSL Proxying Settings
  

• ☑️ Enable SSL Proxying

• Include add Location or Exclude Location
  如果不指定特定的 Location 时, 可以将 Host 和 Port 指定 * 即可.
  

接下来安装相应的证书, 步骤如下:

• 创建证书
• 电脑和手机安装证书

如何创建证书?

Charles 提供便捷的方式. 选择菜单 Help -> SSL Proxying -> Install Charles Root Certificate on a Mobale device or Remote Browser.

点击之后弹出如下提示:

这上面告诉我们两个重要的信息:

• 访问 chls.pro/ssl 地址下载证书并自行安装
• 在 IOS10 及以上的版本需要开启对证书信任, 进入 Settings(设置) > General(通用) > About(关于本机) -> Certificate Trust Settings(证书信任配置)

1. 下载扫码文件
   

2. 下载完成后, 进入 Settings 中, 点击 已下载描述文件 的选项, 可以查看下载证书. 点击安装.
   

3. 安装完成
   

4. 信任证书
   
   
   手机上配置就基本上完成, 接下来继续访问 https://cn.bing.com 在 Charles 看到如下内容:
   

此时 HTTPS 配置已经完成.

接下来我们完成电脑上证书的安装, 大概步骤:

• 访问 chls.pro/ssl 地址下载证书 charles-proxy-ssl-proxying-certificate.pem
• 安装证书
• 信任证书(双击)
  
  

这样电脑端也配置完成, 这样就能愉快端抓包了.

上面是MAC 和 Iphone 上的配置. 在 Andorid 设备大同小异, 可以自行查阅.

如果您有任何疑问，请随时在评论区留言。

4. 参考

• Using Charles from an iPhone
• Charles for iOS
• SSL Proxying