访问此页面需要授权。 可以尝试 登录 或 更改目录 。 访问此页面需要授权。 可以尝试 更改目录 。 使用 网络 工具确保网页运行所需的资源已按预期下载，并且正确发送对服务器端 API 的请求。 检查单个 HTTP 请求和响应的属性，例如 HTTP 标头、内容或大小。 此为 网络 工具的分步教程演练，用于检查页面的网络活动。 有关与网络相关的 DevTools 功能的概述，请参阅 网络功能参考 。 对于本教程的视频版本，请观看以下视频： 一般情况下，需要确保正确下载资源并按预期发送对服务器端 API 的请求时，请使用 网络 工具。 网络 工具的最常见用例包括： 验证服务器端 API 调用的请求参数和响应。 验证服务器端 API 调用的请求参数和响应。 如果你正在寻找提高页面加载性能的方法， 网络 工具可以帮助了解下载的数据量以及下载数据需要多长时间，但还有许多其他类型的加载性能问题与网络活动无关。 若要进一步调查页面加载性能问题，可以使用： 性能工具 。 请参阅 性能工具：分析网站的性能 。 “问题” 工具。 请参阅 使用问题工具查找和修复问题 。 Lighthouse 工具，可为你提供有关如何改进页面的有针对性的建议。 例如，请参阅 使用 Lighthouse 优化网站速度 。 要充分利用本教程，请打开演示并试用演示页面上的功能。 在新的选项卡或窗口中打开“ 检查网络活动演示 ”: 在新的选项卡或窗口中打开“ 检查网络活动演示 ”: 右键单击网页，然后选择“ 检查 ”。 或者，按 Ctrl+Shift+J (Windows、Linux) 或 Command+Option+J (macOS) 。 DevTools 随即打开。 右键单击网页，然后选择“ 检查 ”。 或者，按 Ctrl+Shift+J (Windows、Linux) 或 Command+Option+J (macOS) 。 在 DevTools 的 “活动栏”上 ，选择“ 网络 ”选项卡。如果该选项卡不可见，请单击“ 更多工具 ( ) 按钮。 在 DevTools 的 “活动栏”上 ，选择“ 网络 ”选项卡。如果该选项卡不可见，请单击“ 更多工具 ( ) 按钮。 （可选）将 DevTools 停靠到窗口底部。 请参阅 将 DevTools 停靠在浏览器底部 ， 请参阅更改 DevTools 放置 (Undock、Dock to bottom、Dock to left) 。 （可选）将 DevTools 停靠到窗口底部。 请参阅 将 DevTools 停靠在浏览器底部 ， 请参阅更改 DevTools 放置 (Undock、Dock to bottom、Dock to left) 。 网络 工具最初为空。 DevTools 仅在打开后才记录网络活动，自打开 DevTools 以来未发生任何网络活动。 顶部工具栏包含用于自定义工具和筛选网络请求的选项。 顶部工具栏包含用于自定义工具和筛选网络请求的选项。 在顶部工具栏下方， “概述” 图提供了随时间推移的网络流量的高级概述，并允许筛选网络请求。 在顶部工具栏下方， “概述” 图提供了随时间推移的网络流量的高级概述，并允许筛选网络请求。 在 概述 图下方， “网络日志 ”部分显示网络活动并允许检查单个请求。 在 概述 图下方， “网络日志 ”部分显示网络活动并允许检查单个请求。 刷新网页。 网络 工具记录网络 日志中的所有网络 活动： 网络日志 的每一行表示一个资源。 默认情况下，按时间顺序列出资源。 顶部资源通常是主 HTML 文档。 底部资源是最后请求的任何资源。 每个列表示有关资源的信息。 上图会显示默认列。 状态 。 响应的 HTTP 状态代码。 类型 。 资源类型。 发起程序 。 资源请求的原因。 点击“ 发起程序 ”列中的链接会转到导致请求的源代码。 时间 。 请求的持续时间。 粘滞键 。 请求的不同阶段的图形表示形式。 要显示细目，请将鼠标悬停在“ 瀑布图 ”上。 请注意， “概述” 图还显示网络活动。 本教程不会使用 概述 图，因此可以将其隐藏。 请参阅 隐藏概述窗格 。 打开 DevTools 后，它会记录 网络日志 中的网络活动。 刷新网页。 网络 工具记录网络 日志中的所有网络 活动： 网络日志 的每一行表示一个资源。 默认情况下，按时间顺序列出资源。 顶部资源通常是主 HTML 文档。 底部资源是最后请求的任何资源。 每个列表示有关资源的信息。 上图会显示默认列。 状态 。 响应的 HTTP 状态代码。 状态 。 响应的 HTTP 状态代码。 发起程序 。 资源请求的原因。 点击“ 发起程序 ”列中的链接会转到导致请求的源代码。 发起程序 。 资源请求的原因。 点击“ 发起程序 ”列中的链接会转到导致请求的源代码。 粘滞键 。 请求的不同阶段的图形表示形式。 要显示细目，请将鼠标悬停在“ 瀑布图 ”上。 粘滞键 。 请求的不同阶段的图形表示形式。 要显示细目，请将鼠标悬停在“ 瀑布图 ”上。 请注意， “概述” 图还显示网络活动。 本教程不会使用 概述 图，因此可以将其隐藏。 请参阅 隐藏概述窗格 。 打开 DevTools 后，它会记录 网络日志 中的网络活动。 若要演示这一点，请首先查看 网络日志 的底部，并记下上一次活动。 若要演示这一点，请首先查看 网络日志 的底部，并记下上一次活动。 现在，点击演示中的“ 获取数据 ”按钮。 现在，点击演示中的“ 获取数据 ”按钮。 再次查看 网络日志 的底部。 会显示名为 getstarted.json 的新资源: 再次查看 网络日志 的底部。 会显示名为 getstarted.json 的新资源: 网络日志的列是可配置的。 可以隐藏未使用的列。 还有许多默认隐藏的列，你可能会发现这些列很有用。 右击网络日志表的标题，然后选择“ 域 ”。 现在会显示每个资源的域: 右击网络日志表的标题，然后选择“ 域 ”。 现在会显示每个资源的域: 要查看资源的完整 URL，请在“ 名称 ”列中将鼠标悬停该资源的单元格上。 要查看资源的完整 URL，请在“ 名称 ”列中将鼠标悬停该资源的单元格上。 用于构建站点的计算机的网络连接可能比用户的移动设备的网络连接速度快。 通过限制页面，可以更好地了解页面在移动设备上加载所花的时间。 单击顶部工具栏中的 “限制 ”下拉列表。 默认情况下 ，未选择任何限制 。 单击顶部工具栏中的 “限制 ”下拉列表。 默认情况下 ，未选择任何限制 。 选择 3G ： “网络 ”工具的选项卡上会显示一个警告图标，提醒你已启用限制。 “网络 ”工具的选项卡上会显示一个警告图标，提醒你已启用限制。 长按 “重载 ” ( ) (或右键单击“ 刷新 ) 然后选择” 清空缓存和硬刷新 “： 长按 “重载 ” ( ) (或右键单击“ 刷新 ) 然后选择” 清空缓存和硬刷新 “： 在重复访问时，浏览器通常会从 缓存 中提供一些文件，从而加快页面加载速度。 空缓存和硬性刷新 会强制浏览器转到所有资源的网络。 使用它来显示第一次访问者如何体验页面加载。 空缓存和硬性刷新 工作流仅在 DevTools 打开时可用。 另请参阅 网络功能参考 中的 模拟慢速网络连接 。 屏幕截图显示网页在加载时的外观。 单击“ ( ) ”按钮，然后选中“ 捕获屏幕截图 ”复选框： 单击“ ( ) ”按钮，然后选中“ 捕获屏幕截图 ”复选框： 使用 空缓存和硬性刷新 工作流再次刷新页面。 如果需要有关如何执行此操作的提醒，请参阅上方的 模拟慢速连接 。 屏幕截图 面板提供页面在加载流程中如何查看各点的缩略图: 使用 空缓存和硬性刷新 工作流再次刷新页面。 如果需要有关如何执行此操作的提醒，请参阅上方的 模拟慢速连接 。 屏幕截图 面板提供页面在加载流程中如何查看各点的缩略图: 点击第一个缩略图。 DevTools 会及时显示当时发生的网络活动: 点击第一个缩略图。 DevTools 会及时显示当时发生的网络活动: 再次单击“ ( ”) 并关闭 “捕获屏幕截图 ”复选框以关闭“ 屏幕截图 ”窗格。 再次单击“ ( ”) 并关闭 “捕获屏幕截图 ”复选框以关闭“ 屏幕截图 ”窗格。

