一、Charles 工作原理

下图是 Charles 官方网站上的一个 Charles 工作原理示意图。

由图可见，任何通过客户端（APP/Web）发送给后端的请求，都将被 Charles 截获并转发给后端。同样，任何的后端返回值，也会经由 Charles 转发给客户端（APP/Web）。

由此可见，Charles 的工作原理类似于中间人代理，即任何客户端和服务端的通信都会经过 Charles，于是 Charles 便可以拦截来自客户端和服务端的任何请求，并进行修改。

二、搭建代理环境

首先去官网下载 Charles 并且安装。

下载地址：https://www.charlesproxy.com

2.1 Web 端

安装好 Charles 后，首先去安装根证书。根证书的位置在 Help–> SSL Proxying –> Install Charles Root Certificate。

证书安装后，点击 Charles 的菜单，选择 Proxy–>macOS Proxy.

此时，在浏览器里访问网页的时候，就可以在 Charles 里看到网络请求了。

当前绝大多数的软件和网页都是 HTTPS 协议了，如果想抓包 HTTPS 的请求，则需要通过 Charles 的菜单 Proxy–>SSL Proxying Settings 来进行设置。

在弹出的对话框中，我们可以进行如下操作：
勾选 Enable SSL Proxying，并点击 Add 按钮，再编辑如下。

Host 填*，Port 填写 443，这样就可以抓取 HTTPS 协议的请求了。

2.2 App 端

手机端使用 Charles 需要多几步配置。

菜单 Proxy–>Proxy Settings
填入代理端口 8888（也可以自定义填其他端口）；
勾上Enable transparent HTTP proxying；
勾选 Support HTTP/2。

确定手机端代理地址。

通过点击 Charles 的菜单help–>SSL Proxying–> Install Charles Root Ceriticate On a Mobile Device or Remote Browser：，然后切换到手机端，根据以下图片进行操作，具体步骤为：

在手机端，通过浏览器访问网页：chls.pro/ssl，并下载安装证书。

设置网络代理的值跟上图中一致。

这样就可以开始抓包了。

注意：有些设备特别是 Android 设备无法直接安装下载的证书，需要进入到设置->安全->凭据存储 ->从存储设备安装证书。

三、接口过滤、拦截和修改

按以上配置好后，我们就可以在 Charles 面板中看到所有的网络请求。

3.1 过滤接口请求

因为所有的网络请求都会被抓取，那么信息太多也会造成干扰，所以可以过滤接口的请求。过滤接口的请求方式有 2 种。

3.1.1 直接过滤

直接过滤很简单，直接在 Charles 的 Filter 这栏中填写你要过滤的关键字即可。

3.1.2 通过菜单 Recording Settings 设置

首先，通过 Charles 菜单选择 Proxy–>Recording Settings。

然后在弹出的对话框中，选择 Include，然后点击 Add 按钮，并按照你的需求设置 Filter。

注意：如果你什么都不填写，就表示全部符合条件。

通过上述设置，只有网站域名为 baidu.com 的数据才会被抓取，我们根据自己需要更改筛选条件即可。

3.2 动态修改请求数据

当想要修改发送给服务端的数据时，最简单的方式就是找到这个请求，然后鼠标右键，并选择 Breakpoints。

当再次请求被触发时，它就会被拦截。

此时，点击 EditRequest，将会看到这个请求的所有参数，同时你可以直接进行更改后点击 Execute 让它执行

点击 Execute 后，请求就会被发送。同时还可以对服务端返回的数据进行修改。

点击 Edit Response，选择 JSON Text 标签，即可对请求的各项返回进行更改。

打断点更改网络请求是 Charles 最常用的一个方法，在实践中，当测试版本升级，模拟接口返回错误时就会用到打断点。

但是如果接口太多，一个个的打断点的话，这样就很浪费时间了。
所以我们可以自定义 BreakPoint Settings。

方法如下：

菜单栏选择 Proxy–>BreakPoint Settings。

然后在 Breaking Setting 中，勾选Enable BreakPoints，然后点击 Add 按钮，添加对某个请求的断点设置如下。

我们可以根据需求，自己定义要抓取的请求地址；并且可以通过勾选 Request、Reponse 的方式来决定是只更改发往服务端的请求数据（勾选 Request 即可）。

四、远程映射

通过 Breakpoint 的方式进行修改请求数据虽然有效，但是修改请求这个操作需要人工干预，需要花费时间。再者，在测试时有可能接口返回，你已经提前知道了，那么就不需要先请求再更改数据，可以准备好返回数据直接进行模拟。

方式为点击 Tools –> Map Local，然后在弹出的对话框中，勾选“Enable Map Local”，接着设置我们要覆盖的请求。

注意：Map From 是我们原始请求。Map To 是你期望的结果，这个结果我们可以放在本地文件中，以 Text 或者 Json 的格式保持都可以。当你使用 Map Local 后，当有目标请求发生时，Charles 直接将你提供的文件内容当做返回值返回。

远程映射常常用于客户端或者服务端，对返回的时间有超时判断，或者需要更改太多服务端返回值时使用。毕竟一个个更改接口返回值需要花费时间，而由于超时时间非常短，等你改完再去执行，接口就直接超时了，这个时候就需要用到远程映射来直接更改。

四、慢网络模拟

测试时模拟各自不同网络速度的情况也比较常见，Charles 可以轻松做到慢网络模拟。

从菜单 Porxy–>Throttle Settings 进入，先通过 Add 添加你要进行网络速度限制的站点，然后勾选Enable Throttling，选择Throttle preset，这个时候会看到不同的网络速度情况，可以根据需要选择，即可完成网络速度限制。

五、微服务分支测试

在采用微服务架构后，我们就需要对不同版本的微服务分支进行测试，那么这就有必要进行分支测试。在当下，分支测试通常都是根据 Header 进行区分。既然如此，我们就可以给指定的请求添加 Header，以 Charles 也可以进行微服务分支测试，方式如下：

菜单 Tools -> Rewrite，然后勾选Enable Rewrite、Debug in Error Log，点击 Add，并在右上的 Location 这个栏目下，点击 Add。

在弹出的对话框中， Host 输入*，点击 OK。

输入* 代表任何地址都将被 Rewrite。

然后继续点击下图中的 Add 按钮。

在下面的图中配置 Rewrite 的规则。

其中，Type 的值是个下拉列表，选择 add Header，where 勾选 Request。

然后在下方 Replace 栏目，输入想增加的 header 的 key 和 value，保存即可。

通过这种方式，可以对微服务的不同分支进行测试。

六、简单接口并发测试

Charles 还可以做接口并发。针对某个接口，假设我们想测试其基本的性能，可以直接选择那个接口，然后右键选择 Repeat Advanced。

此时，会弹出设置的框让我们选择，其中：

Iterations：是并发轮次数，进行多少轮次的测试。
Concurrency：是并发线程数，每轮测试几个请求同时发。
Repeat delay：可设置轮次之间的间隔，以毫秒计算。

点击确定。

我们会看到，所有的请求已经发出来了。通过这种方式，压力就产生了，我们可以观察服务端的响应时间来判断起基本的性能是否达标。

七、Charles 操作常见问题

Q.:在抓https/http2.0协议请求时，Request和Response显示乱码

A:
第一步：点击【工具栏–>Proxy–>SSL Proxying Settings…】

第二步：配置请求的域名和端口号，*表示任意

Q：iOS 上证书安装了，但是无法抓包，为什么？

A：检查

检查是否信任该证书。在手机设置->通用->关于本机->证书信任设置中信任。
通用->描述文件与设备管理，选中安装的配置文件，并验证。