检查网络活动

Kayce Basques

这是一个实操教程，介绍了一些最常用的与检查网页网络活动相关的开发者工具功能。

如果您想浏览功能，请参阅网络参考。

请继续阅读，或观看本教程的视频版本：

何时使用“网络”面板

一般来说，当您需要确保资源按预期下载或上传时，请使用网络 面板。网络 面板最常见的用例包括：

• 确保资源实际上已上传或下载。
• 检查单个资源的属性，例如 HTTP 标头、内容、大小等。

如果您正在寻找提高网页加载性能的方法，请 不要 从 网络 面板入手。 有许多类型的加载性能问题与网络活动无关。请从 Lighthouse 面板入手，因为它会针对如何改进网页提供有针对性的建议。请参阅 优化网站速度。

打开“网络”面板

如需充分利用本教程，请打开演示并尝试演示页面上的功能。

1. 打开“入门”演示。

   

   您可能更喜欢将演示移至单独的窗口。

   

2. 按 Control+Shift+J 或 Command+Option+J (Mac) 打开开发者工具。控制台 面板随即打开。

   

   您可能更喜欢将开发者工具停靠在窗口底部。

   

3. 点击 Network 标签页。网络 面板随即打开。

   

现在，网络 面板是空的。这是因为开发者工具仅在打开时记录网络活动，并且自您打开开发者工具以来，没有发生任何网络活动。

记录网络活动

如需查看网页导致的网络活动，请执行以下操作：

1. 重新加载页面。网络 面板会在网络日志 中记录所有网络活动。

   

   网络日志 的每一行代表一个资源。默认情况下，资源按时间顺序排列。顶部的资源通常是主 HTML 文档。底部的资源是最后请求的资源。

   每一列代表有关资源的信息。默认列包括：

   • 状态：HTTP 响应代码。
   • 类型：资源类型。
   • 启动器：导致请求资源的原因。点击“启动器”列中的链接会转到导致请求的源代码。
   • 大小：通过网络传输的资源量。
   • 时间：请求所用的时间。
   注意： 网络日志上方的图表称为“概览”。在本 教程中，您不会使用它，因此您可以根据需要将其隐藏。请参阅隐藏“概览”轨迹。

2. 只要您打开了开发者工具，它就会在网络日志 中记录网络活动。为了演示这一点，请先查看网络日志 的底部，并记下上次活动。

3. 现在，点击演示中的 Get Data 按钮。

4. 再次查看网络日志 的底部。有一个名为 getstarted.json 的新资源。点击 Get Data 按钮会导致页面请求此文件。

   

显示更多信息

网络日志 的列是可配置的。您可以隐藏不使用的列。此外，还有许多列默认处于隐藏状态，您可能会觉得它们很有用。

1. 右键点击网络日志 表格的标题，然后选择 Domain 。现在会显示每个资源的网域。

   

提示： 您可以将鼠标悬停在名称列中的单元格上，以查看资源的完整网址。

模拟较慢的网络连接

您用于构建网站的计算机的网络连接可能比用户的移动设备的网络连接更快。通过限制网页，您可以更好地了解网页在移动设备上的加载时间。

1. 点击 Throttling 下拉菜单，该菜单默认设置为 No throttling 。

   

2. 选择 3G 。

   

3. 长按 Reload 刷新，然后选择 Empty Cache And Hard Reload。

   

   在重复访问时，浏览器通常会从其 缓存 中提供一些文件，这会加快 网页加载速度。Empty Cache And Hard Reload 会强制浏览器访问网络以获取所有资源。当您想了解首次访问者如何体验网页加载时，这很有帮助。

   注意： **Empty Cache And Hard Reload** 工作流仅在开发者工具打开时可用。

捕捉屏幕截图

屏幕截图会捕捉网页在加载过程中不同时间点的外观，并报告每个时间间隔加载的资源。

如需捕捉屏幕截图，请按以下步骤操作：

1. 点击 Network Settings settings。

2. 启用 Screenshots check_box 复选框。

3. 使用 Empty Cache And Hard Reload 工作流再次重新加载网页。如果您需要有关如何执行此操作的提醒，请参阅模拟较慢的 连接。Screenshots 标签页提供了网页在加载过程中的各个时间点的缩略图。

   

