玩转浏览器自带network工具

在开发 Web 端时，浏览器是我们必备的工具，使用浏览器的 Network 面板必不可少，下面就 Network 面板进行一下介绍，学习了如何使用它能让你的工作事半功倍。

面板各模块简介.jpeg

• 界面上各按钮功能如下图所示

  
  常用功能一览.png

• 下面是请求列表 title 相关的列，可以通过右键添加或移除

请求列表 title 列.png 右键操作显隐的 title

对一些比较陌生的 Title 进行解释：

• Initiator: 表示发起请求的来源
  • Parser（解析器）：HTML解析器发起了请求。鼠标悬停显示哪个js脚本
  • Redirect：重定向启动了请求
  • Script：脚本启动了请求
  • Other：其他进程或动作发起，如用户点击链接或地址栏的输入
• Response Header 可以设置指定显示某些返回请求头的列
• Waterfall 是显示请求活动时间的直观柱状图，可以用它实现时间上的排序
• Size 如果有两列，一个是解压后的大小，一个是解压前的大小

当点击一个请求后，会出现请求概览，能查看请求的所有内容。可以：

• Copy as cURL: 以 cURL 命令形式复制出请求
• ...

当鼠标悬停在一个请求上再按 Shift 键，可显示请求的上下游，绿色为上游（是谁发起了这个请求），红色为下游（发起了下方的哪些请求）。

浏览器加载时间

流程

• 解析 HTML 结构
• 加载外部脚本和样式表文件
• 解析并插脚本
• DOM 树构建完成 // DOMContendLoaded 事件,蓝色的时间线
• 加载图片等外部文件
• 页面加载完毕 // load 事件完成

请求时间详细分布

可在一个请求概览的 Timing 栏看到详细的条目

• Queueing: 请求正在排队. 原因有以下三种:
  • 有更高优先级的请求在执行
  • 达到了 6 个 TCP 连接的限值 (<=HTTP/1.1)
  • 浏览器正在分配磁盘缓存空间
• Stalled: 请求停止
• DNS Lookup: 正在解析请求 IP
• Proxy Negotiation: 浏览器正在与代理服务器协商请求
• Request Send: 正在发送请求
• ServiceWorker Preparation: 浏览器正在启动 Service Worker
• Request to ServiceWorker: 正在请求 Service Worker
• Waiting (TTFB): 正在等待响应的第一个字节 (Time To First Byte)
• Content Download: 正在接收响应
• Receiving Push: 正在通过 HTTP/2 推送接收响应数据
• Reading Push: 正在读取之前收到的本地数据