【一小时学会Charles抓包详细教程】Charles工作区详细介绍与常规设置 (4)

原创于 2024-05-30 14:02:03 发布 · 1.2k 阅读

34 ·

CC 4.0 BY-SA版权

文章标签：

#Charles #抓包工具 #HTTP #免费教程 #开发测试 #请求与响应 #技术分享

HTTP抓包技术专栏收录该内容

13 篇文章

订阅专栏

🚀 个人主页 极客小俊
✍🏻 作者简介：程序猿、设计师、技术分享
🐋 希望大家多多支持, 我们一起学习和进步！
🏅 欢迎评论 ❤️点赞💬评论 📂收藏 📂加关注

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`完整响应报文的形式展示响应内容