Charles的常用功能以及Mock数据的应用—实战解析

比眉伴天荒 2023-10-08 20:06 25阅读 0赞

> Charles 是在 PC 端常用的网络封包截取工具，在做移动开发时，我们为了调试与服务器端的网络通讯协议，常常需要截取网络封包来分析。除了在做移动开发中调试端口外，Charles 也可以用于分析第三方应用的通讯协议。配合 Charles 的 SSL 功能，Charles 还可以分析 Https 协议。
> 
> Charles 通过将自己设置成系统的网络访问代理服务器，使得所有的网络访问请求都通过它来完成，从而实现了网络封包的截取和分析。

![2974009e97b44a01805c8938d04c7f8d.png][]

## 目录：导读 ##

一、 常用功能

二、 Mock数据的应用： Breakpoints（断点）

三、 Map Local：将指定的网络请求重定向到本地文件

四、 Map Remote：将指定的网络请求重定向到另一个网址

五、 ip、域名和url的区别

写在最后

--------------------

## 一、 常用功能 ##

1.Filter （筛选）：在Charles左下角的Filter输入框中输入要抓的数据包的Host的全部或部分字符，即可在Structure列表里显示筛选后的Host

![a6669411bb3a41c6947d2c85fd9973e0.png][]

2.Repeat（重发）：选中某url后，点击工具导航栏中快捷键“Repeat selected requests”图标，即可实现接口再次请求

![964d8f3db0f54f9cb6a482272c8a71cd.png][]

3. Throttle Settings（节流设置）：模拟慢速网络

点击Proxy -> 选中Throttle Settings -> 勾选“Enable Throttling” -> 根据需求设置"Throttle preset"为不同的网速

![b25d41cad8444f1da1103cbbcbcde65b.png][]

## 二、 Mock数据的应用： Breakpoints（断点） ##

拦截接口的请求和返回，修改请求和返回的内容

1. 编辑请求（Request）：选中某个想要mock数据的接口，点击右键并选中Breakpoints -> 重新请求接口（刷新页面等操作）后 -> 选中"Edit Request" -> 编辑修改请求的某项内容，比如Form中的参数 -> 点击Execute按钮，即可拦截到修改后的请求对应的响应内容

![446823f4989a41ef87b9fd4645495084.png][]

2. 编辑响应（Response）：点击“Edit Response” -> 修改返回的内容 -> 点击Execute按钮，即可重新发送请求，且响应内容显示为修改后的内容

![e4349eb58f4a43ada1d81fbf4431e72d.png][]

3. 应用场景实例：修改响应数据中的值，测试app端页面显示情况，提高测试效率

1）比如某产品的的初始”近5日年化“的值都一样时，折线图如下图”修改前“所示。那如果想测试一下五天的值不一致的情况，

那么就可以通过抓包、打断点、修改Response里的值，来测试前端页面的显示。如果不知道修改哪些参数，可以请教开发哦~

![f3d2ead9508840debae575aba6a32d3c.png][]

2）再比如想测试app页面中数据过多（或者翻页功能）时的处理方式，则可以通过修改Response里的值，制造更多假数据来测试

![7ef6a90cd8e44b10a009f25dd1e09fa3.png][]

4. 取消断点的两种操作：

1）选中mock数据的接口（此时查看”Breakpoints“处于选中状态），右键后点击”Breakpoints“即可取消断点

2）点击”Tools“图标，再点击”Breakpoints“即可取消断点

## 三、 Map Local：将指定的网络请求重定向到本地文件 ##

即拦截需要mock数据的接口后，将本地的json文件作为response返回

1. 该方式类似于设置断点修改Response的操作，不过它的优势在于：

1）适合修改大量的数据。如果设置断点修改大量数据，可能会导致请求超时。

2）不需要每次拦截接口，手动修改response。因为每次请求接口时，charles不会访问服务器，而是采用本地的响应（json文件）返回给客户端

2. 操作步骤：

1）把接口的response（JSON Text格式）复制出来，保存成一个json类型的文件。推荐使用SubLime Text，文件命名比如：detail.json，保存时选择Json类型（点击右下角”Plain Text->JavaScript->JSON“）

2）修改response，比如修改第三节提到的”近5日年化“中的五个值（修改前的五个值都是0.5588），修改后保存  
![58037adc5e52431394613180ada45019.png][]

3）选择需要mock数据的接口请求，右键选择”Map Local“，然后在”Edit Mapping“窗口中选择json文件，并点击”OK“按钮

![6fcf2672b04d49ab98d24aa202b584be.png][]

4）然后就可以重新请求接口了（刷新页面等操作），请求后查看页面。可以尝试多次请求，会发现返回的数据都是修改后的数据

![27eb51610c0d4ce7a8b159443f18585c.png][]

5）取消Map Local的方式：点击”Tools“图标，再点击”Map Local“即可取消（与取消Breakpoints一样）

![75d0bf91394f4c1b946a449cd566f8cb.png][]

## 四、 Map Remote：将指定的网络请求重定向到另一个网址 ##

