Charles功能
- 支持SSL代理支持流量控制
- 支持重发网络请求,方便后端调试
- 支持修改网络请求参数
- 支持网络请求的截获并动态修改
- 可以自动将json或xml数据格式化,方便查看
1. Charles安装
- 网址:https://www.charlesproxy.com/download/
image.png
2.抓包原理
image.png3. http抓包
- 确认端口
- 发送http请求
- 查看数据信息
-
设置代理
image.png
- 打开本地代理设置 image.png
模拟http抓包
抓取http请求
本地发起http请求:curl http://rest-assured.io -x 127.0.0.1:8888
,-x使用代理
4. https抓包
-
安装证书
-
PC端证书:mac、windows
-
移动端证书:android,ios
image.png
image.png -
设置ssl
image.png -
具体步骤:
模拟https抓包
- 抓取https请求
本地发起https请求:curl https://www.baidu.com -x 127.0.0.1:8888 -k
,加上-k才能发https的请求 image.png
- 发现抓的包为unknown,此时应安装证书
-
配置证书和ssl后再抓包
image.png
5. 移动端代理配置
-
设备和电脑处于同一wifi
-
网络设置
-服务器ip地址
-端口
image.png
image.png -
安装证书
系统浏览器访问chls.pro/ssl
下载--命名为“cahrles"就行,弹窗点击"allow" -
iOS:描述文件中安装证书
-
iOS:信任证书
6.Charles Mock实战
- Mock:修改数据模拟各种场景
- 限速模拟
-常见网络类型
-模拟带宽
-丢包延迟
-点击小乌龟进行限速模拟 -
设置带宽
image.png
** 断点**
-
编辑请求
编辑请求,Edit Request-> Add-> Execute image.png
右键某个接口选择Breakpoints
当出现目标接口时,就会进行拦截
2.编辑响应
进入proxy-> Breakpoint Settings
双击保存好的断点,只选择Response
点击 Edit Response
image.png
⚠️
image.png
Rewrite进行Mock
-
Rewrite原理
image.png
2.Rewrite实战
修改雪球行情页面的股票名称
修改雪球行情页面的股票价格
修改雪球行情页面的请求头信息
3.进行Rewrite设置
rewrite设置
image.png
刷新页面查看,目标位置修改为自定义字段
- 使用正则表达式修改股票价格,修改时一定要勾选Regex image.png
-
修改请求数据,测试H5S的时候用得多,因为H5跨域(跨域是指,请求的URL中协议、域名或端口任意一个与当前的URL不同,称为跨域)的场景较多
-
将头信息中的User-Agent修改为自定义字段
image.png
rewrite设置
image.png
刷新页面,发现请求头的User-Agent修改为自定义字段
image.png
增加头信息
image.png
增加请求信息
image.png
MapLocal进行Mock,实现复杂的Mock测试
- MapLocal原理
客户端的请求并未发给服务端,而是将本地文件当做Response返回给客户端
image.png
2.MapLocal实战
把百度首页修改为自己写的json文件
1、创建baidu.json文件 image.png
2、对百度的url进行MapLocal
image.png
image.png
3、刷新页面,查看结果
- 实现一个小型的服务器
- 需求:
请求携带正确用户名——返回token
请求携带token——返回登录成功信息 -
实现:
1.创建token.json和login.json
image.png
image.png
2.设置MapLocal
image.png
3.发送请求:
curl https://www.jd.com?get_token=feier -x 127.0.0.1:8888 -k
curl https://www.jd.com?token=123456 -x 127.0.0.1:8888 -k
- 修改雪球行情页面的股票名称
-
修改雪球行情页面的股票价格
1.获取响应数据queto.json文件
image.png
2.修改文件中三处位置
image.png
3.进行MapLocal设置
image.png
4.刷新页面查看
5.直接修改queto.json文件保存后,直接刷新页面便可实现修改,方便进行Mock
MapRemote实现切换测试环境
1.MapRemote原理
2.MapRemote实战
访问百度,转发至京东
1、设置MapRemote
image
2、刷新页面,发现百度首页跳转到京东商品页
- 访问开发环境,转发至测试环境*
前端:[http://stuq.ceshiren.com:8081/#/mapLocal]
开发环境接口:[http://39.102.36.84:8089/report/showMapLocal]
测试环境接口:[http://39.102.36.84:9098/report/showMapLocal]
image.png
image.png
image.png
网友评论