1.简介

上一篇通过宏哥的介绍想必各位小伙伴或者童鞋们对Charles已经有了一个理性地认识，今天宏哥在从Charles的外貌介绍和分享一下，让小伙伴们或者童鞋们再对Charles有一个感性的认识，今天主要是对Charles的界面进行一个详细的介绍。

2.Charles主界面概览

Charles的主界面分为：①主导航栏、②请求视图导航栏【树状视图和列表视图】、③捕获请求列表、④过滤器、⑤请求内容详情、⑥请求内容导航栏、⑦响应内容详情和⑧响应内容导航栏八部分组成，如下图所示：

3.Charles主界面详解

3.1主导航菜单栏

Charles顶部为主导航菜单栏，菜单导航栏下面为工具导航栏。如下图所示：

 

3.1.1菜单栏

Charles 的主菜单包括：File、Edit、View、Proxy、Tools、Window、Help。用的最多的主菜单分别是 Proxy 和 Tools。如下图所示：

3.1.2工具栏

工具导航栏中提供了几种常用工具，如下图所示：

下面从左至右依次介绍：

【扫帚】图形按钮：点击之后可清除抓取到的所有请求
【红点】图形按钮：红点亮时表示正在抓取请求，红点灰色时表示当前不在抓取请求状态。此功能是领抓取的数据显示或者不显示的设置。 这个本人认为是charles工具很方便的一个，一般都使其为不显示抓取状态，只有当自己测试的时候的前后，在令其为抓取并显示状态。这样可以快准狠的获取到相关自己想要的信息，而不必在一堆数据请求中去寻找。
【锁头】图形按钮：上锁表示开启了SSL Proxying，打开锁表示没有开启SSL Proxying
【乌龟】图形按钮：灰色时表示网速设置正常，绿色时表示开启慢速网络。此功能宏哥在Fiddler中也介绍过。测试时，会用到网速模拟，具体的在后面功能部分介绍，此处略.....
【六边形】图形按钮：灰色时表示断点未开启，红色时表示正在使用断点
【笔🖊】图形按钮：编辑修改请求，点击后可以修改请求的内容。编辑修改功能，可以对下图中的请求信息进行修改，修改完毕后点击Execute就可以发送一个修改后的请求数据包。
【刷新】图形按钮：重复发送请求，点击后选中的请求会被再次发送
【对勾】图形按钮：验证选中的请求的响应，校验请求的结果。
【扳手】图形按钮：常用功能，包含了 Tools 菜单中的常用功能
【齿轮】图形按钮：常用设置，包含了 Proxy 菜单中的常用设置

3.2请求视图导航栏

1.Charles 主要提供两种查看封包的视图，分别名为Structure和Sequence。如下图所示：

两者区别：

Structure： 此视图将网络请求按访问的域名分类
Sequence： 此视图将网络请求按访问的时间排序

使用时可以根据具体的需要在这两种视图之前来回切换。

2. 显示模式

Charles有两种显示模式，stucture 和sequence。支持来回切换。

（1） Structure形式如下图 优点：可以很清晰的看到请求的数据结构，而且是以域名划分请求信息的，可以很清晰的去分析和处理数据。如下图所示：

（2）Sequence形式如下图 优点：可以看到全部请求，这里的结果以数据请求的顺序来显示，最新的请求显示在最下面。如下图所示：

综上，两种形式各有千秋，structure 适合对单一系列的访问请求从宏观上进行把握，可以快速定位。sequence 适合精确定位内容，因为每条sequence 都有size，status等属性信息，方便快速定位这条结果的价值.

对于我自己来说，更倾向于Charles的第一种树状视图，比fiddler的列表视图好的地方在于：多次刷新后的请求会被归纳到树里面，更加一目了然，用fiddler的时候，有点强迫症的同学，都要点击clear，有木有…

3.3捕获请求列表

Charles 抓取接口后会展示在视图导航栏下，默认是选择的：Structure 视图，当数据多时可采用过滤器过滤。如下图所示：

捕获请求列表展示的是我们抓取的所有的请求，点击【+】后便可以展开该host 域名下的所有请求。点击请求后即可在 “请求内容区” 看见该请求所对应的相应内容。

3.4过滤器—Filter

Charles 快捷过滤器，可直接输入想要的数据进行匹配过滤，这里就不做详解，后面详细讲，如下图所示：

3.5请求内容详情

Charles请求详情跟Fiddler相似，但直观不少，从这里就可以看出Charles的强大之处。

Charles 请求内容区展示某一接口请求的请求内容，可以切换导航栏查看请求的各种详细情况，如下图所示：

导航栏介绍：

Overview：展示当前请求的一个大体情况
content：展示当前请求的具体内容和服务器的相应内容
summary：展示当前请求的大体资源分布情况
chart：以表格形式告诉我们接口响应时间的分布情况
notes：笔记，点击后自己可以对当前请求记录一些东西，方便后续查看该接口的用途，可在overview中查看

3.5.1 overview—请求总览

 

（1）URL（统一资源定位符）

