Chrome 调试面板(一)——— Network

Chrome 开发者工具的 8 个 panel 中,和服务端处理、响应时间关系最紧密的应该是 Network panel 了。它记录发起请求的对象、HTTP 状态码、文档类型、文档大小、整个请求从发起到结束的时间。

Network 面板分为

  • controller,控制 network 面板要启用和关闭的功能
  • filter,过滤出想要查看的请求(只过滤 name 列)
  • overview,各个请求从发起到响应到下载完成的时间信息
  • request table,每个请求的详细信息
  • summary,包含所有请求的总耗时、总的传输流量
  • Chrome 调试面板(一)——— Network_第1张图片

插一句题外话,Name 命名规则为 URL 的最后路径名/请求参数

request table 中的 waterfall,显示了每个请求的处理时间

来看一个具体的例子

  • Chrome 调试面板(一)——— Network_第2张图片

包括了

  • queueing
  • stalled
  • request sent
  • TTFB(Time To First Byte)
  • content download

关于 蓝线 和 红线

  • 蓝线表示 DOMContentLoaded 事件触发时间
  • 红线表示 Load 事件触发时间

你可能感兴趣的:(Chrome 调试面板(一)——— Network)