一、简介

1. 什么是 Charles？

Charles 中文名叫青花瓷，它是一款基于 HTTP 协议的代理服务器，通过成为电脑或者浏览器的代理，然后截取请求和请求结果达到分析抓包的目的。

2. 工作原理

Charles 本质为 HTTP/HTTPS 代理，代理转发客户端的 HTTP/HTTPS 请求，拦截服务端响应处理后返回给真实客户端。

前置步骤：

  1. 需要运行 Charles 并配置代理
  2. 在客户端上面需要配置代理

具体实现步骤：

  1. 由客户端发送请求
  2. Charles 接收再发送给服务端
  3. 服务端返回请求结果给 Charles
  4. 由 Charles 转发给客户端

3. 主要功能

  • 支持 HTTP 及 HTTPS 代理
  • 支持流量控制
  • 支持接口并发请求
  • 支持重发网络请求
  • 支持断点调试

4. Charles 的优点

对比 Fiddler 的优点：

  • Charles 能够支持 linux、macOS
  • Charles 支持按域名和按接口查看报文，简洁明了
  • Charles 支持反向代理
  • Charles 网络限速可以选择网络类型
  • Charles 可以解析 AMF 协议

二、下载及安装

1. 下载

下载地址：https://www.charlesproxy.com/download/latest-release/

默认端口：8888

2. 激活

1
2
3
Registered Name ： https://zhile.io

License Key：XXX[48891cf209c6d32bf4]XXX

3. 组件介绍

主页面右侧上方可以看到请求详情，包括 Header，请求参数，Cookies 等信息。右侧下方展示返回结果，如果是 JSON，会自动进行格式化方便查看；如果返回的是图片，还可以显示出图片的预览效果。

主导航栏介绍：

请求栏介绍：

Charles 主要提供两种查看请求的视图，分别名为 “Structure” 和 “Sequence”

  • Structure 视图将网络请求按访问的域名分类（推荐）
  • Sequence 视图将网络请求按访问的时间排序

三、配置方法

1. 前置步骤

前置要求 - 查看主机的 IP 地址：

  • 在 Charles 的页面中点击 “Help” 选项。
  • 点击 “Local IP Address” 选项。

  • 查看主机的 IP 地址。

2. 代理配置

下面默认配置端口为 8888，如果端口冲突，可以改成其它端口。

3. 访问控制

如果不在「IP Range」 客户端 IP 列表里的 IP，则需要根据 “Prompt to allow unauthorized connections” 选项是否勾选，从而判断是否能访问：

  • 如果该选项「勾选」，则不在列表中的 IP 地址想要访问，会询问能否访问。
  • 如果该选项「没有勾选」，则不在列表中的 IP 地址不会访问。

4. 代理设置

4.1 Windows 代理设置

具体步骤：

  1. 在 Chrome 浏览器中输入 Chrome://setting。

  2. 在搜索框中输入 “ 代理 “。

  3. 点击 “ 打开您计算机的代理设置 “。
    默认开启，若未开启请按下图进行设置：

  4. 在手动设置代理中，开启代理。

  5. 在地址输入框中输入 Charles 的 IP 地址以及端口。

  6. 点击 “ 保存 “，关闭页面。

4.2 MacOS 代理设置

具体步骤：

  1. 打开 Charles 页面，点击苹果标志，点击 “ 系统设置 “ 选项。

  2. 点击 “ 网络 “，进入对应网络的 “ 详情信息 “ 页面。

  3. 点击 “ 代理 “ 选项。

  4. 打开 “ 网页代理（HTTP）” 和 “ 安全网页代理（HTTPS）”，然后输入服务器的 IP 地址及端口。

    注意: 这里的服务器信息就是前面在 Charles 上面查看的地址和端口。

  5. 最后点击 “ 好 “ 按钮，保存配置信息。

4.3 MacOS 快捷代理设置

应用场景：

当 MacOS 客户端与运行 Charles 软件工具的电脑是同一台电脑时，可以通过快捷代理设置方式来进行设置。

具体步骤：

打开 Charles 工具后，选择 “Proxy” 菜单中的 “macOS Proxy” 选项。

4.4 IOS 手机代理设置

