【第三篇】谷歌调试窗口：Network
【第三篇】谷歌调试窗口：Network
“network”一打开面板为空。这是因为DevTools仅在网络活动打开时记录日志，并且自打开DevTools的network以来未发生任何网络活动。
网络日志的每一行代表一个资源。默认情况下，资源按时间顺序列出。最重要的资源通常是主要的HTML文档。最底层的资源是最后请求的内容。
每列代表有关资源的信息。图6显示了默认列：
- Status。HTTP响应代码。
- Type。资源类型。
- Initiator。是什么导致了资源的请求。单击“发起者”列中的链接，将您带到引起请求的源代码。
- Time。请求花了多长时间。
-
Waterfall。请求不同阶段的图形表示。将鼠标悬停在瀑布上可以查看细目。
一. 快捷设置自己是第一次加载网页（清缓存硬加载）
1. 长按Reload 
，然后选择Empty Cache And Hard Reload。
2 .重复访问时，浏览器通常会从其缓存中提供一些文件，从而加快页面加载速度。空缓存和硬重载会强制浏览器访问所有资源的网络。当您想了解首次访问者如何体验页面加载时，这很有用。
注意：仅在打开DevTools时，“ 清空缓存和硬重装”工作流程才可用。
二. 设置阻止网络请求
页面的某些资源不可用时，页面的外观和行为如何？它会完全失败，还是仍然有些功能？阻止请求以找出：
-
按Control+ Shift+ P或 Command+ Shift+ P（Mac）打开命令菜单。
- 键入
block，选择显示请求阻止，然后按Enter。
-
点击添加模式
。 -
输入
main.css。封锁main.css请求
三. Preserve log：保留请求日志，跳转页面的时候勾选上，可以看到跳转前的请求, 保存跨页面加载的请求，请选中“网络”面板上的“ 保留日志”复选框。DevTools将保存所有请求，直到禁用“ 保留日志”。
四. Disable cache：不会请求缓存
在network下这样每次请求都是最新，不会请求缓存，适合调试，要模拟首次用户访问您的网站的方式，请选中“ 禁用缓存”复选框。DevTools禁用浏览器缓存。这可以更准确地模拟首次用户的使用体验，因为请求是在重复访问时从浏览器缓存中提供的。
五. 手动清除浏览器缓存
要随时手动清除浏览器缓存，请右键单击“请求”表中的任意位置，然后选择“ 清除浏览器缓存”。
六. 网络数据时序请求
以下是您可能会在“时序”选项卡中看到的每个阶段的更多信息：
- Queueing。浏览器在以下情况下将请求排队：
- 有更高优先级的请求。
- 已为该来源打开了六个TCP连接，这是限制。仅适用于HTTP / 1.0和HTTP / 1.1。
- 浏览器正在磁盘缓存中短暂分配空间
- Stalled。出于队列中描述的任何原因，该请求都可能被暂停。
- DNS Lookup。浏览器正在解析请求的IP地址。
- Proxy negotiatio。浏览器正在与代理服务器协商请求。
- Request sent。正在发送请求。
- ServiceWorker Preparation。浏览器正在启动服务工作者。
- Request to ServiceWorker。该请求被发送到服务人员。
- Waiting （TTFB）。浏览器正在等待响应的第一个字节。TTFB代表到第一个字节的时间。此时间包括一次往返延迟和服务器准备响应所花费的时间。
- Content Download。浏览器正在接收响应。
- Receiving Push。浏览器正在通过HTTP / 2服务器推送接收此响应的数据。
- Reading Push。浏览器正在读取先前接收的本地数据。
七. 网络network底部说明：警告：下面数字仅跟踪自打开DevTools以来已记录的请求。如果在打开DevTools之前发生了其他请求，则不计算这些请求。
- requests。网络请求总数
- transferred。浏览器总下载大小，浏览器传输数据会压缩原来的数据进行传输。
- resources。所有未压缩的资源大小。
- Request sent。正在发送请求。
- ServiceWorker Preparation。浏览器正在启动服务工作者。
- Request to ServiceWorker。该请求被发送到服务人员。
- Waiting （TTFB）。浏览器正在等待响应的第一个字节。TTFB代表到第一个字节的时间。此时间包括一次往返延迟和服务器准备响应所花费的时间。
- Content Download。浏览器正在接收响应。
- DOMContentLoaded。浏览器内容下载耗时。
- load。浏览器加载数据总耗时。
浙公网安备 33010602011771号