Chrome开发者工具第二十二章（检查网络活动）

Chrome 开发者工具的网络面板是一个强大的分析工具，它可以帮助开发者监控和诊断页面加载过程中的网络活动。使用网络面板，你可以查看资源的加载顺序、大小、加载时间以及可能的性能瓶颈。

打开网络面板

可以通过按下 Ctrl+Shift+J 或 Command+Option+J (Mac) 来实现。然后，点击 "网络" 标签，你会看到一个空的网络日志，因为开发者工具只记录打开后发生的网络活动。

记录和查看网络活动

重新加载页面后，网络面板会捕获所有网络请求，并在网络日志中展示。每一行代表一个资源，你可以看到资源的状态、类型、发起者、加载时间以及一个瀑布流图，显示请求的不同阶段。

状态：HTTP 响应代码。
类型：资源类型。
启动器：导致请求资源的原因。点击"启动器"列中的链接即可转到引发相应请求的源代码。
时间：请求所用时间。
瀑布流：请求不同阶段的图示。将鼠标悬停在瀑布流上方即可查看细分数据。

自定义网络日志列

网络日志的列是可以自定义的。你可以通过右键点击列标题来选择需要显示的列。例如，右击网络面板的标题栏，在弹出的菜单中选择 "网域" 列可以帮助你查看每个资源的域名。

模拟慢速网络连接

为了更好地理解你的网页在不同网络条件下的表现，你可以模拟慢速网络连接。在 "网络" 面板中，点击 "已停用节流模式" 下拉菜单并选择 "低速3G"。然后，长按重新加载按钮，选择 "清空缓存并硬性重新加载" 选项来模拟首次访问者的体验。注意："清空缓存并硬性重新加载"仅在开发者工具处于打开状态时可用。

截取屏幕截图

网络面板还有一个 "屏幕截图" 功能，它可以在页面加载过程中自动捕获屏幕截图。这对于分析页面可视化加载过程非常有用。当网络面板处于焦点状态时，重新加载页面以捕获屏幕截图。截取屏幕后，您可以通过以下方式与屏幕截图互动：

将鼠标悬停在屏幕截图上，即可查看截取屏幕截图的时间点。
点击屏幕截图的缩略图以滤除捕获屏幕截图后发生的所有请求。
双击缩略图可对其进行放大。

检查资源的详细信息

点击网络日志中的任何资源，你可以查看该资源的详细信息，包括 HTTP 标头、预览、响应内容以及加载时间分解。

"**标头"**选项卡显示出了请求和响应的HTTP头部信息。这里可以查看例如请求的URL、请求方法（GET、POST等）、请求状态码（如200代表成功响应），以及包括用户代理字符串、接受的内容类型、请求和响应的cookies等详细信息。
**"预览"**选项卡提供了对返回资源的视觉预览。如果请求返回的是HTML、图片或某种可解析的JSON对象，你可以在这里直接看到格式化后的结果。它帮助你快速理解返回的内容而不必查看原始源代码。
**"响应"**选项卡显示原始的响应数据。这对于调试返回内容非常有用，尤其是当你想要查看服务器返回的确切内容，包括任何服务器生成的消息或者纯文本、JSON、XML等格式的数据。
**"启动器"**列表明了发起请求的源头。它可以帮助你追踪是哪段脚本或者哪个过程触发了这次网络请求。点击它会导向相关代码的位置，非常有助于调试和优化性能。
**"时间"**选项卡展示了请求从开始到结束的各个阶段所花费的时间，这包括等待服务器响应的时间（TTFB）、内容下载时间、建立连接的时间等。这部分非常重要，因为它可以帮助开发者了解加载性能瓶颈可能出现在哪里。