检查网络活动
使用 网络 工具确保网页运行所需的资源已按预期下载，并且正确发送对服务器端 API 的请求。 检查单个 HTTP 请求和响应的属性，例如 HTTP 标头、内容或大小。
此为 网络 工具的分步教程演练，用于检查页面的网络活动。
有关与网络相关的 DevTools 功能的概述，请参阅 网络功能参考。
视频：了解如何使用网络工具
对于本教程的视频版本，请观看以下视频：
何时使用网络工具
一般情况下，需要确保正确下载资源并按预期发送对服务器端 API 的请求时，请使用 网络 工具。 网络工具的最常见用例包括：
确保实际正在下载资源。
验证服务器端 API 调用的请求参数和响应。
如果你正在寻找提高页面加载性能的方法， 网络 工具可以帮助了解下载的数据量以及下载数据需要多长时间，但还有许多其他类型的加载性能问题与网络活动无关。 若要进一步调查页面加载性能问题，可以使用 性能工具、 问题 工具和 Lighthouse 工具，因为它提供了有关如何改进页面的有针对性的建议。 例如，请参阅 使用 Lighthouse 优化网站速度。
打开“网络”工具
要充分利用本教程，请打开演示并试用演示页面上的功能。
在新的选项卡或窗口中打开“检查网络活动演示”:
要打开 DevTools，请右击网页，然后选择“检查”。 或者，按 Ctrl+Shift+J (Windows、Linux) 或 Command+Option+J (macOS) 。 DevTools 随即打开。
在 DevTools 的 “活动栏”上，选择“ 网络 ”选项卡。如果该选项卡不可见，请单击“ 更多工具 (
) 按钮：你可能更愿意 将 DevTools 停靠到窗口底部:
网络 工具最初为空。 DevTools 仅在打开后才记录网络活动，自打开 DevTools 以来未发生任何网络活动。
了解网络工具用户界面
网络工具分为三个主要部分：
- 顶部工具栏包含用于自定义工具和筛选网络请求的选项。
- 在顶部工具栏下方， “概述” 图提供了随时间推移的网络流量的高级概述，并允许筛选网络请求。
- 在 概述 图下方， “网络日志 ”部分显示网络活动并允许检查单个请求。
记录网络活动
查看页面导致的网络活动：
刷新网页。 网络工具记录网络日志中的所有网络活动：
网络日志的每一行表示一个资源。 默认情况下，按时间顺序列出资源。 顶部资源通常是主 HTML 文档。 底部资源是最后请求的任何资源。
每个列表示有关资源的信息。 上图会显示默认列。
状态。 响应的 HTTP 状态代码。
类型。 资源类型。
发起程序。 资源请求的原因。 点击“发起程序”列中的链接会转到导致请求的源代码。
时间。 请求的持续时间。
粘滞键。 请求的不同阶段的图形表示形式。 要显示细目，请将鼠标悬停在“瀑布图”上。
请注意， “概述” 图还显示网络活动。 本教程不会使用 概述 图，因此可以将其隐藏。 请参阅 隐藏概述窗格。
打开 DevTools 后，它会记录 网络日志 中的网络活动。
若要演示这一点，请首先查看网络日志 的底部，并记下上一次活动。
现在，点击演示中的“获取数据”按钮。
再次查看网络日志 的底部。 会显示名为
getstarted.json的新资源:
显示详细信息
网络日志的列是可配置的。 可以隐藏未使用的列。 还有许多默认隐藏的列，你可能会发现这些列很有用。
右击网络日志表的标题，然后选择“域”。 现在会显示每个资源的域:
要查看资源的完整 URL，请在“名称”列中将鼠标悬停该资源的单元格上。
模拟较慢的网络连接
用于构建站点的计算机的网络连接可能比用户的移动设备的网络连接速度快。 通过限制页面，可以更好地了解页面在移动设备上加载所花的时间。
选择顶部工具栏中的 “限制 ”下拉列表。 默认情况下，它设置为 “无限制 ”。
选择“慢速 3G”:
长按 “重载 ” (
) (或右键单击“ 刷新) 然后选择” 清空缓存和硬刷新“：
在重复访问时，浏览器通常会从缓存中提供一些文件，从而加快页面加载速度。 空缓存和硬性刷新 会强制浏览器转到所有资源的网络。 使用它来显示第一次访问者如何体验页面加载。
空缓存和硬性刷新 工作流仅在 DevTools 打开时可用。
另请参阅网络功能参考中的模拟慢速网络连接。
捕获屏幕截图
屏幕截图显示网页在加载时的外观。
单击“ (
) ”按钮，然后选中“ 捕获屏幕截图 ”复选框：
使用 空缓存和硬性刷新 工作流再次刷新页面。 如果需要有关如何执行此操作的提醒，请参阅上方的 模拟慢速连接。
屏幕截图 面板提供页面在加载流程中如何查看各点的缩略图:
点击第一个缩略图。 DevTools 会及时显示当时发生的网络活动:
再次单击“ (
”) 并关闭 “捕获屏幕截图 ”复选框以关闭“ 屏幕截图 ”窗格。再次刷新页面。
检查资源的详细信息
选择资源以了解有关它详细信息。
选择
network-tutorial/。 将显示 "标题 "面板。 使用此面板检查 HTTP 标头:
选择 预览 面板。 会显示 HTML 的基本呈现:
当 API 以 HTML 格式返回错误代码时，面板非常有用。 你可能会发现，读取呈现的 HTML 比读取 HTML 源代码更容易，或者在检查图像时更容易读取呈现的 HTML。
选择 响应 面板。 会显示 HTML 源代码:
提示：缩小文件时，选择“响应”面板底部的“格式 (
) ”按钮，以重新设置文件内容的格式，以便提高可读性。例如，如果响应包含缩小的 JSON 数据，请单击“ 格式 ”按钮以重新设置 JSON 语法的格式，以便每个对象属性位于自己的行中。 还可以使用 JSON 查看器 在浏览器选项卡中查看格式化和突出显示的 JSON 响应。请参阅 查看格式化的 JSON。
选择 计时 面板。 会显示资源的网络活动的细目:
单击“ 关闭 (
) 再次查看网络日志：
搜索网络标头和响应
当您需要搜索特定字符串或正则表达式的所有资源的 HTTP 标头和响应时，请使用“搜索”窗格。
例如，假设你想要验证资源是否使用合理的 缓存策略。
选择 “搜索 ” (
) ”。 “搜索”窗格会在网络日志的左侧打开:
键入
no-cache并按 Enter。 “搜索”窗格会列出它在资源标头或内容中找到的所有no-cache实例:
点击结果以查看在其中找到结果的资源。 如果要查看资源的详细信息，请选择直接转到它的结果。 例如，如果在标头中发现查询，则 标题面板 将打开。 如果在内容中找到查询，则“响应”面板会打开:
关闭"搜索"窗格和 "标题" 面板。
筛选资源
DevTools 提供了许多工作流，用于筛选出与手头任务无关的资源。
默认情况下 应 打开"筛选器"工具栏。 如果 “筛选器” 工具栏未打开，请单击“ 筛选 (
) 显示它：
按字符串、正则表达式或属性筛选
“筛选器”文本框支持许多不同类型的筛选。
键入
png到“筛选器”文本框。 只显示包含文本png的文件。 在这种情况下，与筛选器匹配的唯一文件是 PNG 图像。键入
/.*\.[cj]s+$/，这是一个 JavaScript 正则表达式。 DevTools 筛选掉文件名不以 或c结尾j且后跟 1 个或更多s字符的任何资源。键入
-main.css。 DevTools 筛选器出main.css。 如果任何文件与该模式匹配，也会将其筛选掉。键入
larger-than:1000到“筛选器”文本框。 DevTools 筛选出响应小于 1000 字节的资源。有关可筛选属性的完整列表，请参阅 按属性筛选请求。
清除任何文本的“筛选器”文本框。
按资源类型筛选
若要专注于某些类型的文件，如样式表：
选择 CSS。 会筛选出所有其他文件类型:
若要同时显示脚本，请按住 Ctrl (Windows、Linux) 或 command (macOS) ，然后单击“ JS”。
要删除筛选器并再次显示所有资源，请选择 全部。
有关其他筛选工作流，请参阅 筛选请求。
阻止请求
当一些页面资源不可用时，页面有什么样的外观和行为? 它是完全失败，还是仍有点功能？ 阻止查找请求：
按 Ctrl+Shift+P (Windows、Linux) 或 Command+Shift+P (macOS) 打开 命令菜单。
键入
block，选择“ 显示网络请求阻止”，然后按 Enter：
单击“ 添加模式 (
) ，然后键入 main.css，然后单击” 添加“：
刷新页面。 与预期一样，由于已阻止主样式表，因此页面的样式略为混乱。
在网络日志的
main.css行中，红色文本表示已阻止资源:
清除 “启用网络请求阻止 ”复选框。
另请参阅：
- 在网络请求阻止工具中阻止网络请求。
总结
恭喜，你已完成本教程! 现在，你已了解如何使用 Microsoft Edge DevTools 中的 网络 工具。
若要发现更多与检查网络活动相关的 DevTools 功能，请参阅 网络功能参考。
注意
此页面的某些部分是根据 Google 创建和共享的作品所做的修改，并根据 Creative Commons Attribution 4.0 International License 中描述的条款使用。 原始页面 在此处 找到，由 Kayce Basques (Technical Writer、Chrome DevTools & Lighthouse) 创作。
