探索开发者工具的“Network”面板

Jeff Posnick

注意： 此 Codelab 使用 Chrome 开发者工具。下载 Chrome（如果您尚未安装）。

此 Codelab 将引导您完成一个稍微复杂的示例应用的所有网络流量的解读过程。完成练习后，您将掌握必要的技能，能够弄清楚自己的 Web 应用正在加载什么，以及何时发出每个请求。

注意： 本 Codelab 中的屏幕截图和说明均假定您使用的是 Chrome。每个浏览器都有自己的开发者工具体验，可能与您在此 Codelab 中看到的不同。

前往“网络”面板

前往“网络”面板，查看演示应用的网络流量。

1. 按 `Control+Shift+J`（在 Mac 上，按 `Command+Option+J`）打开开发者工具。
2. 点击网络标签页。
3. 重新加载页面即可查看网络流量。

“网络”面板会显示因初始导航而加载的所有资源：

注意： 您在“网络”面板中看到的实际列可能有所不同；屏幕截图显示的是简化视图，其中隐藏了除名称、类型和瀑布流列之外的所有内容。

如何解读条目

记录的网络流量的每一行都代表一个请求和响应对。

第一行（类型为 document）是针对 Web 应用 HTML 的初始导航请求。这是瀑布流的来源；后续对其他资源（称为主文档的子资源）的每个请求都来自此原始来源。

第二行和第三行显示正在加载 CSS stylesheet 和 script 子资源，它们是由主文档发起的依赖请求。

查看这些请求的发出时间，瀑布图显示，直到响应导航请求的过程非常晚时，这些请求才开始。

综合来看，在初始导航期间，需要请求 HTML 文档、CSS 和 JavaScript 才能显示完整页面。

创建一些额外的运行时请求

在网络面板仍处于打开状态并进行记录的情况下，现在可以模拟许多 Web 应用的常见情况：在初始导航完成后，使用额外的 API 请求向页面添加更多数据。

如需触发这些额外请求，请在应用中点击查找我，然后在随即显示的弹出式窗口中点击允许。 这将允许该网站访问您的当前位置信息：

注意： 您也可以拒绝地理定位权限，在这种情况下，Web 应用将回退到默认位置。

Web 应用获取位置信息后，点击查找附近的维基百科条目会触发多个额外的网络请求。您应该会看到类似下图的内容：

解读新条目

与之前一样，记录的网络流量的每一行都代表一个请求和响应对。

新条目的第一行表示类型为 fetch 的请求，该请求对应于 Web 应用从 Wikipedia API 请求数据的方式。

以下各行都是与维基百科条目关联的图片（png 或 jpeg）。虽然从屏幕截图中很难看出来，但“瀑布流”列中的条目直接来自 API 响应。

对于所有这些额外请求，时间将根据您在点击查找附近的维基百科条目之前打开页面的时长而有所不同。这里最重要的是，何时与初始导航请求断开连接。您可以从瀑布流显示中存在的巨大差距看出这一点，该差距表示从初始加载到发出 Wikipedia API 请求之间经过的一段时间。

在导航后经过一段时间发出的请求属于“运行时请求”类别，而不是您首次导航到网页时用于显示网页的初始请求集。

总结

完成此 Codelab 中的步骤后，您现在已经熟悉了可用于分析任何 Web 应用加载内容的工具。

“网络”面板可帮助您通过“名称”列中的网址和“类型”列中的数据来回答正在加载什么的问题，并通过瀑布图显示来回答何时加载的问题。

您还了解到，网页发出的请求（通常）可以分为以下两类之一：

1. 在导航到新网页后立即发出的针对 HTML、JavaScript、CSS（以及可能的其他资源）的初始请求。
2. 因用户与网页互动而发出的运行时请求。这通常可以从对 API 的请求开始，然后根据检索到的 API 数据流入多个后续请求。