Web协议详解与抓包实战：如何用Chrome的Network面板分析HTTP报文

一、Chrome 抓包：Network 面板

1、 Network 面板

• 控制器：控制面板的外观与功能
• 过滤器：过滤请求列表中显示的资源
• 按住 Command （Mac）或 Ctrl （Window / Linux），然后点击过滤器可以同时选择多个过滤器
• 概览：显示 HTTP 请求、响应的时间轴
• 请求列表：默认时间排序，可选择显示列
• 概要：请求总数、总数据量、总花费时间等

2、控制器

要跨页面加载保存请求Preserve log

用户的网络比较差的时候问题就可以复现

二、过滤器

1、过滤器：按类型

XHR、JS、CSS、Img、Media、Font、Doc、WS (WebSocket)、Manifest 或 Other（此处未列出的任何其他类型）
多类型，按住 Command (Mac) 或 Ctrl（Windows、Linux）

按时间过滤：概览面板，拖动滚动条

隐藏 Data URLs：CSS 图片等小文件以 BASE64 格式嵌入 HTML 中，以减少 HTTP请求数

隐藏前

隐藏后

2、过滤器：属性过滤（一）

domain：仅显示来自指定域的资源。 您可以使用通配符字符 (*) 纳入多个域

domain:*.alicdn.com method:GET

has-response-header：显示包含指定 HTTP 响应标头的资源

is：使用 is:running 可以查找 WebSocket 资源，is:from-cache 可查找缓存读出的资源

is:from-cache

未选中前

选中后

larger-than： 显示大于指定大小的资源（以字节为单位）。 将值设为 1000 等同于设置为 1k

method：显示通过指定 HTTP 方法类型检索的资源
 mime-type：显示指定 MIME 类型的资源
多属性间通过空格实现 AND 操作

3、过滤器：属性过滤（二）

• mixed-content：显示所有混合内容资源 (mixed-content:all)，或者仅显示当前显示的资源(mixed-content:displayed)。
• scheme：显示通过未保护 HTTP (scheme:http) 或受保护 HTTPS (scheme:https) 检索的资源。
• set-cookie-domain：显示具有 Set-Cookie 标头并且 Domain 属性与指定值匹配的资源。
• set-cookie-name：显示具有 Set-Cookie 标头并且名称与指定值匹配的资源。
• set-cookie-value：显示具有 Set-Cookie 标头并且值与指定值匹配的资源。
• status-code：仅显示 HTTP 状态代码与指定代码匹配的资源。

多属性间通过空格实现 AND 操作

三、请求列表的排序

时间排序，默认


• 按列排序
• 按活动时间排序

Start Time ：发出的第一个请求位于顶部
Response Time ：开始下载的第一个请求位于顶部
End Time ：完成的第一个请求位于顶部
Total Duration ：连接设置时间和请求/响应时间最短的请求位于顶部
Latency ：等待最短响应时间的请求位于顶部

请求列表（一）

• Name : 资源的名称
• Status : HTTP 状态代码
• Type : 请求的资源的 MIME 类型

请求列表（二）

Initiator : 发起请求的对象或进程。它可能有以下几种值：
• Parser （解析器） : Chrome的 HTML 解析器发起了请求
• 鼠标悬停显示 JS 脚本
• Redirect （重定向） : HTTP 重定向启动了请求
• Script （脚本） : 脚本启动了请求
• Other （其他） : 一些其他进程或动作发起请求，例如用户点击链接跳转到页面或在地址栏中输入网址

请求列表（三）

• Size : 服务器返回的响应大小（包括头部和包体），可显示解压后大小
• Time : 总持续时间，从请求的开始到接收响应中的最后一个字节
• Waterfall：各请求相关活动的直观分析图

请求列表

四、预览请求内容

预览请求内容（一）