选择资源以了解有关它详细信息。 选择 network-tutorial/ 。 将显示 "标题 "面板。 使用此面板检查 HTTP 标头: 选择 network-tutorial/ 。 将显示 "标题 "面板。 使用此面板检查 HTTP 标头: 选择 预览 面板。 会显示 HTML 的基本呈现: 当 API 以 HTML 格式返回错误代码时，面板非常有用。 你可能会发现，读取呈现的 HTML 比读取 HTML 源代码更容易，或者在检查图像时更容易读取呈现的 HTML。 选择 预览 面板。 会显示 HTML 的基本呈现: 当 API 以 HTML 格式返回错误代码时，面板非常有用。 你可能会发现，读取呈现的 HTML 比读取 HTML 源代码更容易，或者在检查图像时更容易读取呈现的 HTML。 选择 响应 面板。 会显示 HTML 源代码: 提示：缩小文件时，选择 “响应 ”面板底部的“ 格式 ( ) ”按钮，以重新设置文件内容的格式，以便提高可读性。 例如，如果响应包含缩小的 JSON 数据，请单击“ 格式 ”按钮以重新设置 JSON 语法的格式，以便每个对象属性位于自己的行中。 还可以使用 JSON 查看器 在浏览器选项卡中查看格式化和突出显示的 JSON 响应。请参阅 使用格式查看 JSON 文件或服务器响应 。 选择 响应 面板。 会显示 HTML 源代码: 提示：缩小文件时，选择 “响应 ”面板底部的“ 格式 ( ) ”按钮，以重新设置文件内容的格式，以便提高可读性。 例如，如果响应包含缩小的 JSON 数据，请单击“ 格式 ”按钮以重新设置 JSON 语法的格式，以便每个对象属性位于自己的行中。 还可以使用 JSON 查看器 在浏览器选项卡中查看格式化和突出显示的 JSON 响应。请参阅 使用格式查看 JSON 文件或服务器响应 。 选择 计时 面板。 会显示资源的网络活动的细目: 选择 计时 面板。 会显示资源的网络活动的细目: 单击“ 关闭 ( ) 再次查看网络日志： 单击“ 关闭 ( ) 再次查看网络日志： 当您需要搜索特定字符串或正则表达式的所有资源的 HTTP 标头和响应时，请使用“ 搜索 ”窗格。 例如，使用“ 搜索 ”窗格验证资源是否使用了正确的缓存策略，如下所示： 单击 “搜索 ( ) 按钮。 “ 搜索 ”窗格将在 网络日志 左侧打开： 单击 “搜索 ( ) 按钮。 “ 搜索 ”窗格将在 网络日志 左侧打开： 键入 no-cache 并按 Enter 。 “ 搜索 ”窗格列出了它在资源标头或内容中找到的所有实例 no-cache ： 键入 no-cache 并按 Enter 。 “ 搜索 ”窗格列出了它在资源标头或内容中找到的所有实例 no-cache ： 点击结果以查看在其中找到结果的资源。 如果要查看资源的详细信息，请选择直接转到它的结果。 例如，如果在标头中找到查询，则会打开“ 标头 ”选项卡： 如果在内容中发现查询，将打开“ 响应 ”选项卡。 点击结果以查看在其中找到结果的资源。 如果要查看资源的详细信息，请选择直接转到它的结果。 例如，如果在标头中找到查询，则会打开“ 标头 ”选项卡： 如果在内容中发现查询，将打开“ 响应 ”选项卡。 单击右侧的“ 关闭 (X) ”按钮，关闭“ 搜索 ”窗格。 单击右侧的“ 关闭 (X) ”按钮，关闭“ 搜索 ”窗格。 单击左侧的“ 关闭 (X) ”按钮，关闭“ 标题 ”窗格。 单击左侧的“ 关闭 (X) ”按钮，关闭“ 标题 ”窗格。 MDN 处的 HTTP 缓存 。 DevTools 提供了许多工作流，用于筛选出与手头任务无关的资源。 默认情况下 应 打开"筛选器"工具栏。 如果 “筛选器” 工具栏未打开，请单击“ 筛选 ( ) 显示它： 按字符串、正则表达式或属性筛选 “ 筛选器 ”文本框支持许多不同类型的筛选。 键入 png 到“ 筛选器 ”文本框。 只显示包含文本 png 的文件。 在这种情况下，与筛选器匹配的唯一文件是 PNG 图像。 键入 png 到“ 筛选器 ”文本框。 只显示包含文本 png 的文件。 在这种情况下，与筛选器匹配的唯一文件是 PNG 图像。 键入 /.*\.[cj]s+$/ ，这是一个 JavaScript 正则表达式。 DevTools 筛选掉文件名不以 或 c 结尾 j 且后跟 1 个或更多 s 字符的任何资源。 键入 /.*\.[cj]s+$/ ，这是一个 JavaScript 正则表达式。 DevTools 筛选掉文件名不以 或 c 结尾 j 且后跟 1 个或更多 s 字符的任何资源。 键入 -main.css 。 DevTools 筛选器出 main.css 。 如果任何文件与该模式匹配，也会将其筛选掉。 键入 -main.css 。 DevTools 筛选器出 main.css 。 如果任何文件与该模式匹配，也会将其筛选掉。 键入 larger-than:1000 到“ 筛选器 ”文本框。 DevTools 筛选出响应小于 1000 字节的资源。 有关可筛选属性的完整列表，请参阅 按属性筛选请求 。 键入 larger-than:1000 到“ 筛选器 ”文本框。 DevTools 筛选出响应小于 1000 字节的资源。 有关可筛选属性的完整列表，请参阅 按属性筛选请求 。 清除任何文本的“ 筛选器 ”文本框。 清除任何文本的“ 筛选器 ”文本框。 若要专注于某些类型的文件，如样式表： 选择 CSS 。 会筛选出所有其他文件类型: 选择 CSS 。 会筛选出所有其他文件类型: 若要同时显示脚本，请按住 Ctrl (Windows、Linux) 或 command (macOS) ，然后单击“ JS ”。 若要同时显示脚本，请按住 Ctrl (Windows、Linux) 或 command (macOS) ，然后单击“ JS ”。 要删除筛选器并再次显示所有资源，请选择 全部 。 要删除筛选器并再次显示所有资源，请选择 全部 。 有关其他筛选工作流，请参阅 筛选请求 。 当一些页面资源不可用时，页面有什么样的外观和行为? 它是完全失败，还是仍有点功能？ 阻止查找请求： 按 Ctrl+Shift+P (Windows、Linux) 或 Command+Shift+P (macOS) 打开 命令菜单 。 按 Ctrl+Shift+P (Windows、Linux) 或 Command+Shift+P (macOS) 打开 命令菜单 。 键入 block ，选择“ 显示网络请求阻止 ”，然后按 Enter ： 网络请求阻止 工具在 DevTools 底部的 “快速视图 ”面板中打开。 键入 block ，选择“ 显示网络请求阻止 ”，然后按 Enter ： 网络请求阻止 工具在 DevTools 底部的 “快速视图 ”面板中打开。 单击“ 添加模式 ( ) 按钮，键入 main.css ，然后单击“ 添加 ”按钮： 单击“ 添加模式 ( ) 按钮，键入 main.css ，然后单击“ 添加 ”按钮： 刷新页面。 与预期一样，由于已阻止主样式表，因此页面的样式略为混乱。 在网络日志的 main.css 行中，红色文本表示已阻止资源: 刷新页面。 与预期一样，由于已阻止主样式表，因此页面的样式略为混乱。 在网络日志的 main.css 行中，红色文本表示已阻止资源: 清除 “启用网络请求阻止 ”复选框。 清除 “启用网络请求阻止 ”复选框。 在网络请求阻止 工具中阻止网络请求 。 恭喜，你已完成本教程! 现在，你已了解如何使用 Microsoft Edge DevTools 中的 网络 工具。 若要发现更多与检查网络活动相关的 DevTools 功能，请参阅 网络功能参考 。 此页面的某些部分是根据 Google 创建和共享的 作品所做的修改，并根据 Creative Commons Attribution 4.0 International License 中描述的条款使用。 原始页面 在此处 找到，由凯斯·巴斯克创作。 此作品根据 Creative Commons 署名 4.0 国际许可获得许可 。 想要尝试使用 Ask Learn 阐明或指导你完成本主题？ Last updated on 2025-07-16