Chrome 抓包：Network 面板
可以参考
https://developers.google.com/web/tools/chrome-devtools/network/
1.1 NetWork 控制面板
• 控制器：控制面板的外观与功能
• 过滤器：过滤请求列表中显示的资源
• 按住 Command （Mac）或 Ctrl （Window / Linux），然后点击过滤器可以
同时选择多个过滤器
• 概览：显示 HTTP 请求、响应的时间轴
• 请求列表：默认时间排序，可选择显示列
• 概要：请求总数、总数据量、总花费时间等
1.2 控制器
1.3 过滤器：按类
1.4 过滤器：属性过滤
domain:*.alicdn.com method:GET
1.5 请求列表的排序
• 时间排序，默认
• 按列排序
• 按活动时间排序
• 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：各请求相关活动的直观分析图
1.6 预览请求内容
• 查看头部
• 查看 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 键悬停请求上，绿色是上游，红色是下游
1.7 浏览器加载时间
• 浏览器加载时间（概览、概要、请求列表）
• DOMContentLoaded 事件的颜色设置为蓝色，而 load 事件设置为红色
• 将请求数据复制到剪贴版
• Copy Link Address: 将请求的网址复制到剪贴板
• Copy Response: 将响应包体复制到剪贴板
• Copy as cURL: 以 cURL 命令形式复制请求
• Copy All as cURL: 以一系列 cURL 命令形式复制所有请求
• Copy All as HAR: 以 HAR 数据形式复制所有请求
• 查看请求上下游：按住 shift 键悬停请求上，绿色是上游，红色是下游
1.8 请求时间详细分布
• 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: 浏览器正在读取之前收到的本地数据
