Charles简介

  Charles是一个常用的网络抓包工具,在做测试的时候我们经常需要抓包来分析错误的原因,比如: 判断是前端还是后台bug。

  抓包(packet capture)就是将网络中传输发送与接收的数据包进行截获,通过Charles工具来查看数据包中的内容。

Charles的工作原理

  Charles是将自己设置成网络访问的代理服务器,使得所有的网络访问请求都通过它来完成,从而实现了网络数据包的截取和分析

  Charles工作原理:

    客户端发送一个请求后,请求数据会先经过Charles,然后在由Charles将请求数据发送给服务器

    web服务器收到请求后就对请求进行处理,当处理完毕后,就把响应的数据给Charles,然后在由Charles将响应数据返回给客户端 。

Charles的应用场景

  • 判断前后端的bug
  • 可以使用抓包工具获取接口请求数据和响应数据,辅助测试人员进行测试工作
  • 可以mock造假数据,用于判断前端界面中的某个数据展示是否是根据接口返回的参数进行展示显示。
  • 模拟弱网测试
Charles的使用

Charles抓取web端http的包

操作步骤:

  1、打开charles

  2、点击proxy

  3、勾选 windows/Mac proxy 则表示电脑使用charles作为代理,即可抓取web端http的包

Charles抓取web端https的包

windows平台的步骤:

  1、在help --> ssl proxying --> install charles root certificate

    将根证书存储为受信任的根证书颁发机构,根据提示一路下一步即可

  2、在Proxy --> SSL Proxy Settings

    勾选Enable SSL Proxying,开启SSL 代理

    在这里ip地址和端口号都配置 *, 监听所有请求,这样在pc端就可以抓取https的请求并能解析内容了。

  注意:​​*​​ 代表获取所有的ip与端口号

mac平台的步骤:

  1、在help --> ssl proxying --> 点击 install charles root certificate

  注意:安装此证书后,此证书默认不被信任,需要双击设置成始终信任的。

Charles抓取app端http的包

操作步骤:

  前提:手机和电脑端需要在同一个局域网下

  打开手机设置 --> 进入wifi详情页面

  打开手动代理

  配置ip地址:是用于找到某台电脑的

  配置端口号:用于找某台电脑中的charles 默认端口号为 8888

Charles抓取app端https的包

  • iOS

  前提:手机和电脑要在同一个局域网下

    1、在safari浏览器中输入chls.pro/ssl点击下载证书

    2、回到手机设置中,点击已下载的描述文件,点击安装证书

    3、在苹果手机下还需要信任证书

    4、在关于本机 --> 证书的信任设置 --> 将开关打开即可。

  • Android

  前提:手机和电脑端需要在同一个局域网下

    1、在手机的浏览器中输入:chls.pro/ssl 下载并安装证书

    2、到手机设置里面找到安全与隐私 --> 更多安全设置 --> 从手机存储安装 ---> CA证书 ---> 找到下载的证书,最后点击确认安装成功

    3、在浏览器中重新发起一个https的请求即可

  备注信息:

    删除android手机端根证书 --> 在手机设置中 --> 安全中 --> 清除凭证即可删除

    删除苹果手机端根证书 --> 在手机设置中 --> 通用 --> 描述文件 --> 选择证书 --> 移除描述文件即可

    删除web端的charles根证书:按下 win + R键 输入【certmgr.msc】按下回车,在受信任的根证书文件夹中找到charles proxy证书 将其删除即可

Charles mock造假数据

  1、break point 断点

  2、rewrite重写

  3、map local

break point 断点

操作步骤:

  1、proxy --> break point settings --> enable break point

  2、在下面点击 ADD添加,然后将url进行复制,复制到host输入框中,然后鼠标点击其它输入框会自动补全

  3、确定之后,重新发起请求

rewrite重写

操作步骤:

  1、tools --> rewrite settings --> 开启重写功能 --> 点击ADD进行添加 --> 在右侧最上放填写重写名称

  2、在第一个框(Location)填写需要重写的接口,点击Add进行添加

  3、在第二个框(Type、Action)填写需要重写的数据,点击Add进行添加

map local

操作步骤:

  1、先将需要重写的数据右击选择 save response 保存到本地上,然后打开保存的文件修改需要重写的内容,进行保存

  2、在charles中 --> tools --> map local --> 开启 map local

  3、点击Add进行添加,填写接口,然后选择第一步保存的文件

  4、最后重新发起请求即可