Charles 工具如何做断点测试

雨点打透心脏的1/2处 2023-09-28 09:56 48阅读 0赞

### 什么是断点测试 ###

在测试工作过程中，我们经常会在程序的某一行或者某一环节设置断点，在程序请求的过程中，修改断点处的参数、请求或者响应，借此定位问题，这就是所谓的断点测试。这类断点测试主要用于接口测试。

断点测试可以通过查看接口返回数据可以方便定位是前端还是后端的问题，同时通过更改 request 和 response 数据可以很方便构造测试数据。

简而言之，断点测试可以通过修改接口数据更快的定位问题。这是一种测试常用的方法。

### Charles 工具如实做断点测试 ###

Charles 抓包工具可就可以很方便的实现断点测试。

具体实现的步骤如下：

### 第一步：启动断点。 ###

在工具菜单栏点击这个断点按钮，如下图所示，即可启动断点功能。

![Charles 工具如何做断点测试][Charles]

或者在 proxy – > breakpoint setting --> 启动断点设置：

![Charles 工具如何做断点测试][Charles 1]

### 第二步：将目标接口加入断点配置 ###

1、先启动抓包，捕获到对应的请求；

2、选中请求右键，选择“Breakpoints” ， 即可讲这个接口加入断点的配置里：  
![Charles 工具如何做断点测试][Charles 2]

这样，在 proxy 的断点设置里就会添加这个这个接口的配置；下次如果再访问这个接口，就会触发断点。

![Charles 工具如何做断点测试][Charles 3]

此处注意：每个接口添加断点之后，默认是 requests 消息和 response 消息都会触发这个断点的。

### 第三步：请求断点 ###

浏览器里再次出发这个接口请求，就会触发这个断点，在 Charles 这个工具里跳出一个新的窗口，是打断点的页面，这个是请求消息触发的断点，显示的也是请求消息：

![Charles 工具如何做断点测试][Charles 4]

4.点击 Edit requests，修改请求消息，然后点击“Execute”，执行这个请求，查看页面显示结果：

![Charles 工具如何做断点测试][Charles 5]

编辑完请求消息之后，点击“Execute”之后，就会将编辑修改过的请求消息发送到后端；比如：

讲 page 参数的值修改为“2”，点击执行之后，可以在页面上看到对应的效果，显示为第二页的数据：

![Charles 工具如何做断点测试][Charles 6]

### 第四步：响应断点 ###

如果响应消息也配置在断点设置里，那么响应消息也会触发断点，断点页面会显示响应的信息：

![Charles 工具如何做断点测试][Charles 7]

然后可以在“Edit Response”页面里编辑响应消息，比如把响应消息的内容都删除，然后点击“Execute”：

![Charles 工具如何做断点测试][Charles 8]

在页面上就可以同步看到对应的结果显示，没有数据显示。

最后： 可以在公众号：伤心的辣条 ！ 自行领取一份216页软件测试工程师面试宝典文档资料【免费的】。以及相对应的视频学习教程免费分享！，其中包括了有基础知识、Linux必备、Shell、互联网程序原理、Mysql数据库、抓包工具专题、接口测试工具、测试进阶-Python编程、Web自动化测试、APP自动化测试、接口自动化测试、测试高级持续集成、测试架构开发测试框架、性能测试、安全测试等。

学习不要孤军奋战，最好是能抱团取暖，相互成就一起成长，群众效应的效果是非常强大的，大家一起学习，一起打卡，会更有学习动力，也更能坚持下去。你可以加入我们的测试技术交流扣扣群：**914172719**（里面有各种软件测试资源和技术讨论）

**喜欢软件测试的小伙伴们，如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “点赞” “评论” “收藏” 一键三连哦！**

[Charles]: https://img-blog.csdnimg.cn/62c861d9df9b49cd94bd5c986112e7f9.png
[Charles 1]: https://img-blog.csdnimg.cn/a546dedca909438fb6ad96e474d75393.png
[Charles 2]: https://img-blog.csdnimg.cn/869b1605fb53438eaa37dd3b1534b8e4.png
[Charles 3]: https://img-blog.csdnimg.cn/7ddd9723825f4acfa97d1b321dcc3dfb.png
[Charles 4]: https://img-blog.csdnimg.cn/6167fdf9cf604a09ada8a6f013130929.png
[Charles 5]: https://img-blog.csdnimg.cn/0b0f083d9cda48c9b5dacbc99afa11bf.png
[Charles 6]: https://img-blog.csdnimg.cn/7151a462367b4f69bc9910c7422b2e5f.png
[Charles 7]: https://img-blog.csdnimg.cn/f89d95c245fa487a8bf2c0884ac0b03c.png
[Charles 8]: https://img-blog.csdnimg.cn/3619f60baf354b7b895e2e535ed60d35.png