【网络工具】Charles 实战（下）

✍个人博客：Pandaconda-CSDN博客
📣专栏地址：http://t.csdnimg.cn/iAmAo
📚专栏简介：在这个专栏中，我将会整理一些工作或学习中用到的工具介绍给大家~

📘Charles 系列文章：

• 【网络工具】Charles 介绍及环境配置
• 【网络工具】Charles 实战（上）
• 【网络工具】Charles 实战（下）

❤️如果有收获的话，欢迎点赞👍收藏📁，您的支持就是我创作的最大动力💪

5. 弱网测试

5.1 Charles 流量配置

具体步骤：

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

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

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

4. 最后点击 "OK" 按钮。

上图需要注意的参数：

• Bandwidth：带宽

• Reliability：可靠性（默认 100%）

• Stability：稳定性（默认 100%）

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

5.2 弱网测试实例

实例背景：

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

具体操作：

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

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

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

结果分析：

1. 从时间分析，抓包发现响应变慢。

2. 从页面展示状态分析，可以明显的感觉到打开页面速度变慢。

6. 修改请求和响应

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

• Map 功能适合长期地将某一些请求重定向到另一个网络地址或本地文件

• Rewrite 功能适合对网络请求进行一些正则替换

• Breakpoints 功能适合做一些临时性的修改

6.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” 即可进入到相应功能的设置页面。

Map Local

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

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

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

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

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

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

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

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

Map Remote

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

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

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

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

6.2 Rewrite

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

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

6.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. 查看页面返回结果。

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

场景二：

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

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

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

4. 查看页面返回结果。

• 结果：显示操作失败提示。

7. 反向代理

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