1. 应用场景：当前的测试环境A还未提供某接口X，但是另一个环境B存在接口X，那么就可以重定向到环境B的接口。

2. 实例：比如app中某个产品介绍页面，重定向到百度首页，则可以设置如下：其中”Map From“是原本的接口信息，”Map To“是要重定向的接口信息

![40110847a16440c2acc757498eade9bb.png][]

![5ab54b8c7bfa498aaa889c861d801178.png][]

3. 关闭Map Remote的方式:选择菜单栏中的 Tools->Map Remote，然后取消勾选”Enable Map Remote“，然后点击”OK“按钮即可

![46ccf79409414b9496b39d348f5fd535.png][]

## 五、 ip、域名和url的区别 ##

1）ip：每台主机专门的地址，就是ip地址。比如：127.0.0.1（本机地址）

2）域名：用域名来替代不好记忆的ip地址，比如：www.baidu.com

3）url：传输协议+域名+路径，比如：https://www.baidu.com/content-search.xml

**未完待续**。。。。。。。。。。。。。。。

写在最后  
如果你觉得文章还不错，请大家 点赞、分享、留言 下，因为这将是我持续输出更多优质文章的最强动力！

以上是我对测试开发以及工作实践的一些理解，看到这篇文章的人有觉得我的理解有误的地方，也欢迎评论和探讨～

你也可以加入下方的的群聊去和同行大神交流切磋

## 写在最后 ##

> 如果你觉得文章还不错，请大家 点赞、分享、留言 下，因为这将是我持续输出更多优质文章的最强动力！
> 
> 以上是我对Charles的常用功能以及工作实践的一些理解，看到这篇文章的人有觉得我的理解有误的地方，也欢迎评论和探讨～
> 
> 你也可以加入下方的的群聊去和同行大神交流切磋
> 
> ![24849178f18548b8b6f40e669844b4f1.png][]![24849178f18548b8b6f40e669844b4f1.png][]![24849178f18548b8b6f40e669844b4f1.png][]![24849178f18548b8b6f40e669844b4f1.png][]![24849178f18548b8b6f40e669844b4f1.png][]![24849178f18548b8b6f40e669844b4f1.png][]![24849178f18548b8b6f40e669844b4f1.png][]![24849178f18548b8b6f40e669844b4f1.png][]![24849178f18548b8b6f40e669844b4f1.png][]![24849178f18548b8b6f40e669844b4f1.png][]![24849178f18548b8b6f40e669844b4f1.png][]

[2974009e97b44a01805c8938d04c7f8d.png]: https://img-blog.csdnimg.cn/2974009e97b44a01805c8938d04c7f8d.png
[a6669411bb3a41c6947d2c85fd9973e0.png]: https://img-blog.csdnimg.cn/a6669411bb3a41c6947d2c85fd9973e0.png
[964d8f3db0f54f9cb6a482272c8a71cd.png]: https://img-blog.csdnimg.cn/964d8f3db0f54f9cb6a482272c8a71cd.png
[b25d41cad8444f1da1103cbbcbcde65b.png]: https://img-blog.csdnimg.cn/b25d41cad8444f1da1103cbbcbcde65b.png
[446823f4989a41ef87b9fd4645495084.png]: https://img-blog.csdnimg.cn/446823f4989a41ef87b9fd4645495084.png
[e4349eb58f4a43ada1d81fbf4431e72d.png]: https://img-blog.csdnimg.cn/e4349eb58f4a43ada1d81fbf4431e72d.png
[f3d2ead9508840debae575aba6a32d3c.png]: https://img-blog.csdnimg.cn/f3d2ead9508840debae575aba6a32d3c.png
[7ef6a90cd8e44b10a009f25dd1e09fa3.png]: https://img-blog.csdnimg.cn/7ef6a90cd8e44b10a009f25dd1e09fa3.png
[58037adc5e52431394613180ada45019.png]: https://img-blog.csdnimg.cn/58037adc5e52431394613180ada45019.png
[6fcf2672b04d49ab98d24aa202b584be.png]: https://img-blog.csdnimg.cn/6fcf2672b04d49ab98d24aa202b584be.png
[27eb51610c0d4ce7a8b159443f18585c.png]: https://img-blog.csdnimg.cn/27eb51610c0d4ce7a8b159443f18585c.png
[75d0bf91394f4c1b946a449cd566f8cb.png]: https://img-blog.csdnimg.cn/75d0bf91394f4c1b946a449cd566f8cb.png
[40110847a16440c2acc757498eade9bb.png]: https://img-blog.csdnimg.cn/40110847a16440c2acc757498eade9bb.png
[5ab54b8c7bfa498aaa889c861d801178.png]: https://img-blog.csdnimg.cn/5ab54b8c7bfa498aaa889c861d801178.png
[46ccf79409414b9496b39d348f5fd535.png]: https://img-blog.csdnimg.cn/46ccf79409414b9496b39d348f5fd535.png
[24849178f18548b8b6f40e669844b4f1.png]: https://img-blog.csdnimg.cn/24849178f18548b8b6f40e669844b4f1.png