前言

对于移动开发者和app测试来说,抓包工具对于工作都是非常有帮助的,而Charles就是一款非常优秀的抓包工具。

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

Charles不仅可以帮助我们抓取服务器返回的数据,还可以修改请求参数,修改响应体
基本上HTTP能修改的东西,Charles都能帮我们修改。
当我们接口在Mock阶段时我们可以通过Charles设置我们本地的JSON数据,加速我们的开发。
而且还能模拟弱网环境,帮助我们调试网络极端情况的用户体验,下面我们就一起来体验下Charles的功能吧
本机安装的 Charles 版本是 Windows 平台下的 Charles 4.6.2

一. 下载安装

1. 官网下载

https://www.charlesproxy.com/latest-release/download.do
下载charles.png

2. 在线破解

https://www.zzzmode.com/mytools/charles/
RegisterName任意随便起个注册的名字,例如 jinghang
生成License Key:ff1b3f88fdf1bd994d
在charles软件的Help-Register Charles中输入RegisterName和License Key后,重启软件即可

二. Charles抓包HTTP

1. 初始设置

开启 start recording 按钮,如下图所示:
开启抓包.png

2. 查看设置Charles代理监听的端口号

Proxy -> Proxy Settings , 我机器上的是8888端口, 如下图所示:
Proxy Settings.png

3. 手机设置

以Android手机为例,进入我们已经连接的WIFI,设置该WIFI:
手机设置.png

设置好之后,Charles 会弹出一个框,提示是否允许手机进行连接,接受即可,如下图所示:
提示是否允许手机进行连接.png

如果你不小心点击了 拒绝(Deny),也可以在这里: Proxy -> Access Control Settings 进行添加你的手机IP
添加你的手机IP.png

Access Control Settings 顾名思义—-访问控制设置。这里配置charles要访问的域名范围,如果写成0.0.0.0/0则Charles将会识别所有IP,这样的话如果电脑本地ip改变也不用再手动配置,可谓是一个一劳永逸的方法。

通过以上的设置,Charles就可以抓HTTP请求了

三. Charles抓包HTTPS

经过上面的设置之后,我们就可以对手机的网络请求进行抓包了,但是如果请求的是 HTTPS,抓到的包无法查看,需要电脑和手机安装证书 (Help -> SSL Proxying)
Charles安装证书.png

电脑上安装证书很简单,直接下一步就可以了,将证书安装在“受信任的根证书颁发机构”中即可。
证书安装.png

如果电脑证书过期了,则可以选择重置证书(Help -> SSL Proxying -> Reset Charles Root Certificate)之后,再重新安装证书即可。

这里讲下手机上安装证书,因为手机上安装证书可能会遇到问题:
点击上图的 Install Charles Root Certificate on a Mobile Device or Remote Browser , 会给我们安装提示:
安装手机证书提示.png

上面的提示框意思是说,在手机设置好代理后,在手机浏览器中访问 chls.pro/ssl 下载证书

这里需要注意的是,有的手机可能会提示:无法安装该证书,因为无法读取证书文件。
解决方法:不要使用系统的浏览器下载,使用第三方浏览器下载 UC 或者 Edge 浏览器
下载完成后,证书文件名可能是:charles-proxy-ssl-proxying-certificate.pem

证书下载完成后,在手机上安装该证书,流程如下(小米手机为例):
打开手机 设置 -> 更多设置 -> 系统安全 -> 从SD卡安装 , 然后输入你自定义的证书名称即可:

苹果手机 设置 -> 通用 -> VPN与设备管理 -> 选择charles安装描述文件;高版本ios还需要 设置 -> 通用 -> 关于本机 -> 证书信任设置 -> 信任charles证书

电脑和手机上证书都安装完毕后,在Charles上开启 SSL Proxy (Proxy -> SSL Proxying Settings )
SSL Proxy.png

四. 使用Charles模拟慢网速

可以在 Proxy -> Throttle Settings 设置网络速度,还可以自定义带宽(Bandwidth):
Throttle Settings.png

也可以点击主导航栏中的“乌龟”图标

五. Breakpoints断点功能

可以使用Charles在某个网络请求的时候进行断点,这样可以精确的定位某个网络请求:
Breakpoints.png
除了上面的手动添加需要断点的URL,如果这个URL已经请求过,可以对该请求单击右键,然后点击 Breakpoints
通过断点功能,可以修改 Request 参数 和 Response 返回值。需要注意的是修改完 Request 参数需要点击 Excute 按钮,请求成功后,才能修改 Response 返回值
Breakpoints示例.png

六. Map映射功能

Map映射包含两种一种是 Map Remote,另一种是 Map Local
设置路径:Tools -> Map Local/Remote或者右击请求url,有Map Local/Remote选项。
Map Remote 顾名思义就是把匹配的请求映射到另一个远程URL:
Map Remote.png

Map Local 是将匹配的请求映射到本地文件:
Map Local.png

七. Repeat重试功能

Repeat功能有两种:一种是简单的重试一次(Repeat);还有一种 Repeat advances 可以设置重试的次数和并发的数量。
设置路径:Tools -> Repeat/Advanced Repeat或者右击请求url,有Repeat/Advanced Repeat选项。

重试一次主要用于是和服务端联调,如果接口有问题,服务端开发人员可能需要在后台代码打断点的方式来排查问题
这个时候,我们不需要在app中重新重复上次的请求(可能需要填写字段比较多或者界面链路比较长),只需要在Charles中对该请求单击右键,然后 Repeat 即可。

Repeat advances 可以来对服务器进行压力测试,或者批量提交写数据等,如:
Advanced Repeat.png

八. Rewrite重写功能

Rewrite重写功能是全局设置的,并不是对某个请求单击右键的方式临时操作下, Rewrite可以:

修改请求头(Add/Modify/Remove Header)
修改Host/Path/URL
修改请求参数(Add/Modify/Remove Query-Parameter)
修改响应状态(Response Status)
修改Body
Rewrite设置路径: Tools -> Rewrite
Rewrite.png

Rewrite重写顾名思义就是替换,所以是基于某个固定的值替换成某个值,添加规则的时候,支持正则表达式:
Rewrite Setting.png

九. Compose功能修改Request

还可以通过 Charles 修改请求的 URL、Method、Header、Parameter等.
修改方式:对请求单击右键,然后点击 compose 按钮。使用方法和Breakpoints较为相似。

Q.E.D.





莫道君行早,更有早行人。