嘿。大家好,我是4U:

做过 APP 测试的同学都会接触抓包工具,通过抓包工具可以获取到客户端与服务端接口的交互数据,在实际测试APP的过程中,我们往往会发现服务端返回 的参数字段错误、数据统计错误等问题,通过抓包可发现这些问题,对开发修复 BUG 提供有效的帮助。

那么今天给大家继续介绍一下抓包工具 Charles工具。


软件测试 | 手把手教你如何使用 Charles 抓包工具(电脑+手机端)_软件测试

一、Charles简介

Charles是一个HTTP代理服务器,HTTP监视器,反转代理服务器,当浏览器连接Charles的代理访问互联网时,Charles可以监控浏览器发送和接收的所有数据。它允许一个开发者查看所有连接互联网的HTTP通信,这些包括request,response和HTTPheaders(包含cookies与caching信息)。


主要功能如下:

  • 支持SSL代理。可以截取分析SSL的请求。
  • 支持流量控制。可以模拟慢速网络以及等待时间(latency)较长的请求。
  • 支持AJAX调试。可以自动将json或xml数据格式化,方便查看。
  • 支持AMF调试。可以将FlashRemoting或FlexRemoting信息格式化,方便查看。
  • 支持重发网络请求,方便后端调试。
  • 支持修改网络请求参数。
  • 支持网络请求的截获并动态修改。
  • 检查HTML,CSS和RSS内容是否符合W3C标准。


Charles是一款很实用,界面很友好(至少跟fiddler比起来),功能强大的抓包神器,因为它是基于java开发的,所以跨平台,Mac、Linux、Windows下都是可以使用的,并且在Android和iOS设备上通用。

它的原理是通过成为电脑或者移动设备的代理截取请求和请求结果达到分析抓包的目的。


二、Charles下载与安装

官网下载地址:​​https://www.charlesproxy.com/​

软件测试 | 手把手教你如何使用 Charles 抓包工具(电脑+手机端)_网络请求_02

软件测试 | 手把手教你如何使用 Charles 抓包工具(电脑+手机端)_端口号_03

下载后,直接点击下一步,就可以安装才能安装成功。安装后打开Charles如下:

软件测试 | 手把手教你如何使用 Charles 抓包工具(电脑+手机端)_网络请求_04


三、Charles配置

(1)Charles-PC端的配置如下:

第一步:设置端口号Proxy--ProxySettings默认端口号是8888。

软件测试 | 手把手教你如何使用 Charles 抓包工具(电脑+手机端)_软件测试_05

第二步:查看电脑IP,Help--LocalIPAddresses。

软件测试 | 手把手教你如何使用 Charles 抓包工具(电脑+手机端)_抓包_06


第三步:手机设置代理后(步骤参考上一节的手机端配置),设置代理服务器和端口号。

软件测试 | 手把手教你如何使用 Charles 抓包工具(电脑+手机端)_软件测试_07


第四步:打开APP,发送请求,Charles弹出是否允许该手机访问,点击Allow。

软件测试 | 手把手教你如何使用 Charles 抓包工具(电脑+手机端)_软件测试_08


第五步:点击允许后,可以在Proxy--AccessControlSettings里看到允许访问此代理服务器列表。

软件测试 | 手把手教你如何使用 Charles 抓包工具(电脑+手机端)_抓包_09


注意:如果点击了拒绝,可以手动添加手机IP/Mac地址到允许访问列表,后者重启Charles,手机再次访问即可。

设置完成后,即可抓包。

软件测试 | 手把手教你如何使用 Charles 抓包工具(电脑+手机端)_软件测试_10


(2)过滤网络请求:

从上图中,可以看出网络请求很多,我们能否过滤出我们指定的URL地址呢?有以下两种方法:

方法一:在Sequence界面的中部的Filter栏中填入需要过滤出来的关键字,例如我们的服务器地址时:*.xxxx.wsmall.com,那么只需要在Filter栏中填入wsmall即可。

软件测试 | 手把手教你如何使用 Charles 抓包工具(电脑+手机端)_软件测试_11


方法二:在Charles的菜单栏选择Proxy--RecordingSettings,选择Include,输入需要监控的协议,主机地址,端口号,这样就可以只截取目标网站的封包了。

软件测试 | 手把手教你如何使用 Charles 抓包工具(电脑+手机端)_网络请求_12

软件测试 | 手把手教你如何使用 Charles 抓包工具(电脑+手机端)_上传_13


(3)Charles抓取HTTPS请求包前置条件:

手机已经设置代理,可抓取到http包,未抓取HTTPS包的情况:

软件测试 | 手把手教你如何使用 Charles 抓包工具(电脑+手机端)_端口号_14


抓取到HTTPS包的情况:

软件测试 | 手把手教你如何使用 Charles 抓包工具(电脑+手机端)_网络请求_15


安装SSL证书到手机设备:点击Help--SSLProxying--InstallCharlesRootCertificateonaMobileDevice。

软件测试 | 手把手教你如何使用 Charles 抓包工具(电脑+手机端)_网络请求_16


在手机浏览器输入地址chls.pro/ssl,出现证书安装页面,点击安装部分手机需要设置手机密Ma才可以安装。

软件测试 | 手把手教你如何使用 Charles 抓包工具(电脑+手机端)_软件测试_17


Charles设置Proxy:Proxy--SSLProxyingSettings。

软件测试 | 手把手教你如何使用 Charles 抓包工具(电脑+手机端)_上传_18


设置需要抓取的域名,端口输入443,设置完后,即可抓取HTTPS包。

软件测试 | 手把手教你如何使用 Charles 抓包工具(电脑+手机端)_端口号_19


(4)Charles抓取HTTPS双向认证包:

双向认证,简单的理解就是服务器端和客户端都有证书,目前有部分APP就采用双向认证,如果我们按照上面的章节操作是抓取不到包的,那么我们怎么处理呢?我们这里比抓取https请求包多了一步上传客户端证书,前置条件是:

  • 可抓取到HTTPS包
  • 客户端证书:xxxt.p12(可以找开发获取)
  • 点击Help--SSLProxying--InstallCharlesRootCertificate,安装证书

软件测试 | 手把手教你如何使用 Charles 抓包工具(电脑+手机端)_软件测试_20

软件测试 | 手把手教你如何使用 Charles 抓包工具(电脑+手机端)_抓包_21


Proxy--SSLProxyingSettings,设置域名和端口号。

软件测试 | 手把手教你如何使用 Charles 抓包工具(电脑+手机端)_端口号_22


设置域名和端口号,上传客户端证书,上传证书时,需要输入证书密Ma。

软件测试 | 手把手教你如何使用 Charles 抓包工具(电脑+手机端)_端口号_23


上传根证书,上传时需要输入证书密Ma。设置完成后,即可抓取APP的请求包。

软件测试 | 手把手教你如何使用 Charles 抓包工具(电脑+手机端)_软件测试_24

————————————————


CONTACT US / 联系我们


VX/官方公众号

乐搏软件测试


BILIBILI/哔哩哔哩

乐搏软件测试


喜马拉雅/官方账号

乐搏软件测试




关注我~免费获取更多测试学习资料教学视频!

点击底部 “ 点赞+评论 ” 把你需要的大声告诉我!