🚀 个人主页 极客小俊
✍🏻 作者简介：程序猿、设计师、技术分享
🐋 希望大家多多支持, 我们一起学习和进步！
🏅 欢迎评论 ❤️点赞💬评论 📂收藏 📂加关注
Charles 工作区
其实作为我们开发人员，在实际开发中有的时候会遇见一些问题需要通过抓包来分析前后端的数据通信问题，以便于我们排查开发中的实际困难,这一点其实就是我们最常见的一种测试手段!
那么Charles就可以来帮助我们完成这个事情,但是首先，我们必须清楚Charles的基本工作环境和界面!
这样有助于我们在开发调试中使用Charles更加得心应手!
Charles的操作界面其实很简单, 首先我们来看看Charles的大体布局结构
主导航栏
这里我们主要介绍一下主导航栏上的工具栏的各种按钮的含义
如图
具体含义如下表:
请求列表导航栏
在Charles中抓包请求与响应主要分为两种显示方式: Structure和Sequence 这两种视图形式!
Structure视图
这种事按照域名列表的形式进行显示请求数据,也就是说此类视图主要是将请求按访问的域名进行分类,并且这种模式下我们可以很清晰的看到请求的资源结构!
如图
同时我们也可以点击+号展开指定域名下的所有请求资源进行查看!
Sequence视图
这里的结果以数据请求的顺序来显示，最新的请求显示在最下面, 并且以详细信息的形式显示请求的数据, 比如size，status等信息,方便我们快速定位精准的数据!
如图
最后
我们在使用的时候，可以按照具体需要再这两种之间来回切换即可!
请求响应数据显示框
在这里我们可以详细的查看到客户端和服务器之间的请求和响应信息
如图
上面属于请求的内容, 下面属于响应的内容
我们在后续可以根据实际的操作结合现实的数据，再来具体的看每一个标签功能到底是什么意思, 便于理解!
同时我们在请求响应显示框还可以切换导航栏选项卡查看请求的各种详细情况!
这里主要分为5个选项卡, 如下表:
| 选项名称 | 描述 |
|---|---|
Overview | 显示当前请求的总体情况和信息 |
content | |
summary | |
chart | |
notes |
Overview选项
对于当前请求的一个大致信息Overview里面都有显示, 并且以name和value键值对的形式给我们列出来!
例如
那么name列表中的含义如下表:
基础部分
| 名称 | 描述 |
|---|---|
URL | 统一资源定位符 |
Status | 状态是否已完成 |
Response Code | 响应的HTTP状态码 |
Protocol | 当前这个请求会话使用的协议 例如: Http/https/ftp… |
host | DNS可解析的名称, 同时也可以是ipv4或者ipv6的地址名 |
Path | 服务器上的文件路径来定位特指的资源! |
TLS安全传输层协议信息
展开TLS我们可以看到以下信息
| 名称 | 描述 |
|---|---|
Protocol | 当前这个请求会话使用的协议 例如: Http/https/ftp… |
Session Resumed | 会话恢复 |
Cipher Suit | 密码套件 |
ALPN | 应用层协议协商, ALPN让应用层可以协商在安全连接层之上使用什么协议 |
Client Certificates | 客户端证书 |
Sever Certificates | 服务端证书 |
Method | 当前会话的请求方法: get/post/put |
Kept Alive | 在TCP中一个可以检测死连接的机制! |
Content-Type | HTTP响应的Content-type头 |
Client Address | 客户端地址 |
Remote Address | 远程地址 |
Tags | 标签 |
Connection连接信息
这里可以显示服务端和客户端的连接句柄资源, 展开可以看到以下信息
| 名称 | 描述 |
|---|---|
Client Connection | 客户端连接 |
Server Connection | 服务端连接 |
WebSocket相关信息
| 名称 | 描述 |
|---|---|
Origin | 源头域名地址 |
Version | 版本 |
Protocol | 协议, 比如: binary, base64, pbbp2 |
Extensions | 扩展, 比如:permessage-deflate; client_max_window_bits |
Messages Sent | 消息发送 |
Messages Received | 消息接收 |
Control Frames Sent | 控制帧发送 |
Control Frames Received | 控制帧接收 |
Timing时间相关信息
| 名称 | 描述 |
|---|---|
Request Start Time | 接收到第一个请求的第一个字节时间点: 格式: xxxx-xx-xx xx:xx:xx |
Request End Time | 发送到客户端最后一个响应的最后一个字节时间 格式: xxxx-xx-xx xx:xx:xx |
Response Start Time | 响应开始时间 |
Response End Time | 响应结束时间 |
Duration | 整个请求 到 响应的持续时间 |
DNS | 选中的会话解析DNS所花费的时间的总和 |
Connect | 选中的会话建立TCP/IP连接所花费的时间总和 |
TLS Handshake | TLS握手协议时长 |
Request | 请求耗费的时间 |
Response | 响应耗费的时间 |
Latency | 延迟时间 |
Speed | 速度 |
Request Speed | 请求速度 |
Response Speed | 响应速度 |
Size请求大小信息
| 名称 | 描述 |
|---|---|
Request | 请求大小 |
Response | 响应大小 |
Total | 请求+响应的字节大小 |
Contents选项
Contents选项卡中，我们可以清晰的看到HTTP的请求与响应信息!
只要你对HTTP了解，这里基本上就能看明白!
例如
在Contents中又主要分为请求内容导航工具栏和响应内容导航工具栏
请求内容导航工具栏
请求内容导航工具栏是对请求内容进行不同形式的展示，我们可以切换至对应展示内容的标签
如图
标签含义如下表:
| 名称 | 描述 |
|---|---|
Headers | 当前请求的头信息 |
Query String | 请求查询参数列表 |
Cookie | 请求所带的Cookie参数` |
Raw | 用HTTP原样展示的形式显示当前请求内容头信息 |
响应内容导航工具栏
响应内容导航工具栏 也是同样的道理, 根据某一接口请求的响应内容，我们也可以切换响应内容导航工具栏来进行查看响应的各种详细情况!
如图
标签含义如下表:
| 名称 | 描述 |
|---|---|
Headers | 响应的头信息 |
Text | 用文本形式显示响应内容 |
Hex | 用十六进制显示响应内容 |
JavaScript | 用JavaScript中的JSON对象格式查看响应内容 |
JSON | 以JSON目录的格式查看响应内容 |
JSON Text | 以JSON文本的格式查看响应内容 这种跟JavaScript感觉差不多 |
Raw | 用HTTP完整响应报文的形式展示响应内容 |
注意:响应内容导航工具栏和请求内容导航工具栏都会根据不同的请求接口而导致展示的内容也会不一致，但是大概都是这些信息!
Summary选项
这里主要是显示请求资源的详情信息，包含加载时间、状态码、域名主机等等!
例如
Chart 选项
以时间进度条图像的形式显示资源请求的时间信息, 比如整个资源请求 到响应的持续时间
例如
更多设置
有些朋友会说请求响应数据选项卡这里显示的东西不一样，可能有些朋友看到的是如下形式的选项卡
如图
而有些朋友看到的则是如下情况:
如图
这个其实就是界面设置的原因, 设置的方法也很简单!
我们可以直接点击Charles中的菜单栏执行: Edit-->Preferences
如图
然后在弹出的界面中，点击viewers选项卡,
并且取消Combine header and body viewers和Combine request and response前面的对钩即可!
如图
这样你就可以看到request和response选项卡了, 个人觉得这样可以更加清晰的查看HTTP请求与响应
Charles调整字体大小
我们可以点击工具栏上的齿轮按钮, 然后选择Preferences(偏好设置)
然后选择User Interface(用户界面)选显卡中的Display font(显示字体)设置就可以了!
如图
效果如下
"👍点赞" "✍️评论" "收藏❤️"
欢迎一起交流学习❤️❤️💛💛💚💚
好玩 好用 好看的干货教程可以
点击下方关注❤️
微信公众号❤️
说不定有意料之外的收获哦..🤗嘿嘿嘿、嘻嘻嘻🤗!
🌽🍓🍎🍍🍉🍇
扫一扫
2902
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
