Charles的使用详细介绍

作者：李二初  原文链接：https://www.jianshu.com/p/dd6a24f0c73d   （仅作备份用）

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

作者：李二初
链接：https://www.jianshu.com/p/dd6a24f0c73d
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。