Charles相关
-
Charles主要功能有:
1、截取各种协议的网络包
2、支持修改请求参数
3、支持修改返回结果
4、支持模拟弱网测试
Charles抓包的意义
定位问题,因为可以获取发出去的请求,请求头,请求体,返回的数据,所以可以定位是前端的请求问题,还是后端的返回问题,或者是前端对返回取值的问题。测试同学就可以针对性的提bug,提升效率。除此之外,可以拦截请求,可以修改请求,即可以协助测试同学测试各种异常情况。
Charles在web端的抓包
-
web端抓包无需添加设置,打开Charles软件。
- 此时,在浏览器任意的发起请求,比如访问一个网站,这些请求将被获取。如图,我们可以看到,我们访问的网站的URL,看到status是200(即请求成功)
也可以在request看到请求的具体参数,比如我请求登录的usernam与password
在response中也看的到请求成功的返回,status为0,接口请求成功,并返回了该用户的角色,这样登录成功后前段根据返回参数展示用户可以访问的菜单。
Charles 修改请求与返回操作
在测试过程中,我们往往需要测试异常场景,通过正常的造数据,可能比较麻烦,我们就可以在Charles中对请求设置断点,在发起请求的过程,我们可以修改请求参数去发起请求,在请求成功后,我们可以修改返回的数据。
先发起一次请求,对该请求设置断点,此次设置后,以后每次请求都将被拦截住。选中此次请求的default,右键,然后选择Breakpoint
修改请求: 设置断点后,重新发一次请求,此时,我们可以看到浏览器中一直在转圈,没有响应。这是因为请求被拦截中,并没有发送出去。这时候我们看Charles,我们能看到有一个 Edit Request,里面分别有URL、Header、cookies等等,我们分别进行修改,然后点击右下角的Execute按钮。如果不修改请求的话,直接点击Execute按钮。【点了Execute按钮后,此次请求才发送出去了】
修改返回:我们发起请求后,会收到响应的信息,而响应的信息,也会被Charles拦截住,此时我们能看到一个 Edit response,里面分别有 Header、cookie、txt、html等,我们对应修改后,点击右下角Execute按钮。如果不修改的话,直接点击Execute按钮。【点了Execute按钮后,此次响应才真正的返回给client端,即我们在浏览器中才收到响应】
Charles在APP端的抓包
因为Charles和手机直接没有连接,所以不能直接抓APP的包,所以手机需要设置代理,将有Charles的电脑设置为代理服务器,这样每次手机的包就可以被Charles获取。
确保电脑和手机在同一个局域网,通过命令 ipconfig或者查看电脑连接网络的详细信息,得到电脑的IP,然后在Charles里设置一个端口。如图进入proxy setting弹窗,填写端口(没有被占用的端口都可以),勾选上“Enable transparent HTTP proxying”,这样设置就完了
打开手机,选择和电脑同一个局域网的WiFi,进入代理设置页面(多找一下,手机不一样可能位置不一样),选择手动代理,输入代理服务器主机名与端口,也可以设置不代理的网址,即访问该网址的请求都过滤,不拦截。
设置完成后,在手机上发送的请求,即可被Charles获取,我们就可以分析请求或者返回啦,从而协助我们判断bug的原因了。
Charles的弱网设置
- 我们在测试过程中,需要测试一些网络不好时候的异常场景,我们就可以通过设置Charles,模拟2G、3G的网络情况,设置一些上下行速率,设置一些丢包率。这些设置有行业标准,可以参考行业标准。