https:协议方案名
M.xxx.baidu.com:服务器地址，这里是DNS可解析的名称。同事也可以是ipv4d地址名，还可以是[0:0:0:0:0:0:0:1]这样用方括号括起来的IPV6地址名。
App/getindexPage：带层次的文件路径。指定服务器上的文件路径来定位特指的资源。
URL——请求url的路径、文件和查询字符串
Status——状态是否已完成
Response Code——响应状态码
Protocol——该seesion使用的协议（Http/https/ftp）

TLS

Protocol——该seesion使用的协议（Http/https/ftp）
Session Resumed——该session恢复
Cipher Suit——密码套件
ALPN——应用层协议协商（Application-Layer Protocol Negotiation，简称ALPN）是一个传输层安全协议(TLS) 的扩展, ALPN 使得应用层可以协商在安全连接层之上使用什么协议, 避免了额外的往返通讯, 并且独立于应用层协议。 ALPN 用于 HTTP/2 连接, 和HTTP/1.x 相比, ALPN 的使用增强了网页的压缩率减少了网络延时。 ALPN 和 HTTP/2 协议是伴随着 Google 开发 SPDY 协议出现的。
Client Certificates——客户端证书
Sever Certificates——服务端证书
Method——该seesion使用的方法（get/post/put等）
Kept Alive——keepalive，是在TCP中一个可以检测死连接的机制。
Content-Type——响应的content-type头
Client Address——客户端地址
Remote Address——远程地址
Tags——标签

Connection

Client Connection——客户端连接
Server Connection——服务端连接

WebSocket

Origin——源头地址
Version——版本
Protocol——协议
Extensions——扩展
Messages Sent——消息发送
Messages Received——消息接收
Control Frames Sent——发送的控制帧
Control Frames Received——接收控制帧

Timing ：

Request Start Time——接收到的第一个请求的第一个字节的时间点
Request End Time——发送到客户端的最后一个响应的最后一个字节的时间
Response Start Time——响应开始时间
Response End Time——响应结束时间
Duration——整个请求—响应持续时间
DNS——所有选中的session解析DNS所花费的时间的总和
Connect——所有选中session建立TCP/IP连接所花费的时间总和
TLS Handshake——TLS握手协议
Request——请求耗费时间
Response——响应耗费时间
Latency——延迟
Speed——速度
Request Speed——请求速度
Response Speed——响应速度

Size 

Request——请求大小
Response——响应大小
Total——请求+响应字节大小

3.5.2 request—请求头

名词解释：

（1）Appid : 在COM中，安全控制的最小单位是进程，每个进程都有对应的安全控制策略。进程的安全控制策略保存在注册表中，存储位置为：HKCR\AppID\访问权限、启动权限等安全配置信息。开发COM组件时，可以在COM组件对应的CLSID子键下

新建字符串类型的项，名称：AppID，值：该COM组件所在进程的AppID值。

channel：渠道包来源

Contextuuid:设备唯一标识

3.5.3 response—请求结果

Json格式，具体含义参考接口文档。（其中raw是原始数据包的状态）

3.5.4 summary—请求详情

summary—请求详情，包含加载时间等

3.5.5 时间线图表

3.6请求内容导航栏

Charles 请求内容导航栏是对请求内容进行不同的展示，切换至对应展示对应的形式，如下图所示：

导航栏介绍：

Headers：当前请求的头信息
Text：文本形式展示当前接口请求内容
Hex：十六进制展示，一般不使用
JSON：以json格式展示当前接口请求内容
JSON Text：以json text格式展示当前接口请求内容
Raw：源码展示当前接口请求内容

3.7响应内容详情

Charles 响应内容区展示某一接口请求的响应内容，可以切换导航栏查看响应的各种详细情况，如下图所示：

3.8响应内容导航栏

Charles 响应内容导航栏与 “请求内容导航栏” 内容相似，如下图所示：

导航栏介绍：

Headers：响应的头信息
Text：文本形式展示响应内容
Hex：十六进制展示，一般不使用
JavaScript：以JavaScript格式查看响应内容内容
JSON：以json格式查看响应内容内容
JSON Text：以JSON Text格式查看响应内容内容
Raw：源码形式展示响应内容

敲黑板：请求内容导航栏与响应内容导航栏根据不同的接口情况展示的内容也会不一致，但大体都是这些内容。

3.9charles右键菜单

1.在网址/域名上右键可以获得下面菜单，如下图所示：

区域 1 基本操作 ：基本的URL复制，文件保存，以及选中文件内搜索

区域 2 重写操作 ：重写发送请求(调用接口合适)，或者发到gitlist里区域 3 查看区 ：排序之类的区域 4 设置关注 ：可以设置哪些你关心的或者需要忽略的区域 5 清除区 ：垃圾清理使用区域 6 SSL代理启用 ：选择是否启用SSL代理区域 7 工具区：对应常见工具的入口区域 8 映射区 ：把文件映射到本地或者原创URL

2.在 overview区域 和 contents区域 右键可以获得下面操作的入口，如下图所示：

原理类似上面介绍的，可以对请求和响应的查看格式进行设置；

4.小结

 好了，到此宏哥就将Charles工具常用的基本上全都讲解和分享完了，今天时间也不早了，就到这里！感谢您耐心的阅读~~