具体步骤：

  1. 在 IOS 手机中选择 “ 设置 “ - “ 无线局域网 “ 选项。

  2. 点击已连接的无线网络名称。

  3. 在 HTTP 代理的配置代理中选择 “ 手动 “ 选项。

  4. 输入服务器 IP 地址以及端口，点击 “ 存储 “ 按钮。

4.5 Android 手机代理设置

具体步骤：

  1. 在 Android 手机中选择 “ 设置 “ - “WLAN” 选项。

  2. 长按已连接的无线网络名称，点击 “ 修改网络 “。

  3. 勾选 “ 显示高级选项 “。

  4. 在代理选项中选择 “ 手动 “ 选项。

  5. 输入服务器 IP 地址以及端口，点击 “ 存储 “ 按钮。

5. 证书配置

问题背景：

如果不下载证书，直接用 Charles 对 HTTPS 网站进行抓包，则会出现乱码，左侧也可以看到显示的是「unknown」。

解决方法：

需要安装 SSL 证书。

5.1 Windows 证书配置

具体步骤：

  1. 打开 Charles，选择 “Help” -> “SSL Proxying” -> “Install Charles Root Certificate”。

  2. 在打开的证书框中，点击 “ 安装证书 “，选择 “ 本地计算机 “，点击 “ 下一步 “。

  3. 选择 “ 将所有证书都存放在下列存储 “，再点击 “ 预览 “。

  4. 选择 “ 受信任的根证书颁发机构 “，点击 “ 确定 “ -> “ 下一步 “ -> “ 完成 “。

5.2 Charles Https 代理配置

具体步骤：

  1. 在 Charles 窗口中点击菜单 “Proxy” -> “SSL Proxying Setting”。

  2. 在打开的设置窗口中勾选 “Enable SSL Proxying”。

  3. 如果没有下图中 *:443，则点击 “Add” 进行添加。

  4. 最后点击 “OK”。

5.3 MacOS 证书配置

具体步骤：

  1. 打开 Charles，选择 “Help” -> “SSL Proxy” -> “Install Charles Root Certificate”。

  2. 在打开的钥匙串访问页面中的 “ 登录 “ 下，找到 “Chrles Proxy CA” 并双击它（刚下载完时，下图的 CA 证书图像右下角显示的是红叉）。

  3. 点开 “ 信任 “ 选项，将 “ 使用此证书时 “ 右边的选项修改成 “ 始终信任 “。

  4. 输入电脑密码，授权该操作。

5.4 IOS 证书配置

具体步骤：

5.5 Android 证书配置

具体步骤：

  1. 如下图步骤，设置 → WLAN → 进入当前连接的 WIFI 详情页面 → 代理选择手动 → 输入从 charles 获取到的 IP 地址，端口号默认 8888，完成后保存

  2. 如果是首次连接，退出设置后，Charles 会出现请求连接的弹窗，一定要选择【Allow】

  3. 打开 Android 手机自带浏览器，如不能下载证书，可以使用 QQ / 谷歌浏览器，输入：chls.pro/ssl，点击前往，下载证书，下载成功后，Android 较老版本可直接点击安装成功，如无法安装，继续参考下面的步骤。

  4. 在设置中搜索【证书】可快速找到入口，选择从存储设备安装，选择 CA 证书之后，会要求设置锁屏密码，这里要设置一个，请记住你的锁屏密码，之后会进入文件管理页面，如果此时没有找到刚下载的证书文件，可通过搜索证书的后缀 “crt”，找到对应证书进行安装，安装时证书需要给证书命名，无特殊要求。

5.6 其它问题

5.6.1 Unknown 问题

注意：抓取 App，使用此方法后如果还是乱码或 nuknown 问题，则去检查 App 服务器是否校验了客户端。例如抖音系产品具备防抓包能力，因此在抓包之前，需要查看是否有跳过防抓包的方法。

  1. 检查电脑是否安装并信任证书

    注意如果证书已经过期，需要重新安装并信任。

  2. 代理是否设置

    这里主机和端口都设置成 *。

5.6.2 手机连了代理后，一直访问不了浏览器

查看一下防火墙是否关闭了。

五、Charles 实战

1. 抓包问题分析

问题背景：

在一个平台页面上，输入过长信息会报错，同时报错信息也弹出了多次，因此需要分析这两个问题的源头：

  1. 输入过长信息报错

  2. 报错信息弹出多次

