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的基本原理和操作方式你学会了么

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,189评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,577评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,857评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,703评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,705评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,620评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,995评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,656评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,898评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,639评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,720评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,395评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,982评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,953评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,195评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,907评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,472评论 2 342

推荐阅读更多精彩内容