Charles的使用详细介绍

一、Charles简介

1.Charles的功能

Charles 是在 PC 端常用的网络封包截取工具,在做移动开发时,我们为了调试与服务器端的网络通讯协议,常常需要截取网络封包来分析。除了在做移动开发中调试端口外,Charles 也可以用于分析第三方应用的通讯协议。配合 Charles 的 SSL 功能,Charles还可以分析 Https 协议。

Charles 通过将自己设置成系统的网络访问代理服务器,使得所有的网络访问请求都通过它来完成,从而实现了网络封包的截取和分析。

应用场景原理图:

从直接与云端服务器通信,变为先与Charles所在计算机通信,再由计算机将信息发给云端服务器


2.Charles的界面

总览

工具栏

其中的“编辑会话”,即Compose功能

“重发请求”,即Repeat功能


工作区

会话列表

按“结构”排列:

会话列表按照“域名”、“一级路径”、“二级路径”……“N级路径”的方式,分组整理展示


按“顺序”排列:

会话列表按照抓取请求的时间顺序排列,不分组

在Filter中输入匹配文本或正则表达式(在点击右侧Settings按钮打开的“Sequence Settings”对话框开启“Filter uses regex”<使用正则过滤>后),会话列表将仅展示符合匹配规则的会话


会话详情a


总览

a选定请求或请求组概况,如地址、状态、状态码、协议、方法、时间信息、大小信息等属性


内容

请求的Request(请求)、Response(响应)信息查看


Request窗口各个Tab:


Headers:查看Request的所有HeaderQuery String:将Request的所有Param(参数)以表格形式列出Cookies:将Request的所有Cookie以表格形式列出Text:将Request Body(请求体)以纯文本格式展示Hex:将Request Body以16进制码展示Compressed:将Request压缩后的16进制码展示JavaScript:将Request Body以JavaScript语言格式展示Json:将Request Body以Json格式化后整理展示为可交互分组Json Text:将Request Body以Json语言格式展示Raw:将Request以文本格式分行展示

Response窗口各个Tab:

Headers:查看Request的所有Header                                                                                                                                                                                                                               Text:将Response Body(请求体)以纯文本格式展示                                                                                            Hex:将Response Body以16进制码展示                                                                                                      Compressed:将Response压缩后的16进制码展示                                                                                                JavaScript:将Response Body以JavaScript语言格式展示                                                                                       Json:将Response Body以Json格式化后整理展示为可交互分组                                                                               Json Text:将Response Body以Json语言格式展示                                                                                              Raw:将Response以文本格式分行展示

总结

选定请求或请求组的综合信息,如路径、地址、状态等


图表

选定请求或请求组信息的图表展示

可展示维度:

时间线

大小

耗时

Type(类型)

Flow(时间与网络速度的二维坐标图)


笔记

给请求做纯文本笔记

二、下载\安装与环境配置:

1、电脑(Mac做示范):

下载地址:https://www.charlesproxy.com/

下载完成后进行注册(如下图)

Registered Name (账号): https://zhile.io

License Key (密码): 48891cf209c6d32bf4(应该还能使用)

在 Charles 的菜单栏上选择 “Proxy”->”Proxy Settings”,填入代理端口 8888(或者自定义,前提是不能和系统已占用端口冲突),并且勾上 “Enable transparent HTTP proxying”


安装证书:

pc端安装证书

在Mac上配置Charles证书,Charles菜单栏中的Help——SSL Proxying——Install Charles Root Ce rtificate 

如果证书不受信任,请更改为完全信任:

需将证书放在登录下,并且完全信任

pc端端口配置:

在Charles中设置需要抓取的URL地址 (Proxy→SSL Proxying Settings..)

首先在charles的 Proxy选项选择SSL Proxy Settings, 然后在弹出的对话框中点击add,添加需要监视的域名。域名支持 *号通配符,如:抓取所有的https请求,可以填写 *:443。

2.手机(iOS做示范)

连接代理:

手机连接无线网络与电脑一致,确保在同一个网络环境

通过 设置 → 无线局域网 ,查看当前链接的 WIFI 点击最右边的感叹号,进入当前 WIFI 的细节配置页面,在最下面的 HTTP 代理中,选择「手动」,然后填写 Charles 代理机器的 IP(在charles的 "Help"->"Local IP Addresses") 和 端口号,点击保存

其中服务器与端口号可以通过charles查询,如下:

不同品牌、系统的手机,修改wifi代理的方式可能不同,可自行探索

iOS示例

手机端安装证书

使用手机默认浏览器(如safari)(安卓如果不能识别证书格式可以试试chrome)

