【计算机网络】使用Chrome的Network面板分析HTTP报文

谷歌的文档 https://developers.google.com/web/tools/chrome-devtools/network/
快捷键 Control+Shift+l(Windows)or Command+Option+l(Mac)

Chrome抓包：Network面板

过滤器 ： 过滤请求下方请求列表中的东西
概览： 以图形化的方式来显示请求的相关信息
请求列表 显示了所有的请求，点击请求 会出现详细的内容
概要 显示抓取了多少的内容，还有信息等

具体如下：

详细来看
控制器模块：

过滤器：按类型

注意最后一项： 可以使小文件以BASE64位格式嵌入HTML中 来减少HTTP

过滤器： 属性过滤（一）
输入框输入

第二个距离可以使 setCookie

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

请求列表的排序


请求列表（一）

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

Type显示的是视频类型的文件，js文件还是别的类型的文件

请求列表（二）
Initiator：发起请求的对象或进程。它可能有以下几种值：

• Parser（解析器）：Chrome的HTML解析器发起了请求
  · * 鼠标悬停显示JS脚本
• Redirect（重定向）：HTJP重定向启动了请求
• Script（脚本）：脚本启动了请求
• Other（其他）：一些其他进程或动作发起请求，例如用户点击链接跳转到页面或在地址栏中输入网址

请求列表（三）

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

预览请求内容（一）

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

预览请求内容（二）

• 浏览器加载时间（概览、概要、请求列表）

  • DOMContentLoaded事件的颜色设置为蓝色，而load 事件设置为红色

• 将请求数据复制到剪贴版

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

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

上游和下游 举个例子：有一个html页面为上游 里面出现了图片的连接 之后的图片就是下游

浏览器加载时间

触发流程：

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

请求时间详细分布（一）

• Queueing：浏览器在以下情况下对请求排队
  *存在更高优先级的请求

  • 此源已打开六个TCP连接，达到限值，仅适用于HTTP/1.0和HTTP/1.1
  • 浏览器正在短暂分配磁盘缓存中的空间

• Stalled：请求可能会因Queueing中描述的任何原因而停止

• DNS Lookup：浏览器正在解析请求的IP地址

• Proxy Negotiation：浏览器正在与代理服务器协商请求

• 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：浏览器正在读取之前收到的本地数据