charles抓包工具粗略使用指南

常用的抓包工具有fiddler,charles,wireshark(当然还有其他的工具)
我三个都用过,不过wireshark太复杂了,不是太懂用,抓到的信息太详细了,反而不是太容易分辨,找出自己想要的内容(其实是因为懒,懒的学,并且对网络知识了解较少,境界不够,境界到了自然会用)
我一般都是开发 APP 的时候,用到抓包工具,开发 web 网页,chrome 自带的 network 就已经很强大,满足需求了.
我用 window 开发时,会用 fiddler,用 mac 时,会用 charles(因为fiddler 没有 mac 版本,恩,有 mac 版本,不过太反人类了,安装麻烦,并且安装了不一定能用,能用体验性也不好,具体可以百度下 fiddler 这个软件).感觉 fiddler 好用,主要是它的输出信息,和 chrome 的 network 输出信息类似,很容易就看懂,并且使用也简单.其实 charles 使用也和 fiddler 差不多,但是以前用的时候,发现 fiddler 有汉化版,就一直用 fiddler 了 : )

我说下我以前用抓包工具的场景.
以前开发微信公众号,领导让我抄别人公众号的页面,一开始pc 版微信浏览器,有个右键另存为的功能,后面微信版本升级,该功能去掉了(没办法愉快的仿站了),然后就想起使用抓包工具,来捕获请求,保存在本地.
开发 APP 时,安卓开发人员与我(后端)产生分歧,说接口调不通,并且是按照文档来请求,传参,返回内容与文档不一致,我和他都检查过代码,确认没问题后,问题依然存在,于是就用抓包工具分析APP 请求,到底是谁的代码有问题.
对其他人的 APP 好奇(抱着科研,学习心态),查看别人 APP 数据,接口地址,传参等,如果有可能,使用爬虫抓取数据(我没有恶意?)
以前开发安卓的同事,问我如何抓包,他想看其他人的 APP 参数是怎样的,学习别人的接口风格(其实和第三个差不多)
现在用 rn 开发 APP,领导说首页加载有点慢(请求数据,加载图片等),让我们优化,我们检查代码,发现代码都是正常,于是抓包,观察每个请求响应时间,请求顺序等,寻找优化方案(比如,请求过多,图片太大,检查是否是网络带宽问题,是否与手机型号,系统有关等)

Charles 使用
第一步.安装charles
第二步.打开 Charles,打开代理选项设置

第三步.配置 http 代理端口,配置 websocks 代理,如果不想捕获 websocks 代理,可以不开启 websocks 代理,然后点击保存

第四步.开启电脑全局代理,如果不开启,那么只有你将指定软件的代理配置为你电脑 ip 加端口才会捕获到流量(端口是在第三步设置的 http proxy port)

第五步.现在就可以开始抓包啦

可以通过开启 proxy—>选项中的start recording 开启捕获流量功能(上图1号箭头所指选项)
可以通过开启 proxy—>start throtting 开启节流选项(上图2号箭头所指选项)
可以通过开启 proxy—>enable Breakpoints 开启断点功能(上图3号箭头所指选项)
注:

单纯点击 start throtting并不会有任何变化,需要先在proxy—> throttle Settings 进行配置,如下图
勾选了 enable throttling ,点击 ok,才会生效.这个一般是用来测试网络对接口的影响.比如,测试 APP 在2G,3G,4G,wifi 下的工作情况
断点功能我并没有用过 : )

击,可以清空请求记录

第七步.开启捕获流量选项后,就可以看到请求记录啦,不过,目前能看到详细内容的是 http 请求,https 并不能看到,需要配置 ssl 证书.

点击,help—> ssl proxying 中的 install Charles root certificale,安装本机证书,点击后,会打开电脑的钥匙串功能(mac 电脑)

将 Charles 的证书设置为始终信任后,捕获https 请求配置并未结束,还需要再配置一个地方.
打开proxy—>ssl proxying settings 选项

![图片上传中...]

这样,就可以捕获 https 请求啦
注:我理解的 Charles 捕获 https 请求是这样工作的,待验证是否正确,因为在本机安装了证书,所以,请求发出后,Charles 拦截,获取到内容,然后将内容用 Charles 自己的证书,发送给服务端,服务端返回给 Charles,Charles 解密后,将内容再返回给实际的接口请求者. 可以这样理解,Charles 相当于快递公司,A需要寄快递给 B,A告诉Charles,charles 先验货,知道了A所寄物品的全部信息,然后打包发货,B收到后,将收到后的评价告诉 Charles(好评或者差评或者意见),然后 Charles 再将 B 所说的内容告诉 A. 我们在本机安装的 Charles 证书,相当于快递公司的营业执照,如果没安装,A 不知道 Charles 是否是一个正规的快递公司,你寄快递肯定不能让来路不明的人帮你寄吧.如果你没寄过快递,或者不了解快递是什么,当我这段话没说.

