谷歌浏览器的开发者工具“网络篇”

Chrome DevTools Network

在"过滤"支持的属性

1. 不显示某些结果“-.png”，加一个减号
2. 显示.png的文件“mime-type:image/png”或者直接输入.png
3. 一些例子：“method:GET”只显示GET请求；url是.cn结尾的“url:cn”，更多规则在官方文档
4. 还有就是在你输入method后，输入框会自动列出可选择的内容：如“method:GET，method:POST”
5. 可以通过类型筛选请求如单击Fetch/XHR，CSS，JS等；亦可以启用多个类型过滤器，按住控制键 + 单击多选
6. 通请求行中“瀑布Waterfall”详细：

• 排队。在以下情况下，浏览器对请求进行排队：
  • 有更高优先级的请求。
  • 已经为此源打开了六个 TCP 连接，这是限制。仅适用于 HTTP/1.0 和 HTTP/1.1。
  • 浏览器正在磁盘缓存中短暂分配空间
• 停滞不前。请求可能由于排队中所述的任何原因而停止。
• DNS 查找。浏览器正在解析请求的 IP 地址。
• 初始连接。浏览器正在建立连接，包括 TCP 握手/重试和协商 SSL。
• 代理协商。浏览器正在与代理服务器协商请求。
• 请求已发送。正在发送请求。
• 服务工作者准备。浏览器正在启动服务辅助角色。
• 请求服务工作者。请求正在发送给服务辅助角色。
• 正在等待 （TTFB）。浏览器正在等待响应的第一个字节。TTFB 代表 到第一个字节的时间。此计时包括 1 次往返延迟和服务器准备响应所花费的时间。
• 内容下载。浏览器直接从网络或服务工作线程接收响应。此值是读取响应正文所花费的总时间。大于预期值可能表示网络速度较慢，或者浏览器正忙于执行其他工作，从而延迟读取响应。
• 接收推送。浏览器正在通过 HTTP/2 服务器推送接收此响应的数据。
• 阅读推送。浏览器正在读取以前收到的本地数据。