我们在进行B/S架构的Web项目开发时,在前端页面与后台交互的调试的时候,通常使用在JSP中加入“debugger;”断点,然后使用浏览器的F12开发者工具来查看可能出错的地方的数据。或者使用HttpWatch来抓包分析。
在开发移动端项目没有网页的情况下,就不能通过这种方式抓取数据进行分析了。这时可以使用Charles满足以上要求。Charles是一款Http代理服务器和Http监视器,当移动端在无线网连接中按要求设置好代理服务器,使所有对网络的请求都经过Charles客户端来转发时,Charles可以监控这个客户端各个程序所有连接互联网的Http通信。
一、安装Charles客户端
打开浏览器访问Charles官网/,下载相应系统的Charles安装包,然后一键安装即可。
Charles提供两种查看封包的页签,一个是Structure,另一个是Sequence,Structure用来将访问请求按访问的域名分类,Sequence用来将请求按访问的时间排序。任何程序都可以在Charles中的Structure窗口中看到访问的域名。
二、Charles常用功能
Charles功能十分强大,这里介绍几个开发中常用的功能。
1、抓取移动设备发送的Http请求
先将移动设备连接到Charles客户端。首先在电脑中输入cmd打开命令行窗口,输入ipconfig查看本机连接无线网络的IP地址,这个地址作为移动设备连接Charles客户端的代理地址,移动设备必须要和计算机在同一网络中才能连接上。打开Charles客户端,点击Proxy->Proxy Settings菜单,可以设置移动设备连接到Charles的端口,这样移动设备代理配置需要的ip地址和端口号都有了。Charles是通过将自己设置成代理服务器来完成抓包的,勾选系统代理后,本地系统(如果通过浏览器发送请求)发送出去的请求都能被截取下来。因此,如果想只抓取手机APP发送的请求的话,可以不勾选WindowsProxy选项,这样在测试时就不会被本机Http请求所干扰。
另外,如果想要抓取浏览器发送的请求包,勾选WindowsProxy选项之后还是抓取失败,可能是浏览器没有设置成使用系统的代理服务器,只要设置成使用系统的代理服务器,或者将浏览器的代理服务器设置成127.0.0.1:8888也可以成功。
移动设备配置之后,第一次通过手机访问手机中的发送请求时,Charles会弹出提示框,提示有设备尝试连接到Charles,是否允许,如果不允许的话,手机发送请求失败,点击Allow允许,这样这个设备的IP地址就会添加到允许列表中,如果错误点击了Deny可以重启Charles会再此提示,或者通过Proxy->Access Control Settings手动添加地址,如果不想每个设备连接Charles都要点击允许的话,可以添加0.0.0.0/0允许所有设备连接到Charles。
2、过滤不必要的网络包
在抓取手机发送的请求时,有许多请求包是对图片等不需要关注的资源的请求,我们只想对指定目录服务器上发送的请求进行抓取,这时候就可以通过过滤网络包的方式实现。有两种实现方式:
1)选择Proxy->Recording Settings菜单,然后在include栏添加需要抓取包的指定服务器请求协议、地址、端口号,也可以在exclude栏添加不抓取包的地址。
2)在Sequence界面的Filter栏中填入需要过滤的关键字。
3、代理转发
我们在进行本地开发功能的测试时,可以将手机请求的地址转发到本机地址的程序进行执行。右键选择Map Remote,配置请求转发的地址。
并选择Tools->Map Remote Settings菜单,勾选配置的转发条目。
也可以右击选择Map Local配置请求映射到本机地址。
4、抓取Https请求
Charles默认情况下是抓取不到Https请求的包的,需要进行配置安装证书。选择Help->SSL Proxying->Install Charles Root Certificate,
点击下一步,
然后继续下一步直到导入成功,
选择Help->SSL Proxying->Install Charles Root Certificate on aMobile Device or Remote Browse菜单,
手机根据提示地址、端口号配置号代理后,浏览器打开http://chls.pro/ssl,
选择允许,
安装证书,然后配置Proxy->SSL Proxying Settings,添加要抓取的Https请求,
如果不使用Charles,想要删除手机里面的证书,可以通过手机中的设置->通用->描述文件与设备管理,删除指定的证书即可。