查看头部
• 查看 cookie
• 预览响应正文：查看图像用
• 查看响应正文
• 时间详细分布
• 导出数据为 HAR 格式
• 查看未压缩的资源大小：Use Large Request Rows

预览请求内容（二）

• 浏览器加载时间（概览、概要、请求列表）
• DOMContentLoaded 事件的颜色设置为蓝色，而 load 事件设置为红色
• 将请求数据复制到剪贴版

  1. • Copy Link Address: 将请求的网址复制到剪贴板
  2. • Copy Response: 将响应包体复制到剪贴板
  3. • Copy as cURL: 以 cURL 命令形式复制请求
  4. • Copy All as cURL: 以一系列 cURL 命令形式复制所有请求
  5. • Copy All as HAR: 以 HAR 数据形式复制所有请求

• 查看请求上下游：按住 shift 键悬停请求上，绿色是上游，红色是下游

五、浏览器加载时间

触发流程：
• 解析 HTML 结构
• 加载外部脚本和样式表文件
• 解析并执行脚本代码 // 部分脚本会阻塞页面的加载
• DOM 树构建完成 // DOMContentLoaded 事件
• 加载图片等外部文件
• 页面加载完毕 // load 事件

1、请求时间详细分布（一）

• Queueing: 浏览器在以下情况下对请求排队

  1. • 存在更高优先级的请求
  2. • 此源已打开六个 TCP 连接，达到限值，仅适用于 HTTP/1.0 和 HTTP/1.1
  3. • 浏览器正在短暂分配磁盘缓存中的空间

• Stalled: 请求可能会因  Queueing 中描述的任何原因而停止
• DNS Lookup: 浏览器正在解析请求的 IP 地址
• Proxy Negotiation: 浏览器正在与代理服务器协商请求

2、请求时间详细分布（二）

• Request sent: 正在发送请求
• ServiceWorker Preparation: 浏览器正在启动 Service Worker
• Request to ServiceWorker: 正在将请求发送到 Service Worker
• Waiting (TTFB): 浏览器正在等待响应的第一个字节。 TTFB 表示 Time To First Byte
（至第一字节的时间）。 此时间包括 1 次往返延迟时间及服务器准备响应所用的时间

• Content Download: 浏览器正在接收响应
• Receiving Push: 浏览器正在通过 HTTP/2 服务器推送接收此响应的数据
• Reading Push: 浏览器正在读取之前收到的本地数据

原文地址：https://www.cnblogs.com/luoahong/p/11604389.html

时间： 2024-10-09 20:00:53

Web协议详解与抓包实战：如何用Chrome的Network面板分析HTTP报文的相关文章

Web协议详解与抓包实战

我发现大部分技术人,多多少少都会遇到下面的困惑,比如: AJAX 跨域访问时总被浏览器的同源策略阻止,其背后的原理及符合其设计思想的解决方案是什么? 缓存可以提升性能,但什么样的 HTTP 消息才会被浏览器或者代理服务器缓存呢? 抓包时收到 4xx 或者 5xx HTTP 响应码,这意味着服务器端发生了什么? 当我们维护 HTTPS 连接时,如果要优化TLS/SSL 的卸载性能,应该从哪里入手? 定位问题时,发现本地的 TCP 连接状态中出现了FIN_WAIT.CLOSE_WAIT 或者TIME

Web协议详解与抓包实战：HTTP1协议-HTTP 响应行（3）

一.HTTP 响应行 二.响应码分类:1xx 三.响应码分类: 2xx 1. 201 Created: 有新资源在服务器端被成功创建 2.207 Multi-Status:RFC4918 ,在 WEBDAV 协议中以 XML 返回多个资源的状态. 四.响应码分类: 3xx 五.响应码分类: 4xx 1.400 Bad Request:服务器认为客户端出现了错误,但不能明确判断为以下哪种错误时使用此错误码.例如HTTP请求格式错误. 2.405 Method Not Allowed:服务器不支持请