具体步骤：

  1. 配置本地「Charles」代理。

  2. 配置「客户端」代理。

  3. 当 Charles 在运行时，复现上述问题场景。

  4. 在 Charles 上查看抓包信息。

分析结果：

  • 查看响应报文，可知该接口功能是正常运行，而返回的 message 显示系统繁忙，因此可以判断是「后台」返回的错误信息。
  • 响应报文只显示了一条错误，而前端页面显示了多条，因此可以判断是「前端」的错误。

2. 过滤与屏蔽功能

2.1 过滤

方法一：

在主界面底部的 Filter 栏中填入需要过滤出来的关键字。

方法二：

点击菜单中 “Proxy” -> “Recording Setting”，然后填充协议、主机地址、端口号、路径等信息。再次请求时会只抓/不抓设置俄请求。

方法三：

右键点击想过滤的网络请求，然后点击 “Focus”，选中的请求展现在最上面，其余的请求合并在下面的文件里。

2.2 屏蔽

方法一：白名单

  1. 选中请求 -> 右键 -> 选中 Allow List。

  2. Tools -> Allow List -> 勾选 Enable Allow List -> 点击 add 打开设置框，具体设置如下：需填协议、主机地址、端口号、路径等。

方法二：黑名单

  1. 选中请求 -> 右键 -> 选中 Block List。

  2. Tools -> 选择 Block List -> 勾选 Enable Block List -> 点击 add 打开设框，具体设置如下：需填协议 (不选代表 HTTP 和 HTTPS 均可)、主机地址、端口号、路径等。还可以设置 block 表现，是 drop 还是 403。

3. 重复请求

在测试过程中，有时候需要对服务器重复相同发送请求，用于定位服务器问题或者压力测试，在请求上双击右键菜单，点击 Repeat 按钮就可以重复发送请求。

点击 Repeat Advanced… ，还可以设置重复发送的次数，是否多线程发送，以及每次发送的时间间隔。

4. 弱网测试

4.1 Charles 流量配置

具体步骤：

  1. 在 Charles 窗口中点击菜单 “Proxy” -> “Throttle Setting”。

  2. 在打开的设置窗口中勾选 “Enable Throttling” 选项。

  3. 在 “Throttle preset” 下拉框中选择对应的网络类型。

  4. 最后点击 “OK” 按钮。

上图需要注意的参数：

  • Bandwidth：带宽
  • Reliability：可靠性（默认 100%）
  • Stability：稳定性（默认 100%）

可以通过设置上述参数来模拟一些丢包或弱网的环境，从而可以测试系统的稳定性。

4.2 弱网测试实例

实例背景：

将 Charles 的网络流量配置成 56K modem 的网络，查看人力资源网站的员工菜单打开情况。

具体操作：

  1. 先打开页面，并在 Charles 进行抓包，查看响应时间。

  2. 在 “Proxy” -> “Throttle Setting” 中调低可靠性和稳定性参数。

  3. 再次打开平台页面，用 Charles 进行抓包，查看响应时间并且感受页面的响应速度。

结果分析：

  • 从时间分析，抓包发现响应变慢。
  • 从页面展示状态分析，可以明显的感觉到打开页面速度变慢。

5. 修改请求和响应

在测试时，我们时常会重定向请求的地址，以及修改请求或者响应的内容。Charles 提供了 MAP、Rewrite、Breakpoints 三大功能来实现

  • Map 功能适合长期地将某一些请求重定向到另一个网络地址或本地文件
  • Rewrite 功能适合对网络请求进行一些正则替换
  • Breakpoints 功能适合做一些临时性的修改

5.1 Map - Mock 功能

Map 功能分为 Map Remote 和 Map Local。

  • Map Local 是将响应的内容重定向到本地文件
    • 比如我们需要测试 APP 端页面分页等效果是否展示正常，这时候就可以做一些假的数据文件，然后通过 Map Local 将请求映射到该文件之中，从而可以直观的在 APP 端展现页面是否有问题。
  • Map Remote 是将指定的网络请求重定向到另一个网址请求地址
    • 在测试时，我们通常有线上和线下两套环境，而我们的 APP 直接打开是请求的线上环境，这时候就需要通过 Charles 的 Map Remote 功能，实现重定向请求到线下环境进行测试，这时候也可以使用 Map Local 来修改响应结果。

