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

Jeff Posnick

若要按照此 Codelab 操作，请在第二个标签页中打开此 Glitch。

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

此 Codelab 将引导您完成一个有点复杂的示例应用解读所有网络流量的过程。完成本练习后，您将会掌握所需的技能，从而了解您自己的 Web 应用要加载什么内容以及何时发出每个请求。

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

前往“网络”面板

导航到“网络”面板以查看演示应用的网络流量。

1. 如需预览网站，请按查看应用，然后按全屏 。

2. 按 `Control+Shift+J`（在 Mac 上，则按 `Command+Option+J`）打开开发者工具。

3. 点击网络标签页。

4. 请重新加载页面以查看网络流量。

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

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

如何解读条目

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

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

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

通过查看这些请求的发出时间，瀑布图显示，它们在响应导航请求的过程中直到很晚才启动。

总而言之，在初始导航期间，需要对 HTML 文档、CSS 和 JavaScript 的请求显示完整页面。

创建一些其他运行时请求

在 Network 面板仍处于打开状态并进行记录后，接下来您可以模拟许多 Web 应用的常见某项功能：额外的 API 请求，用于在初始导航完成后向页面添加更多数据。

如需触发这些其他请求，请在应用中点击 Find Me，然后点击出现的弹出式窗口中的 Allow。这将允许该网站访问您的当前位置：

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

在 Web 应用有了可用的位置信息后，点击查找附近的维基百科条目会引发另外几个网络请求。您应该会看到类似下图的内容：

解读新条目

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

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

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

对于所有这些额外请求，时间取决于您在点击查找附近的维基百科条目之前网页打开的时长。此处最重要的是 when 会与初始导航请求断开连接。您可以看出瀑布显示区中存在的较大间隙，该间隙表示初始加载与发出 Wikipedia API 请求时所经过的时间段。

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

总结内容

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

“Network”面板可帮助您通过“Name”列中的网址和“Type”列中的数据，以及何时加载（通过广告瀑布流显示）来解答正在加载什么内容的问题。

您还发现，网页发出的请求通常可以分为以下两个类别之一：

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