地址栏访问  chls.pro/ssl        下载证书,安装证书

注⚠️:在你打开浏览器的时候,Charles会出现下面这样一个弹窗,一定要点击Allow,同意建立连接,否则你就无法下载证书

输入地址后:

打开设置:

1、打开文件。 2、点击安装。3、同意安装。4、点击完成。5、进入关于本机。6、滑到最下面,打开证书设置7、找到证书,打开开关

注⚠️:ps:如果是iOS10.3.1之前的系统,上述三步之后便能够使用Charles抓取HTTPS的内容,但是iOS10.3.1的时候!--还需要在iPhone中的Settings--General--About--Certificate Trust Settings中打开一个信任的开关。

补充:ios>10 都有这个坑,请注意!!!

中文系统:设置-通用-关于本机-滑倒最下面-证书信任设置-打开 Charles 开关

至此,Charles的安装基本完成,现在你可以试着去抓一些接口了

三、Charles常用操作

1.Map Remote

远程映射,即:将「符合匹配规则」的请求映射向「一个远程地址」,可修改请求的寻址(url或ip+port)和路径(path),不可更改请求体内容

映射后的响应内容,由该「远程地址」决定

原理示意图:

开启前:通过Charles后,仍然请求向原定地址

开启后:通过Charles后,向新远程地址请求

在开发阶段, 为了方便调试、联调、问题追查, 可以使用代理的方式连接到特定开发机。 可以使用charles提供的map remote的方式。


选中Enable Map Remote→选中需要用到的map remote/点击add创建新的map remote→填写好要map remote的接口、通信协议、开发机的ip和端口号→点击ok

设置好后,相关接口的请求会直接打到开发机。

2.Map Local

将接口的请求重定向到本地文件

此类操作可称为“Mock接口”

本地映射,即:将「符合匹配规则」的请求映射向「一个本地文件」,请求完全在本机处理完成,不修改请求内容,响应为文件内容

原理图:

开启前:通过Charles后,仍然请求向原定地址                 

开启后:通过Charles后,由Charles直接返回文件中的接口响应,不再与服务器通信

选中Enable Map Local→选中需要用到的map local/点击add创建新的map local→填写好要map local的接口、对应的本地文件→点击ok

设置好后,对应接口的请求不会打到服务器,直接返回本地文件中的数据。

3.Rewrite

rewrite功能重写对应的内容,主要可以对某些匹配请求的header、host、url、path、query param、response status、body进行rewrite。

改写,即:将「符合匹配规则」的请求,进行地址、请求参数、请求Header、请求体、响应状态、响应体的增加、修改或删除操作
选中Enable Rewrite→选中需要用到的rewrite/点击add创建新的rewrite→填写好要rewrite的地址接口、需要修改的值和修改后的值→点击

设置好后,发送的请求就是修改后的请求了。

4.Repeat

重复发送请求

是一手动操作,没有匹配规则的限制,可以自定义重复发送请求的并发、间隔等,但不能修改请求内容,即是“原样重发”

不需要客户端即可发送请求

点击自定义重复发送请求

设置好后,Charles会重复发送指定次数的同一请求到服务器

5.Throttle Setting

通过throttle setting可以模拟不同的网络环境

选中Enable Throttling→选择要模拟的网络环境→ok设置好后就可以为连接代理的测试机模拟不同的网络

6.Compose

Compose功能是在原有的请求基础上进行修改。

在进行接口测试时,临时需要修改请求参数、参数值或者Header等等就可以用到Compose功能。

是一手动操作,没有匹配规则的限制,可以自定义编辑请求的地址,路径,参数,内容,header等,可手动点“Excute”按钮执行

和Repeat的功能、场景类似,区别在于,Compose可以编辑请求的内容,Repeat不可以

不需要客户端即可发送请求

选中想要临时修改参数的请求右键Compose→修改参数→Execute发送请求→收到响应

7.Breakpoint

断点,即:将「符合匹配规则」的请求中断,可选择在“请求”阶段或“响应”阶段中断,中断后,请求被暂时拦截到Charles,并展示请求详细界面供编辑、执行或丢弃

breakpoint功能可以截取发送给服务器的请求以及服务器发送回的响应数据,截取成功后可以修改后继续发送。

选中Enable Breakpoints→选中想要断点的请求、响应/点击add新建新的断点→OK设置好后发往设置网址的请求或发回的响应就会被Charles截获,可以进行修改后继续发送。

以上便是抓包代理工具Charles的基本原理和操作方式你学会了么

你可能感兴趣的:(Charles的使用详细介绍)