4. 点击第一个缩略图。开发者工具会向您显示当时发生的网络活动。

   

5. 切换 Screenshots 复选框以关闭“Screenshots”标签页。

6. 再次重新加载网页。

检查资源的详细信息

点击资源可了解有关该资源的更多信息。立即尝试：

1. 点击 getstarted.html。系统会显示 Headers 标签页。使用此标签页检查 HTTP 标头。

   

2. 点击 Preview 标签页可查看基本的 HTML 呈现。

   

   当 API 在 HTML 中返回错误代码，并且呈现的 HTML 比 HTML 源代码更易于阅读，或者在检查图片时，此标签页很有用。

3. 点击 Response 标签页可查看 HTML 源代码。

   

   提示： 当文件被缩减时，点击 Response 标签页底部的 Format data_object 按钮会重新格式化文件的内容，以提高可读性。

4. 点击 Initiator 标签页可查看映射请求启动器链的树。

   

5. 点击 Timing 标签页可查看此资源的网络活动细分。

   

6. 点击 Close close 可再次查看 网络日志 。

   

搜索网络标头和响应

当您需要搜索所有资源的 HTTP 标头和响应以查找特定字符串或正则表达式时，请使用 Search 标签页。

例如，假设您想检查资源是否使用了合理的 缓存政策。

1. 点击面板操作栏中的 Search search，或按 Command + F (macOS) 或 Control + F (Windows / Linux)。

   Search 标签页会在网络日志 的左侧打开。

   

2. 输入 Cache-Control，然后按 Enter 键。Search 标签页会列出在资源标头或内容中找到的所有 Cache-Control 实例。

   

3. 点击相应结果即可查看。如果在标头中找到查询，则会打开“Headers”标签页。如果在内容中找到查询，则会打开 Response 标签页。

   

4. 关闭 Search 标签页和 Headers 标签页。

   

过滤资源

开发者工具提供了许多工作流，用于过滤掉与当前任务无关的资源。

Filters 工具栏应默认处于启用状态。如果不是，请执行以下操作：

1. 点击 Filter filter_alt 以显示它。

按字符串、正则表达式或属性过滤

Filter 输入框支持多种不同类型的过滤。

1. 在 Filter 输入框中输入 png。系统只会显示包含文本 png 的文件。在本例中，与过滤条件匹配的文件只有 PNG 图片。

   

2. 输入 /.*\.[cj]s+$/。开发者工具会过滤掉文件名末尾不是 j或c，后跟 1 个或多个s字符的任何资源。

   

3. 输入 -main.css。开发者工具会过滤掉 main.css。如果有任何其他文件与该模式匹配，它们也会被过滤掉。

   

4. 在 Filter 文本框中输入 domain:raw.githubusercontent.com。开发者工具会过滤掉网址与此网域不匹配的任何资源。

   

   如需查看可过滤属性的完整列表，请参阅按属性过滤请求。

5. 清除 Filter 输入框中的所有文本。

按资源类型过滤

如需专注于特定类型的文件（例如样式表），请执行以下操作：

1. 点击 CSS 。所有其他文件类型都会被过滤掉。

   

2. 如需同时查看脚本，请按住 Control 或 Command (Mac)，然后点击 JS 。

   

3. 点击 All 可移除过滤条件并再次查看所有资源。

如需了解其他过滤工作流，请参阅过滤请求。

屏蔽请求

当网页的某些资源不可用时，网页的外观和行为如何？是完全失败，还是仍然具有一定的功能？屏蔽请求以了解：

1. 按 Control+Shift+P 或 Command+Shift+P (Mac) 打开 Command Menu 。

   

2. 输入 block，选择 Show Request Blocking，然后按 Enter 键。

   

3. 点击 Add Pattern 按钮。

4. 输入 main.css。

   

5. 点击 Add 。

6. 重新加载页面。正如预期的那样，网页的样式略有混乱，因为其主样式表已被屏蔽。请注意网络日志中的 main.css 行。红色文本表示资源被屏蔽。

   

7. 清除 Enable request blocking 复选框。

如需了解与检查网络活动相关的更多开发者工具功能，请查看网络参考。