Web协议详解与抓包实战：HTTP1协议-如何传递 IP 地址？（6）

一.HTTP消息在服务器端的路由 Host 头部 规范与实现间是有差距的 二.代理服务器转发消息时的相关头部 1.Host 头部与消息的路由 2.客户端与源服务器间存在多个代理 三.如何传递 IP 地址 四.消息转发 Via 头部指明经过的代理服务器名称及版本 原文地址:https://www.cnblogs.com/luoahong/p/11613840.html

Web协议详解与抓包实战：HTTP1协议-请求与响应的上下文（7）

一.请求的上下文: User-Agent 指明客户端的类型信息,服务器可以据此对资源的表述做抉择 二.请求的上下文: Referer 浏览器对来自某一页面的请求自动添加的头部 截图2 这对于我们的防盗链非常有帮助: 1.比如我们的图片不希望被某些站点直接引用我们就可以直接禁止掉  服务器端常用于统计分析.缓存优化.防盗链等功能 三.请求的上下文: From 四.响应的上下文:Server   指明服务器上所用软件的信息,用于帮助客户端定位问题或者统计数据 五.响应的上下文: Allow 与 Ac

Web协议详解与抓包实战：HTTP1协议-如何管理跨代理服务器的长短连接？（4）

一.HTTP 连接的常见流程 二.从 TCP 编程上看 HTTP 请求处理 三.短连接与长连接 四.Connection 仅针对当前连接有效 五.代理服务器对长连接的支持 未设置代理服务器 设置代理 继续访问 原文地址:https://www.cnblogs.com/luoahong/p/11613719.html

Web协议详解与抓包实战：HTTP1协议-详解请求行（2）

一.请求行一 二.请求行二 三.请求行三 四.常见方法(RFC7231) 实际测试截图 五.用于文档管理的 WEBDAV 方法(RFC2518) 六.WEBDAV 验证环境  1.登录  2.Wireshark截图 原文地址:https://www.cnblogs.com/luoahong/p/11613220.html

ARP缓存表的构成ARP协议全面实战协议详解、攻击与防御

ARP缓存表的构成ARP协议全面实战协议详解.攻击与防御 1.4.3  ARP缓存表的构成 在局域网的任何一台主机中,都有一个ARP缓存表.该缓存表中保存中多个ARP条目.每个ARP条目都是由一个IP地址和一个对应的MAC地址组成.这样多个ARP条目就组成了一个ARP缓存表.当某台主机向局域网中另外的主机发送数据的时候,会根据ARP缓存表里的对应关系进行发送本文选自ARP协议全面实战手册——协议详解.攻击与防御. 1.查看ARP缓存记录本文选自ARP协议全面实战手册——协议详解.攻击与防御 [实

详解BLE 空中包格式—兼BLE Link layer协议解析

BLE有几种空中包格式?常见的PDU命令有哪些?PDU和MTU的区别是什么?DLE又是什么?BLE怎么实现重传的?BLE ACK机制原理是什么?希望这篇文章能帮你回答以上问题. 虽然BLE空中包(packet)涉及BLE协议栈link layer,L2CAP,SMP和ATT等各层次,但link layer跟空中包格式关系最紧密,掌握了BLE packet的格式,就很容易理解BLE link layer协议的工作原理,因此文章取名"详解BLE空中包格式-兼BLE link layer协议解析&qu

HTTP协议详解以及URL具体访问过程

1.简介 1.1.HTTP协议是什么? 即超文本传输协议(HTTP,HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议,所有的WWW文件都必须遵守这个标准.从网络参考模型来看,它是属于应用层.它规定了计算机通信网络中两台计算机之间进行通信所必须共同遵守的规定或规则,它允许将超文本标记语言(HTML)文档从Web服务器传送到客户端的浏览器. 简单的来说,它就是基于应用层一个规范一个标准!通讯双发都需要遵守这一准则,这就是http协议! 1.2.http简史