在 Charles 的菜单中，选择 “Tools”->”Map Remote” 或 “Map Local” 即可进入到相应功能的设置页面。

5.1.1 Map Local

现在假设我也测试这个页面「作者最新文章」这一栏的标题使用我 mock 的数据是否能正常展示。

第一步：我们需要找到需要 mock 的接口，然后在该 url 上点击鼠标右键，选择 “Save Response…”。

然后选择一个地方保存该 json 数据。

第二步：更改前两篇文章的标题。

第三步：在需要 mock 的接口上点击鼠标右键，选择 “Map Local…”。

第四步：选择刚才 mock 好的假数据，然后点击 “OK”。

我们在 “Tool” 下选择 Map Local…” 也能看到我们刚才配置的信息。

第五步：刷新一下刚才的页面，就能看到我们 mock 的假数据了。

5.1.2 Map Remote

我们同样测试百度这个界面，现在我想将 csdn 的页面重定向到 bilibili 的页面。

第一步：找到对应的接口并点击鼠标右键，选择 “Map Remote…”。

第二步：填写要重定向的地址信息，并点击 “OK” 即可。

第三步：刷新 csdn 网址，就可以发现此时已经重定向到 bilibili 的界面了，只不过是获取不到页面图片的。

5.2 Rewrite

修改请求或者返回结果 Body 或者 Header 内容，支持正则表达式。

Rewrite 还可以和 Map Remote 配合使用。即先重定向地址，然后修改请求头或返回结果等，注意如果需要在 Map Remote 勾选 Preserve host in header fields，不然 Rewrite 无法命中.

5.3 Breakpoints

Charles 断点配置

作用： 用来构建异常的测试场景。

具体步骤：

  1. 右击接口链接，选择 “Breakpoints”。

  2. 在浏览器刷新对应接口的页面。

  3. 此时会自动跳转到 Charles 并显示出接口请求信息（此时并不会马上将信息发送给服务器，而是被 Charles 截取下来）。

  4. 点击 “Edit Request”，修改请求的信息，点击 “Execute”。

  5. 点击 “Edit Response”（此时返回的信息也不会直接返回给客户端，而是被 Charles 截取下来）。

  6. 在数据格式栏中选择合适的显示格式，比如 “Json”。

  7. 修改对应的数据，点击 “Execute”。

  8. 回到浏览器查看数据应该为修改之后的 Response 的信息。

重点总结：

通过断点配置，客户端发送的信息会被 Charles 截取下来，不会马上发送给服务端，同时可以在 Charles 上对发送的报文进行修改后再点击发送给服务端。

另外，服务端返回的响应信息也同理，不会直接返回给客户端，而是可以在 Charles 上修改后返回给客户端。

断点调试实例

场景：

  1. 场景一：在人事管理系统中增加角色时，把角色名设置为空，然后请求到服务器。
  2. 场景二：针对查询员工接口请求时，修改返回数据 success=false， code=999， message=操作失败。

具体操作：

场景一：

  1. 对对应接口打断点，然后在页面添加角色。

  2. 删除请求报文中发送的信息，然后点击 “Excute” 进行执行。

  3. 返回信息不做修改，直接点击 “Excute” 进行返回。

  4. 查看页面返回结果。

  5. 结果：增加成功，页面显示为空，说明后台代码存在问题，没有判空逻辑。

场景二：

  1. 对对应接口打断点，然后进行查询操作。

  2. 请求报文不进行修改，直接点击 “Excute” 发送给服务端。

  3. 对返回的响应报文进行修改，将 data 信息全部删除，然后将数据修改成 success=false， code=999， message=操作失败，并点击 “Excute” 返回结果。

  4. 查看页面返回结果。

  5. 结果：显示操作失败提示。

6. 反向代理

Charles 的反向代理功能允许我们将本地的端口映射到远程的另一个端口上。例如，在下图中，我将本机的 56467 端口映射到了远程（www.baidu.com）的 80 端口上了。这样，当我访问本地的 56467 端口时，实际返回的内容会由 www.baidu.com 的 80 端口提供的内容。

参考资料

  1. 【视频】软件测试教程 Charles 抓包工具测试实战
  2. 【视频】Charles 的过滤与屏蔽功能
  3. 【视频】第7集 | Charles高级进阶-Map映射功能