Article February 07, 2024

Chrome 网络面板的使用

Words count 2.7k Reading time 2 mins. Read count 0

过滤器:按类型

  • XHR、JS、CSS、Img、Media、Font、Doc、WS(WebSocket)、Manifest或Other(此处未列出的任何其他类型)
  • 多类型,按住Command(Mac)或Ctrl(Windows、Linux)
  • 按时间过滤:概览面板,拖动滚动条
  • 隐藏Data URLs:CSS图片等小文件以BASE64格式嵌入HTML中,以减少HTTP请求数

属性过滤(一)

  • domain:仅显示来自指定域的资源。您可以使用通配符字符(*)纳入多个域
  • has-response-header:显示贪指定HTTP响应标头的资源
  • is:使用is:running可以查找WebSocket资源,is:from-cache可查找缓存读出的资源
  • larger-than:显示大于指定大小的资源(以字节为单位)。将值设为1000等同于设置为1k
  • method:显示通过指定HTTP方法类型检索的资源
  • mime-type:显示指定MIME类型的资源

属性过滤(二)

  • 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状态代码与指定代码匹配的资源。

请求列表的排序

  • 时间排序,默认
  • 按列排序
  • 按活动时间排序
  • Start Time:发出的第一个请求位于顶部
  • Response Time:开始下载的第一个请求位于顶部
  • End Time:完成的第一个请求位于顶部
  • Total Duration:连接设置时间和请求/响应时间最短的请求位于顶部
  • Latency:等待最短响应时间的请求位于顶部

请求列表(二)

Initiator:发起请求的对象或进程。它可能有以下几种值:

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

预览请求内容(一)

  • 查看头部
  • 查看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结构
  • 加载外部脚本和样式表文件。
  • 解析并执行脚本代码//部分脚本会阻塞页面的加载
  • DOM树构建完成 // DOMContentLoaded事件
  • 加载图片等外部文件
  • 页面加载完毕//load事件

请求时间详细分布(一)

  • Queueing:浏览器在以下情况下对请求排队
    • 存在更高优先级的请求
    • 此源已打开六个TCP连接,达到限值,仅适用于HTTP/1.0和HTTP/1.1
    • 浏览器正在短暂分配磁盘缓存中的空间
  • Stalled:请求可能会因Queueing中描述的任何原因而停止
  • DNS Lookup:浏览器正在解析请求的IP地址
  • Proxy Negotiation:浏览器正在与代理服务器协商请求
0%