移动设备抓包
如果需要捕获手机请求,需要先将手机,电脑处于同一个局域网,然后将手机的代理设置为电脑的IP+上面第三步设置的端口号(我上面截图中设置的端口号是8888).
假设我电脑已经和我的安卓手机处于同一局域网了,并且的电脑 IP 为192.168.1.100,我在电脑上的 Charles 设置 http 代理端口为8888, 那么我在手机上设置的代理为http://192.168.1.100:8888.
设置成功后,可以打开192.168.1.100:8888查看是否设置成功,如果可以打开页面,那么就说明,配置正确,可以使用啦.
不过这时候,你用手机请求 http 接口,是正常的,并且可以看到请求内容,但是请求 https 就会无法访问,并且 Charles 只是有你的请求记录,没有请求详情.这时候打开浏览器,访问 https 网站,会提示不安全的网络连接,无法连接到服务器.
这时候就需要在手机上安装证书,才能正常访问 https 接口.
点击 help—>ssl proxying 中的 install charles root certificate on a Mobile device or remote brower

点击后,会弹出提示框

让你设置手机的 http 代理为你电脑的 IP+监听端口,设置完成后用手机浏览器打开 http://chls.pro/ssl, 打开该网址后,会自动下载一个证书,下载完成后安装到手机既可.这样,手机就可以正常访问 https 接口啦,并且电脑的 Charles 中也会记录手机的请求.

Charles 请求记录说明
structure选项是将请求按域名分类排列

1.上面2号区域就是域名分类,点击可以展开
2.上面3号区域是可以切换请求记录的不同显示方式
overview是以统计的形式显示该域名下的请求记录
summary是以摘要的形式显示该域名下的请求记录
chart 是以图表的形式显示该域名下的请求记录
3.上面4号区域是请求统计,比如,请求总数,正在请求中的数量,请求失败的数量,连接数
4.上面5号区域是请求时间记录,该域名下的请求开始时间,结束时间,网络连接速度(kb/s),请求速度(kb/s),返回速度(kb/s)等
5.上面6号区域是请求数据量大小统计

1.上图1号箭头是指请求编号(Charles 自己对请求进行的编号)
2.上图2号箭头是指URL资源名称
3.上图3号箭头是指 URL 地址中的域名
4.上图4号箭头是指http请求状态码
5.上图5号箭头是指请求类型 http请求header 中的 content-type
6.上图6号箭头是指请求 header 的大小
7.上图7号箭头是指请求的 body大小
8.上图8号箭头是指该次请求所花费的时间

所在的列代表编号(Charles 自己对请求进行的编号)

resource所在的列代表资源名称
timeline 代表请求所花费的时间并且用不同颜色标记出连接,请求,响应花费的时间占总请求时间的比例
total duration 是指请求总共花费的时间
sequence选项是将请求按请求时间排序以列表形式显示

1.请求图标,图标可以显示当前请求状态或者类型
请求状态图标

代表请求当前正在上传数据

代表请求当前正在等待返回

代表请求当前正在下载数据

代表请求是转发或者重定向

代表请求失败
请求类型图标

代表请求类型是音乐文件 content-type 是audio/*

代表请求类型是文本 content-type 是text/*

代表请求是流 content-type 是application/*

代表请求是图片,content-type 是 image/*

2.Code 请求状态码
3.Method 请求类型,get,post,put,delete 等
4.Host 主机名称,请求的域名或者 IP
5.Path 请求的路径,如果是 get 请求,参数也会显示在这里面
6.Start 请求开始时间
7.Duration 请求持续时间
即如果请求已经结束,那么该时间就是请求总共花费的时间,如果请求尚未结束,则该时间就是当前已经请求的时间
8.Size 请求数据大小
9.Status 请求状态
connected to remote host 连接远程服务器
sending request body 发送请求数据
waiting for response 等待响应
receiving response body 接收返回数据
complete 请求完成
fail 请求失败
10.info 如果请求类型是图片,该列则显示图片的宽高

过滤器