charles教程大全
从接触测试工作以来,第一款正式使用的软件就是charles,当然在他之前也有用过fiddler,postman等,
不过在使用过charles后其他的工具全被我淘汰了,charles我觉得是一款非常好用的抓包软件,页面简洁大方,功能强大实用,兼容性好。
哈~我才不会告诉你我是因为当时用的是mac电脑所以只能用charles了~~嘿嘿
Charles 主要的功能包括下面这些:
截取 Http 和 Https 网络封包。支持重发网络请求,方便后端调试。支持修改网络请求参数。支持网络请求的截获并动态修改。支持模拟慢速网络。
charles相当于一个插在服务器和客户端之间的“过滤器”;
当客户端向服务器发起请求的时候,先到charles进行过滤,然后charles在把最终的数据发送给服务器;
注意:此时charles发给服务器的数据,不一定是客户端请求的数据;charles在接到客户端的请求时可以自由的修改数据,甚至可以直接Block客户端发的请求;
服务器接收请求后的返回数据,也会先到charles,经过charles过滤后再发给客户端;
同理:客户端接收的数据,不一定就是服务器返回的数据,而是charles给的数据;
正因为上面的原理,所以charles能实现的功能,对前端开发者来说非常有吸引力,相当于请求和响应都可控的,而且charles为了控制更加方面,提供很多简洁的操作;
好了,话不多说,进入正题:
受限于我当前实用的是windows系统,暂时先为大家讲解charles-windows版本,后续会更新mac版本
一、charles的下载和安装
要想下载一个工具,怎么办最简单,在开发工具里,最方便的方式就去去它的官网下载,当然前提是在我们的祖国怀抱内~
charles就可以这样下载,首先百度一下咯
或者直接点击下载地址:Download a Free Trial of Charles • Charles Web Debugging Proxy


charles现在出到了4.2.7版本,这个基本上没什么影响,一般只要下载最新的版本就可以啦
记得好像是4.0一下不支持http2.0的抓取,所以这点注意一下就ok啦
下载好后进入安装页面,基本也是一路点下去,记得自己记得安装目录

打开安装目录,双击运行charles.exe


卸载的时候,就更简单了,直接找到控制面板-程序与功能-卸载或更改程序,然后双击卸载就可以了


二、charles的基本介绍
关于charles有很多很强大的功能,这里由于篇幅限制我只做部分功能说明
*charles提供两种不同的视图方式,可自行按需选择查看


*查看默认端口号“Proxy->Proxy Settings”,默认端口号为8888,可自行修改


*过滤请求
当请求杂乱无章时,为了确保我们拿到自己想要的数据,可以使用filer进行过滤关键字



三、charles设置代理,手机进行抓包
这一步的目的是为了移动设备连接到Charles,这样移动设备发起的所有请求才能在Charles中看到
首先确保自己手机的wifi和电脑在同一网络下,千万不要用4G,那么没办法抓包,必须连接wifi
使用Charles工具查看PC本地IP和端口号(端口号默认为8888,也可自行修改),选择“Help->Local IP Address”

不过我更喜欢选择“Help->SSL-Proxying->install charles Root ....Browser”查看,这样子可以一下子把端口号和ip看到


拿出我们需要设置代理的Android手机,找到wifi,长按或者点击查看wifi详情(各类型Android手机方法大同小异,多进行尝试)
然后进入到wifi详情页面

把代理一栏从无改为手动,并在里面输入刚才看到的IP和端口号,例如:192.168.1.x(x为你自己的号码,每个人都不一样)

点击保存或者连接,如果没有则直接返回退出
然后再次进入详情,看看代理一栏是不是已经变成了刚才自己输入的ip和端口号,如果显示则代表代理设置成功。
如果继续显示代理为无,则代表刚才你没有保存,再试一遍
记得如果你不需要用手机设置代理了,把代理记得关掉,不然会影响你浏览某些网页和应用
这时,手机设置好了,打开你需要进行调试的app,你会发现电脑上charles出现一条提示:

第一个箭头标注的是你的手机ip地址。你需要允许该手机的练级,点击“Allow”
这个提示,只会在手机首次链接电脑的时候出现,同意后后面则不会出现。
注意,如果你的手机链接时没有出现该弹窗,去检查自己刚才手机端的代理是否设置错误
如果设置没有问题,可选择“Proxy->Access Control Settings”手动进入Charles的设置选项,添加当前手机的IP

手机IP查看方式:
进入wifi详情

好了,到此为止,你基本已经完成了大半的设置,基本可以正常进行抓包了
但是,部分手机还需要安装下载一个手机证书才能正常使用,安装方法如下:
同样点击Help->SSL-Proxying->install charles Root ....Browser,查看手机证书下载


这一段是告诉你,需要你去浏览器下载一个证书
此时你打开手机默认浏览器,然后在网址栏里输入
chls.pro/ssl
记得,此时你一定要是代理开启状态
你会得到一个文件下载提示,下载后,在浏览器下载内容里找到刚才那个crt文件,打开后进入命名页面
可自定义名称,或者不改。点击保存。部分手机此时会让你输入手机锁屏密码,或者让你设置锁屏,照做就可以了。





出现如下提示代表安装成功。
我演示使用的手机是oppo,部分Android手机证书会存在安装问题,比如小米好像需要手动安装,大家可自行百度证书安装方法,
我后续会进行更新特殊情况的说明
四、查看charles请求
到此,你的设备和Charles就建立了连接,可以尝试在设备上访问一个地址或者app,在Charles左侧视图就能实时看到请求啦~
Charles是通过将自己设置成代理服务器来完成抓包的,勾选系统代理后,本地系统(如果通过浏览器发送请求)发送出去的请求都能被截取下来。因此,如果想只抓取手机APP发送的请求的话,可以不勾选WindowsProxy选项,这样在测试时就不会被本机Http请求所干扰。
也就是,去掉这个勾选的状态

后记:
IOS版本先附录一个别人的教程,后续再更新我自己的
地址:http://blog.devtang.com/2015/11/14/charles-introduction/