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

Jeff Posnick

如需完成此 Codelab，请在第二个标签页中打开 this Glitch。

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

此 Codelab 将逐步引导您 用于比较复杂的示例应用的流量在练习结束时， 您将掌握所需技能，找出自己的 Web 应用 以及何时发出每个请求。

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

导航至网络面板

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

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

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

3. 点击网络标签页。

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

“Network”面板会显示由于您的初始值而加载的所有素材资源 导航：

注意 ：您在“网络”面板中实际看到的列可能会有所不同；此屏幕截图显示的是一个简化视图，其中隐藏了 Name、Type 和 Waterfall 列之外的所有内容。

如何解读这些条目

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

第一行（类型为 document）是对 Web 应用的 HTML。这是广告瀑布流的来源；后续 其他资源（称为主文档的子资源）流程 原始来源。

第二行和第三行，显示了 CSS stylesheet 和 script 子资源 是由主文档发起的从属请求。

从发出这些请求的时间来看，瀑布图显示了 直到对解决方案做出响应的过程很晚才启动 导航请求。

总体而言，对 HTML 文档、CSS 和 展示整个网页时需要使用 JavaScript 初始导航。

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

让 Network 面板仍然处于打开状态并进行记录，接下来可以模拟某些操作了 这对很多 Web 应用来说很常见：用于向 API 添加更多数据的额外 API 请求 初始导航完成后显示的网页。

点击应用中的查找我，然后触发这些额外请求 允许。 这将允许该网站访问您的当前位置：

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

当 Web 应用有了可处理的位置后，点击查找附近位置 Wikipedia 条目会导致几个额外的网络请求。您 应显示如下内容：

解读新条目

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

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

以下各行都是与pngjpeg 维基百科条目。虽然从屏幕截图上看不太清楚 广告瀑布流列中的条目直接从 API 响应流出。

对于所有这些额外请求，时间将因 在点击查找附近的 Wikipedia 之前打开该网页， 参评申请。其中最重要的是，when 与 初始导航请求。通过大型语言模型和 瀑布图显示界面 代表从界面到界面 以及何时发出 Wikipedia API 请求。

在导航间隔一段时间后发出的请求可归入此类别 即“运行时请求”这与用于展示 您第一次导航到该网页时看到的是该网页

总结

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

Network 面板可帮助您回答通过 “Name”列中的网址、“Type”列中的数据，以及 when 通过瀑布显示完成加载

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

1. 在浏览到新网页后立即发出的初始请求， HTML、JavaScript、CSS（可能还包括其他资源）。
2. 因用户与页面交互而发出的运行时请求。这个 通常可以先向 API 发出请求，然后进入 根据检索到的 API 数据提出后续请求。