本代码实验室将引导您完成解释一个稍微复杂的示例应用程序的所有网络流量的过程。 在练习结束时，您将掌握所需的技能，以了解您自己的 Web 应用程序正在加载什么内容以及何时发出每个请求。
导航到 Network 面板
导航到 Network 面板以查看演示应用程序的网络流量。
要预览该站点，请按View App。 然后按Fullscreen
。按 `Control+Shift+J` (或 Mac 上的 `Command+Option+J`) 打开 DevTools。
点击 Network 选项卡。
重新加载页面以查看网络流量。
Network 面板显示由于您的初始导航而加载的所有资源
如何解释这些条目
记录的网络流量的每一行代表一个请求和响应对。
第一行，类型为 document，是 Web 应用程序 HTML 的初始导航请求。 这是瀑布流的源头；后续对其他资源（称为主文档的子资源）的每个请求都源自此原始源。
第二行和第三行，显示正在加载的 CSS stylesheet 和 script 子资源，是由主文档发起的依赖请求。
查看这些请求在何时发出，瀑布流图表显示，它们直到响应导航请求的过程中很晚才开始。
总而言之，在初始导航期间显示完整页面需要 HTML 文档、CSS 和 JavaScript 的请求。
创建一些额外的运行时请求
在 Network 面板仍然打开并记录的情况下，现在是时候模拟许多 Web 应用程序的常见情况了：在初始导航完成后用于向页面添加更多数据的额外 API 请求。
通过点击应用程序中的 Find Me，然后在出现的弹出窗口中点击 Allow 来触发这些额外的请求。 这将允许该站点访问您的当前位置
一旦 Web 应用程序可以使用位置，点击 Find Nearby Wikipedia Entries 将导致几个额外的网络请求。 您应该看到类似这样的内容
解释新条目
和之前一样，记录的网络流量的每一行代表一个请求和响应对。
新条目的第一行表示类型为 fetch 的请求，这对应于 Web 应用程序从 Wikipedia API 请求数据的方式。
以下行都是与 Wikipedia 条目关联的图像（png 或 jpeg）。 虽然从屏幕截图上很难看出，但它们在 Waterfall 列中的条目直接来自 API 响应。
对于所有这些额外的请求，何时发出将根据您在点击 Find Nearby Wikipedia Entries 之前打开页面的时间长短而有所不同。 这里最重要的是，何时发出与初始导航请求无关。 您可以从 Waterfall 显示中存在的大间隙中看出这一点，该间隙表示初始加载和发出 Wikipedia API 请求之间经过的一段时间。
在导航后经过一段时间间隔后发出的请求属于“运行时请求”类别，而不是首次导航到页面时用于显示页面的初始请求集。
总结
完成本代码实验室中的步骤后，您现在熟悉可以用来分析任何 Web 应用程序加载内容的工具。
Network 面板可帮助您回答什么正在加载的问题，通过 Name 列中的 URL 和 Type 列中的数据，以及何时加载，通过瀑布流显示。
您还看到，Web 页面发出的请求（通常）可以分为两类
- 初始请求，在导航到新页面后立即发出，用于 HTML、JavaScript、CSS（以及可能的其他资源）。
- 运行时请求，是由于用户与页面的交互而发出的。 这通常可以从对 API 的请求开始，然后根据检索到的 API 数据流入几个后续请求。