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 若是请求类型是图片,该列则显示图片的宽高

过滤器

请求记录详细信息
Overview归纳信息

Request 请求信息

Response 返回信息

Summary 概要信息

Chart 图表信息

Notes 笔记
能够在这里对该请求记录内容

我在抓包时,有时候会遇到,status 为 complete,状态码为200,可是倒是请求失败的,失败缘由是Client closed connection before receiving entire response我说的不保证正确 : )