前端分析工具之 Charles 录制 Android/IOS 手机的 https 应用

一、前言

说起前端分析工具，我翻来翻去。把 Chrome/Safari/Firefox/IE…的性能工具翻了一个遍，真是觉得工具五花八门，但是…

原理没变。

想着也该写个公众号文章了，以让别人知道我在干什么。可是写什么主题呢？

http1.1/2.0 协议下的性能分析？ 看话题就觉得没啥观众。

浏览器不同内核对前端处理的逻辑？会有人问：啥是内核？感觉很受伤。

…

并且从历史上的文章来看，一步步基础操作的文章比较受欢迎。所以有了写这篇文章的想法。

我在整理前端工具的时候，发现 charles 工具还不错，虽说是收费的工具，但是支持的平台挺多。

但是在网上看到挺多文章说 charles 录制 https 的时候，都没有把录制 android/IOS 上的 https 应用写的非常清楚。在这里一步步写出来给大家参考下。

正文从这里开始。

二、环境

• macOS Sierra Version 10.12.6

• Charles 4.2.5

• iphone Version 9.1（不同版本有稍微的区别，只要能找到相应配置即可）

• 华为EMUI Version 5.0.3 / Android Version 7.0

三、代理配置

1. 首先打开Charles，主界面如下。
   

2. 查看下代理配置。点 Proxy Setting…。同时把录制按钮点亮（其实默认就是亮的）

这个端口要记住，默认是 8888。

3. 安装Charles自己的根证书。点击 Help> SSL Proxying > Install Charles Root Certificate
   

4. 查看下 keychain 中的 Charles 证书是否始终信任。

5. 保存Charles的根证书。点击 Help > SSL Proxying > Save Charles Root Certificate。（保存到哪里不用我说了吧？要一定要说的话，那就是随你的便！)

6. 查看下本地 IP。点击 Help > Local IP Address。
   

以上都是电脑上的准备工作，下面开始配置手机。因为 IOS 和 Android 的配置有不同，所以这里，分成两部分写。

四、IOS 配置

1. 点开 wifi 的信息界面，并点击“手动”配置代理服务器。这里的 IP 就是前面看到的 IP，端口是前面配置的端口。
   
2. 在手机上配置了上一步之后，在电脑上会出现如下提示。这肯定是点 Allow 了。

3. 在手机上输入一个https的网址时会出现如下提示。点击信任。 这一步还有另一个方法，就是点击设置->通用->关于本机->证书信任设置-> 找到 charles proxy custom root certificate，然后开启信任。
   

4. 在手机上打开 https 的页面。在电脑上查看录制效果。上边是电脑上 Charles 的录制结果；下边是手机上的打开的页面。
   
   

五、Android 配置

1. 在手机上配置代理。怎么找到如下这个页面的呢？要在 wifi 的连接上按住不动，出现个菜单，然后点击 Modify network，并且在新窗口中点击 Show advanced options。
   

2. 在手机上配置了上一步之后，在电脑上会出现如下提示。这肯定是点 Allow 了。
   

3. 在手机上安装证书。
   3.1. 把保存的根证书文件传到手机上。（我是用微信的文件传输助手传的，你想用什么就随便了，前提是你能找得到文件保存在哪里了。）
   3.2. 点击 Install from SD card，找到证书文件（下面右图最上面的一个文件）。
   

3.3. 输入屏保密码和证书名。我知道这里会有人问，为啥这一步要用拍的图，而不是截的图呢？哈哈。这就是因为呀，手机上不允许在这一步直接用截图功能！

4. 在手机上打开 https 的页面。在电脑上查看录制效果。 上边是电脑上 Charles 的录制结果；下边是手机上的打开的页面。
   
   

正文至此完。

六、小结

在这个没有讲虚幻的原理和逻辑的文章中，一步步的操作是不是让你有很脚踏实地的感觉？
其实我强忍着没有写 charles 的抓包原理和逻辑（其实就一个 proxy，有啥好讲的呢）。

这样的抓包过程，并不是原理有多复杂，而是逻辑有点绕(不是操作上感觉逻辑绕，而是解释逻辑起来有点绕)，点开了也不难懂，就是网络中的数据包是怎么走的。只要明白这一点，管它是什么手机，管他是什么系统在运行类似这样的抓包工具，都是可以配置得出来的。