访问此页面需要授权。 可以尝试 登录 或 更改目录 。 访问此页面需要授权。 可以尝试 更改目录 。 网络 工具具有以下功能，用于检查网页的网络活动。 有关 网络 工具的分步演练和简介，请参阅 检查网络活动 。 记录网络请求 停止记录网络请求 清除请求 跨页面加载保存请求 在页面加载期间记录屏幕截图 重新发送请求 编辑请求并将其重新发送为提取调用 编辑请求并将其重新发送为提取调用 更改加载行为 通过禁用浏览器缓存模拟首次访问者 从网络条件工具禁用浏览器缓存 手动清除浏览器缓存 模拟脱机 模拟慢速网络连接 创建自定义限制配置文件 限制 WebSocket 连接 使用网络条件工具模拟慢速网络连接 手动清除浏览器 Cookie 替代 HTTP 响应标头 替代用户代理 通过禁用浏览器缓存模拟首次访问者 从网络条件工具禁用浏览器缓存 模拟慢速网络连接 创建自定义限制配置文件 限制 WebSocket 连接 使用网络条件工具模拟慢速网络连接 限制 WebSocket 连接 使用网络条件工具模拟慢速网络连接 筛选请求 按属性筛选请求 按类型筛选请求 按时间筛选请求 隐藏数据 URL 隐藏扩展 URL 仅显示具有阻止响应 Cookie 的请求 仅显示阻止的请求 仅显示第三方请求 仅显示具有阻止响应 Cookie 的请求 排序请求 按列排序 按活动阶段排序 分析请求 显示请求日志 添加或删除列 为响应标头添加自定义列 按内联帧对请求进行分组 显示请求的计时关系 分析 WebSocket 连接的消息 分析流中的事件 显示响应正文的预览 显示响应正文 显示 HTTP 标头 查看 HTTP 标头源 临时标头警告 查看请求有效负载 (查询字符串参数和表单数据) 查看有效负载源 显示 URL 编码的查询字符串参数 显示 Cookie 显示请求的计时细分 预览计时细分 计时细分阶段说明 分析服务工作进程请求路由 显示发起程序和依赖项 显示加载事件 显示请求总数 显示总下载大小 显示导致请求的堆栈跟踪 显示资源的未压缩大小 显示请求日志 添加或删除列 为响应标头添加自定义列 分析 WebSocket 连接的消息 显示 HTTP 标头 查看 HTTP 标头源 临时标头警告 查看请求有效负载 (查询字符串参数和表单数据) 查看有效负载源 显示 URL 编码的查询字符串参数 显示 URL 编码的查询字符串参数 显示请求的计时细分 预览计时细分 计时细分阶段说明 分析服务工作进程请求路由 导出请求数据 将所有网络请求保存到 HAR 文件 将 HAR 文件导入开发工具进行分析 将网络请求复制到剪贴板 将格式化响应 JSON 复制到剪贴板 将属性值从网络请求复制到剪贴板 将所有网络请求保存到 HAR 文件 将 HAR 文件导入开发工具进行分析 将格式化响应 JSON 复制到剪贴板 将属性值从网络请求复制到剪贴板 更改网络工具的布局 隐藏“筛选器”窗格 使用大请求行 隐藏概述窗格 默认情况下，只要开发人员工具处于打开状态，它就会在 网络 工具中记录所有网络请求。 转到网页，如新窗口或选项卡中的“ 检查网络活动 ”演示页面。 转到网页，如新窗口或选项卡中的“ 检查网络活动 ”演示页面。 右键单击该网页，然后选择 “检查 ”。 DevTools 随即打开。 右键单击该网页，然后选择 “检查 ”。 在 DevTools 中，选择 网络 工具。 在 DevTools 中，选择 网络 工具。 刷新网页。 “ 停止记录网络日志” 按钮为红色且可用： “ 停止记录网络日志” 按钮为红色且可用： 在 网络 工具上，单击 停止记录网络日志 ( 。 它变为灰色，表示 DevTools 不再记录请求。 在 网络 工具上，单击 停止记录网络日志 ( 。 它变为灰色，表示 DevTools 不再记录请求。 在 网络 工具处于焦点时，按 Ctrl+E (Windows、Linux) 或 Command+E (macOS) 。 在 网络 工具处于焦点时，按 Ctrl+E (Windows、Linux) 或 Command+E (macOS) 。 要清除“ 请求” 表中的所有请求，请在“ 网络 ”工具中单击 清除网络日志 (清除) 按钮 ： 或者，在 网络 工具具有焦点时，按 Ctrl+L (Windows、Linux、macOS) 或 Command+K (macOS) 。 若要跨页面加载保存请求，请在 “网络 ”工具上选中“ 保留日志 ”复选框： 开发人员工具将保存所有请求，直到禁用 保留日志 。 您可以捕获屏幕截图以分析在等待页面加载时为用户显示的内容。 转到新窗口或选项卡中的网页，例如 TODO 应用 。 转到新窗口或选项卡中的网页，例如 TODO 应用 。 右键单击该网页，然后选择 “检查 ”。 DevTools 随即打开。 右键单击该网页，然后选择 “检查 ”。 在 DevTools 中，打开 网络 工具。 在 DevTools 中，打开 网络 工具。 在 网络 工具的右上角，单击 网络设置 (齿轮) 图标。 将显示一行复选框。 在 网络 工具的右上角，单击 网络设置 (齿轮) 图标。 将显示一行复选框。 选中“ 记录屏幕截图 ”复选框： 选中“ 记录屏幕截图 ”复选框： 当 网络 工具具有焦点时，按 Ctrl+F5 刷新页面。 屏幕截图在页面加载期间捕获，缩略图显示在复选框行下方。 可按如下方式与屏幕截图进行交互。 当 网络 工具具有焦点时，按 Ctrl+F5 刷新页面。 屏幕截图在页面加载期间捕获，缩略图显示在复选框行下方。 可按如下方式与屏幕截图进行交互。 将鼠标悬停在屏幕截图上，显示捕获该屏幕截图的点。 “ 概述 ”图表窗格上将显示一条黄色垂直线。 将鼠标悬停在屏幕截图上，显示捕获该屏幕截图的点。 “ 概述 ”图表窗格上将显示一条黄色垂直线。 单击屏幕截图的缩略图可筛选出捕获屏幕截图后发生的任何请求。 单击屏幕截图的缩略图可筛选出捕获屏幕截图后发生的任何请求。 双击屏幕截图缩略图可放大并查看屏幕截图。 双击屏幕截图缩略图可放大并查看屏幕截图。 按 Esc 关闭屏幕截图查看器。 按 Esc 关闭屏幕截图查看器。 要在不重新加载网页的情况下再次发送网络请求，请使用 Network 工具的 Requests 表中的 Resend 命令。 Resend 命令适用于以下请求类型： 在新窗口或选项卡中转到网页，例如 网络工具参考演示 。 在新窗口或选项卡中转到网页，例如 网络工具参考演示 。 右键单击该网页，然后选择 “检查 ”。 DevTools 随即打开。 右键单击该网页，然后选择 “检查 ”。 在 DevTools 中，选择 网络 工具。 在 DevTools 中，选择 网络 工具。 刷新网页。 在 网络 工具的 请求 表中，将显示以下项的行： devtools-network-reference/ ( index.html ) style.css script.js 在 网络 工具的 请求 表中，将显示以下项的行： devtools-network-reference/ ( index.html ) 在演示网页中，单击“ 发送 XHR 请求 ”按钮。 在 网络 工具的 请求 表中，将添加一 data.json 行。 发起程序 列显示 script.js:20 。 在演示网页中，单击“ 发送 XHR 请求 ”按钮。 在 网络 工具的 请求 表中，将添加一 data.json 行。 发起程序 列显示 script.js:20 。 在 “请求” 表中，右键单击请求 data.json ，然后选择“ 重新发送” 。 或者，选择请求，然后按 R 。 在 网络 工具的 请求 表中，添加了第二 data.json 行。 发 起程序 列显示其他 ： 在 “请求” 表中，右键单击请求 data.json ，然后选择“ 重新发送” 。 或者，选择请求，然后按 R 。 在 网络 工具的 请求 表中，添加了第二 data.json 行。 发 起程序 列显示其他 ： 显示发起程序和依赖项 ，如下所示。 在 “检查网络活动” 中 记录网络活动 。 DevTools 以 XHR 的形式重新发送 XHR 请求。 DevTools 会在发送之前将其他受支持的请求类型转换为 Fetch 请求。 单击演示的 “发送 XHR 请求 ”按钮 (使 JavaScript) 发送请求后，“ 复制堆叠跟踪” 菜单项将显示在请求的右键单击 > “复制” 菜单中。 请参阅下面的 将网络请求复制到剪贴板 。 编辑请求并将其重新发送为提取调用 要在重新发送网络请求之前对其进行编辑，请使用 “网络 ” 工具的 “请求 ” 表中的 编辑并重新发送为 fetch 命令。 此命令会导致 DevTools 将网络请求复制为 控制台 工具中的调用 fetch() ，你可以在控制台工具中修改和发送该请求。 “ 编辑并重新发送为提取” 命令适用于以下请求类型： 与将 XHR 请求重新发送为 XHR 的 Resend 命令不同， Edit 和 resend as fetch 会将 XHR 和所有其他受支持的请求类型 fetch() 转换为调用。 “请求”（ Requests ） 表中可选的 “执行上下文”（Execution context ） 列显示发送每个请求的执行上下文。 要编辑请求并将其作为提取调用重新发送： 在新窗口或选项卡中转到网页，例如 网络工具参考演示 。 在新窗口或选项卡中转到网页，例如 网络工具参考演示 。 右键单击该网页，然后选择 “检查 ”。 DevTools 随即打开。 右键单击该网页，然后选择 “检查 ”。 在 DevTools 中，选择 网络 工具。 在 DevTools 中，选择 网络 工具。 刷新网页。 在 网络 工具的 请求 表中，将显示以下项的行： devtools-network-reference/ ( index.html ) style.css script.js 在 网络 工具的 请求 表中，将显示以下项的行： devtools-network-reference/ ( index.html ) 在演示网页中，单击“ 发送 XHR 请求 ”按钮。 在 网络 工具的 请求 表中，将添加一 data.json 行。 在演示网页中，单击“ 发送 XHR 请求 ”按钮。 在 网络 工具的 请求 表中，将添加一 data.json 行。 在 “请求” 表中，右键单击要修改的请求（例如请求）， data.json 然后选择编辑 并重新发送为提取 。 控制台 工具在 DevTools 底部的 “箱 ”中打开。 重现请求的可 fetch() 编辑调用将添加到 控制台 提示符中。 生成的代码包括标识原始请求及其执行上下文的注释。 生成代码上方的消息（例如 对 data.json 的 GET 请求的可重新发送副本 ）具有 (链接 “ 网络 ”工具中显示对原始请求的 URL) 请求： 注意： 控制台 提示中 一次只能挂起一个请求。 如果选择“ 编辑”并重新发送为 另一个请求的提取，则新 fetch() 调用将替换当前 控制台 提示，而不会显示警告。 在 “请求” 表中，右键单击要修改的请求（例如请求）， data.json 然后选择编辑 并重新发送为提取 。 控制台 工具在 DevTools 底部的 “箱 ”中打开。 重现请求的可 fetch() 编辑调用将添加到 控制台 提示符中。 生成的代码包括标识原始请求及其执行上下文的注释。 生成代码上方的消息（例如 对 data.json 的 GET 请求的可重新发送副本 ）具有 (链接 “ 网络 ”工具中显示对原始请求的 URL) 请求： 注意： 控制台 提示中 一次只能挂起一个请求。 如果选择“ 编辑”并重新发送为 另一个请求的提取，则新 fetch() 调用将替换当前 控制台 提示，而不会显示警告。 如果生成的注释指示你选择执行上下文，请使用 控制台 工具栏中的 JavaScript 上下文 下拉列表选择执行上下文 (，例如网络请求作为提取调用重新发送的 顶级 ) 。 如果生成的注释指示你选择执行上下文，请使用 控制台 工具栏中的 JavaScript 上下文 下拉列表选择执行上下文 (，例如网络请求作为提取调用重新发送的 顶级 ) 。 修改生成 fetch() 的调用中的 URL、方法、标头或正文。 不允许调用设置的某些请求标头 fetch() 将保留为信息注释。 修改生成 fetch() 的调用中的 URL、方法、标头或正文。 不允许调用设置的某些请求标头 fetch() 将保留为信息注释。 按 Enter 发送修改后的请求。 按 Enter 发送修改后的请求。 新请求将显示在 网络 工具的 请求 表中。 “名称 ”列中的终端图标将请求标识为源自 控制台 。 通过禁用浏览器缓存模拟首次访问者 要模拟首次用户体验您的网站的方式，请启用禁用 缓存 复选框。 开发工具禁用浏览器缓存。 此功能可以更准确地模拟首次用户的体验，因为请求会在重复访问时从浏览器缓存提供。 在 网络 工具中，可以在 DevTools 底部的 “快速视图 ”面板中打开网络 条件 工具，然后从那里禁用浏览器缓存： 在 网络 工具中，单击 更多网络条件 (更多 ) 按钮。 网络条件 工具在 DevTools 底部的 “快速视图 ”面板中打开。 在 网络 工具中，单击 更多网络条件 (更多 ) 按钮。 网络条件 工具在 DevTools 底部的 “快速视图 ”面板中打开。 在 网络条件 工具中，选择禁用 缓存 复选框： 在 网络条件 工具中，选择禁用 缓存 复选框： 若要随时手动清除浏览器缓存，请右键单击 “请求” 表中的任意位置，然后选择“ 清除浏览器缓存” ： 一类名为 Progressive Web 应用 ( PWA) 的 Web 应用能够在 服务工作线程 的帮助下脱机运行。 在构建此类应用时，你可能会发现快速模拟没有数据连接的设备非常有用。 若要模拟脱机网络体验，请选择“ 无限制 ”下拉菜单>“预 设 > 脱机 ”。 若要模拟快速 4G、慢速 4G 或 3G，请从顶部操作栏的 “限制 ”下拉菜单中选择相应的预设： 要添加自己的自定义预设，请单击“ 限制 ”菜单，然后选择“ 自定义 > 添加 ”。 “网络 ”工具的选项卡上会显示一个警告图标，提醒已启用限制： 在“ 检查网络”活动 中 模拟较慢的网络连接 。 除了慢速或快速 4G 等预设，还可以添加自己的自定义限制配置文件。 转到网页，如新窗口或选项卡中的“ 检查网络活动 ”演示页面。 转到网页，如新窗口或选项卡中的“ 检查网络活动 ”演示页面。 右键单击网页，然后选择 “检查” 。 DevTools 随即打开。 右键单击网页，然后选择 “检查” 。 在“ 限制” 菜单的 “自定义 ”部分中，选择 “添加” 。 或者，选择 “自定义和控制 DevTools > 设置 > 限制 ”。 此时将打开“DevTools 设置” 页，并选择“ 限制 ”页。 在“ 限制” 菜单的 “自定义 ”部分中，选择 “添加” 。 或者，选择 “自定义和控制 DevTools > 设置 > 限制 ”。 此时将打开“DevTools 设置” 页，并选择“ 限制 ”页。 在 网络限制配置文件 部分中，单击 添加配置文件 按钮。 示例值如下所示，将在下一部分中使用。 在 网络限制配置文件 部分中，单击 添加配置文件 按钮。 示例值如下所示，将在下一部分中使用。 在 “配置文件名称 ”文本框中，输入 10kbps 。 在 “配置文件名称 ”文本框中，输入 10kbps 。 在 “下载 ”文本框中，输入 10 (表示 10 kbit/s) 。 在 “下载 ”文本框中，输入 10 (表示 10 kbit/s) 。 在 “上传 ”文本框中，输入 10 (表示 10 kbit/s) 。 在 “上传 ”文本框中，输入 10 (表示 10 kbit/s) 。 在 “延迟 ”文本框中，输入 10 (表示 10 毫秒) 。 在 “延迟 ”文本框中，输入 10 (表示 10 毫秒) 。 在数据 包丢失 文本框中，输入 1 (表示 1%) 。 在数据 包丢失 文本框中，输入 1 (表示 1%) 。 在 “数据包队列长度 ”文本框中，输入 10 。 在 “数据包队列长度 ”文本框中，输入 10 。 选中“ 数据包重新排序 ”复选框： 选中“ 数据包重新排序 ”复选框： 单击“添加” 按钮。 将显示自定义限制配置文件： 在 “设置 ”窗格中，单击 “关闭 (X) ”按钮。 在 “设置 ”窗格中，单击 “关闭 (X) ”按钮。 在 “限制” 下拉菜单的 “自定义 ”部分中，选择自定义限制配置文件，例如 10kbps ： “ 网络 ”选项卡中显示一个警告 ( ) 图标，提醒已启用限制。 在 “限制” 下拉菜单的 “自定义 ”部分中，选择自定义限制配置文件，例如 10kbps ： “ 网络 ”选项卡中显示一个警告 ( ) 图标，提醒已启用限制。 在 “限制 CPU 或网络” 中 设置自定义网络限制配置文件 。 除了 HTTP 请求，DevTools 还可以限制 WebSocket 连接。 我们将使用在上一节中创建的慢速自定义限制配置文件来显示节流 WebSocket 连接在网页上的影响。 观察 WebSocket 限制： 执行上一部分 创建自定义限制配置文件 中的步骤。 执行上一部分 创建自定义限制配置文件 中的步骤。 在新窗口或选项卡中转到使用 WebSocket 的页面，如 Online WebSocket Tester 。 在新窗口或选项卡中转到使用 WebSocket 的页面，如 Online WebSocket Tester 。 在页面上，建立 WebSocket 连接。 如果使用 联机 WebSocket Tester 网页，请单击 “连接 ”按钮。 如果未创建 PieSocket 帐户来获取 API 令牌，则网页将显示“Connection Established - {”error“：”Unknown api key“}”。 如果您创建 PieSocket 帐户来获取 API 令牌，则网页仅显示“已建立连接”。 在页面上，建立 WebSocket 连接。 如果使用 联机 WebSocket Tester 网页，请单击 “连接 ”按钮。 如果未创建 PieSocket 帐户来获取 API 令牌，则网页将显示“Connection Established - {”error“：”Unknown api key“}”。 如果您创建 PieSocket 帐户来获取 API 令牌，则网页仅显示“已建立连接”。 右键单击网页，然后选择 “检查” 。 DevTools 随即打开。 右键单击网页，然后选择 “检查” 。 在 DevTools 的 网络 工具中，在“ 限制” 下拉菜单中，选择 “自定义 > 10kbps ”。 该选项是在上一部分 创建自定义限制配置文件 中创建的。 在 DevTools 的 网络 工具中，在“ 限制” 下拉菜单中，选择 “自定义 > 10kbps ”。 该选项是在上一部分 创建自定义限制配置文件 中创建的。 在 联机 WebSocket 测试程序 网页的消息文本框中，删除“ 无限制的 DevTools ”，然后输入“ 具有限制的 DevTools ”。 在 联机 WebSocket 测试程序 网页的消息文本框中，删除“ 无限制的 DevTools ”，然后输入“ 具有限制的 DevTools ”。 在 联机 WebSocket 测试程序 网页中，单击“ 发送” 按钮。 联机 WebSocket 测试程序 网页内的控制台显示 具有限制的 DevTools 。 在 联机 WebSocket 测试程序 网页中，单击“ 发送” 按钮。 联机 WebSocket 测试程序 网页内的控制台显示 具有限制的 DevTools 。 在 网络 工具顶部，选择下方) 所示 ( 套接字 筛选器按钮。 在 网络 工具顶部，选择下方) 所示 ( 套接字 筛选器按钮。 在表中，单击连接名称，例如 channel_123？api_key=... 。 将显示选项卡。 在表中，单击连接名称，例如 channel_123？api_key=... 。 选择“ 消息 ”选项卡 (如下所示) 。 显示在客户端和服务器之间发送的 WebSocket 消息。 “时间” 列显示接收或发送消息的时间。 这些时间值反映了受限制的网络连接。 选择“ 消息 ”选项卡 (如下所示) 。 显示在客户端和服务器之间发送的 WebSocket 消息。 “时间” 列显示接收或发送消息的时间。 这些时间值反映了受限制的网络连接。 在 网络 工具中，可以在 DevTools 底部的 “快速视图 ”面板中打开网络 条件 工具，然后从那里限制网络连接： 在 网络 工具中，单击 更多网络条件 ( ) 按钮。 网络条件 工具在 DevTools 底部的 “快速视图 ”面板中打开。 在 网络 工具中，单击 更多网络条件 ( ) 按钮。 网络条件 工具在 DevTools 底部的 “快速视图 ”面板中打开。 在 网络条件 工具的网络 限制 菜单中，选择连接速度。 在 网络条件 工具的网络 限制 菜单中，选择连接速度。 若要随时手动清除浏览器 Cookie，请右键单击 “请求” 表中的任意位置，然后选择“ 清除浏览器 Cookie” 。 使用本地副本替代网页资源 (“替代”选项卡) 在 “本地替代 Web 内容和 HTTP 响应标头” 中的 文件和 HTTP 响应标头 。 在 网络 工具中，单击 更多网络条件 ( 按钮。 网络条件 工具在 DevTools 底部的 “快速视图 ”面板中打开。 在 网络 工具中，单击 更多网络条件 ( 按钮。 网络条件 工具在 DevTools 底部的 “快速视图 ”面板中打开。 在 网络条件 工具中，清除 使用浏览器默认复 选框。 其他控件变为可用。 在 网络条件 工具中，清除 使用浏览器默认复 选框。 其他控件变为可用。 从菜单中选择用户代理选项，或在文本框中输入自定义用户代理。 从菜单中选择用户代理选项，或在文本框中输入自定义用户代理。 如果你的网站使用用户代理客户端提示，并且你想要测试它们，则可以在 网络条件 工具中或在设备 仿真 (设备仿真) 中设置它们。 要在 网络条件 工具中设置用户代理客户端提示，请执行以下操作： 在 网络 工具中，单击 更多网络条件 (“ 按钮。 网络条件 工具在 DevTools 底部的 “快速视图 ”面板中打开。 在 网络 工具中，单击 更多网络条件 (“ 按钮。 网络条件 工具在 DevTools 底部的 “快速视图 ”面板中打开。 在 “用户代理 ”部分中，清除“ 使用浏览器默认值 ”复选框，然后展开“ 用户代理客户端提示 ”： 在 “用户代理 ”部分中，清除“ 使用浏览器默认值 ”复选框，然后展开“ 用户代理客户端提示 ”： 在 用户代理 下拉列表中，选择预定义的浏览器和设备。 或者，接受 “自定义...” 的默认值，并在“ 输入自定义用户代理 ”文本框中输入信息。 在 用户代理 下拉列表中，选择预定义的浏览器和设备。 或者，接受 “自定义...” 的默认值，并在“ 输入自定义用户代理 ”文本框中输入信息。 对于预定义或自定义) (选项，请按如下所示指定用户代理客户端提示： 品牌 和 版本， 例如 Edge 和 92 。 要添加多个品牌/版本对，请点击 + 添加品牌 。 完整浏览器版本 ，如 92.0.1111.0 。 平台 和 版本， 例如 Windows 和 10.0 。 x86 等 体系结构 。 设备模型 ，例如 Galaxy Nexus 。 可以设置或更改任何用户代理客户端提示;没有必需的值。 对于预定义或自定义) (选项，请按如下所示指定用户代理客户端提示： 品牌 和 版本， 例如 Edge 和 92 。 要添加多个品牌/版本对，请点击 + 添加品牌 。 完整浏览器版本 ，如 92.0.1111.0 。 平台 和 版本， 例如 Windows 和 10.0 。 设备模型 ，例如 Galaxy Nexus 。 可以设置或更改任何用户代理客户端提示;没有必需的值。 要验证更改，请单击“ 控制台 ”并键入 navigator.userAgentData 。 根据需要展开结果以查看对用户代理数据的更改。 要验证更改，请单击“ 控制台 ”并键入 navigator.userAgentData 。 根据需要展开结果以查看对用户代理数据的更改。 从 网站检测 Microsoft Edge 的用户 代理客户端提示 。 若要跨请求标头、有效负载和响应进行搜索： 在 网络 工具中，单击 搜索 ( ) 按钮。 或者， (Windows Linux) 按 Ctrl+F ， (macOS) 按 Command+F 。 搜索 选项卡将在 网络 工具的左侧打开。 在 网络 工具中，单击 搜索 ( ) 按钮。 或者， (Windows Linux) 按 Ctrl+F ， (macOS) 按 Command+F 。 搜索 选项卡将在 网络 工具的左侧打开。 在 “查找 ”文本框中，输入查询字符串，然后按 Enter 。 （可选）单击“ 区分大小写 ”按钮以打开区分大小写。 （可选）单击 “正则表达式 ”按钮以打开正则表达式。 在 “查找 ”文本框中，输入查询字符串，然后按 Enter 。 （可选）单击“ 区分大小写 ”按钮以打开区分大小写。 （可选）单击 “正则表达式 ”按钮以打开正则表达式。 单击其中一个搜索结果。 网络 工具以黄色突出显示匹配的请求。 网络 工具还会打开 标头 或 响应 选项卡，并突出显示匹配的字符串（如果有）。 单击其中一个搜索结果。 网络 工具以黄色突出显示匹配的请求。 网络 工具还会打开 标头 或 响应 选项卡，并突出显示匹配的字符串（如果有）。 若要刷新搜索结果，请在 “搜索 ”选项卡中单击“ 刷新 ( ) “按钮。 若要清除搜索结果，请在 “搜索 ”选项卡中单击 “清除搜索 ” (“ ) ”按钮。 有关在 DevTools 中搜索的所有方法的详细信息，请参阅 使用搜索工具查找页面的源文件 可以按属性、类型或时间筛选请求，并且可以隐藏数据 URL。 “ 更多筛选器” 下拉列表包含以下选项和状态复选标记： 下拉列表的左侧有一个数字，指示在下拉列表中选择了多少个筛选器。 使用 “筛选器” 文本框按属性（如请求的域或大小）筛选请求。 如果未显示文本框，则“ 筛选器 ”窗格可能已隐藏;请参阅下面的 “隐藏筛选器”窗格 。 要反转过滤器，请选中 过滤器 框旁边的 反转 复选框。 您可以通过用空格分隔每个属性来同时使用多个属性。 例如， mime-type:image/png larger-than:1K 显示大于 1 KB 的所有 PNG。 多属性筛选器相当于 AND 操作。 OR 不支持操作。 若要按请求类型筛选请求，请单击 “网络 ”工具上的按钮： 全部 、 Fetch/XHR、 Doc 、 CSS 、 JS 、 字体 、 Img 、 媒体 、 清单 、 WS (WebSocket) 、 Wasm (WebAssembly) 或 “其他” (此处未列出的任何其他类型) 。 如果按钮未显示，则“ 筛选器 ”窗格可能已隐藏。 请参阅下面的 隐藏“筛选器”窗格 。 若要同时启用多个类型筛选器，请在 Windows (按住 Ctrl 、Linux) 或 Command (macOS) ，然后单击筛选器。 在 “概述 ”窗格中单击并向左或向右拖动，以仅显示在该时间段内处于活动状态的请求。 筛选器为非独占。 将显示在突出显示时间内处于活动状态的任何请求。 筛选出处于非活动状态约 300 毫秒的所有请求： 数据 URL 是嵌入到其他文档中的小文件。 任何显示在 “请求” 表中以开头的 data: 请求都是数据 URL。 若要隐藏请求，请关闭 “隐藏数据 URL” 复选框： 若要专注于你创作的代码，可以筛选出可能已在 Microsoft Edge 中安装的扩展发送的不相关请求。 扩展请求具有以 开 chrome-extension:// 头的 URL 若要隐藏扩展请求，请在 筛选器 操作栏中，选择 更多筛选器 下拉菜单，然后选择 隐藏 扩展 URL ，以便在旁边显示复选标记： 底部的状态栏显示显示的请求数（总数），例如 5 / 10 个请求 。 仅显示具有阻止响应 Cookie 的请求 若要筛选出除因任何原因阻止响应 cookie 的请求之外的所有内容，请在 “筛选器 ”操作栏中选择“ 更多筛选器 ”下拉列表，然后选择“ 阻止的响应 cookie” ，以便在旁边显示复选标记。 然后，若要找出响应 Cookie 被阻止的原因，请选择“ 名称 ) ”下的请求 (，打开右侧) (的“ Cookie” 选项卡，然后将鼠标悬停在信息 ( ) 图标上。 在 Microsoft Edge 中，选择 “设置”和更多 >“ 新建 InPrivate 窗口 ”。 在 Microsoft Edge 中，选择 “设置”和更多 >“ 新建 InPrivate 窗口 ”。 在地址栏中，输入 Microsoft.com 。 在地址栏中，输入 Microsoft.com 。 右键单击该网页，然后选择 “检查 ”。 DevTools 随即打开。 右键单击该网页，然后选择 “检查 ”。 确保已选中 “所有 筛选器”按钮。 确保已选中 “所有 筛选器”按钮。 刷新网页。 网络 工具中列出了许多消息。 在 “筛选器 ”操作栏中，选择“ 更多筛选器 ”下拉列表，然后选择“ 阻止的响应 Cookie” 。 在菜单中， 阻止响应 Cookie 旁边会显示一个复选标记。 在 “筛选器 ”操作栏中，选择“ 更多筛选器 ”下拉列表，然后选择“ 阻止的响应 Cookie” 。 在菜单中， 阻止响应 Cookie 旁边会显示一个复选标记。 单击下拉列表外部将其关闭。 将显示已阻止响应 cookie 的请求，例如 id？d_visid_ver=... 。 将显示已阻止响应 cookie 的请求，例如 id？d_visid_ver=... 。 选择一个请求，例如 id？d_visid_ver=... 。 随即打开带有选项卡的边栏。 选择一个请求，例如 id？d_visid_ver=... 。 将鼠标悬停在信息 ( ) 图标上。 例如，工具提示显示：“由于用户首选项，阻止了通过 Set-Cookie 标头设置 Cookie 的尝试。” 底部的状态栏显示显示的请求数。 将鼠标悬停在信息 ( ) 图标上。 例如，工具提示显示：“由于用户首选项，阻止了通过 Set-Cookie 标头设置 Cookie 的尝试。” 底部的状态栏显示显示的请求数。 此外， 网络 工具在由于 Edge 标志或配置而阻止 Cookie 的请求旁边显示一个警告图标 (“ ) 。 将鼠标悬停在图标上以查看包含线索的工具提示，然后单击它以转到 “问题” 工具以获取更多信息。 若要筛选除阻止的请求以外的所有内容，请在 “筛选器 ”操作栏中选择 “更多筛选器” > “阻止的请求 ”，以便显示复选标记。 若要对此进行测试，可以使用 DevTools 底部快速 视图 面板中的 网络请求阻止 工具;请参阅“ 检查网络活动 ”中的 “阻止请求 ”。 转到网页，如新窗口或选项卡中的“ 检查网络活动 ”演示页面。 转到网页，如新窗口或选项卡中的“ 检查网络活动 ”演示页面。 右键单击该网页，然后选择 “检查 ”。 DevTools 随即打开。 右键单击该网页，然后选择 “检查 ”。 在 DevTools 中，选择 网络 工具。 在 DevTools 中，选择 网络 工具。 刷新网页。 “请求” 表列出 .html 、 .css .png 和 .js 文件。 “请求” 表列出 .html 、 .css .png 和 .js 文件。 在 “更多筛选器 ”下拉列表中， (“ 仅显示/隐藏请求 ”工具提示) ，选择“ 阻止的请求” 。 在下拉列表中， 阻止的请求 旁边会显示一个复选标记。 在 “更多筛选器 ”下拉列表中， (“ 仅显示/隐藏请求 ”工具提示) ，选择“ 阻止的请求” 。 在下拉列表中， 阻止的请求 旁边会显示一个复选标记。 单击下拉列表外部以将其关闭。 “ 请求” 表为空，因为 DevTools 不会阻止任何请求，并且现在筛选请求以仅显示阻止的请求。 “ 请求” 表为空，因为 DevTools 不会阻止任何请求，并且现在筛选请求以仅显示阻止的请求。 按 Esc 一到两次，以便在 DevTools 底部打开 “快速视图 ”面板。 按 Esc 一到两次，以便在 DevTools 底部打开 “快速视图 ”面板。 在 “快速视图 ”工具栏中，单击“ 更多工具 ” ) 按钮，然后选择“ 网络请求阻止 ”。 网络请求阻止 工具将在 “快速视图 ”面板中打开。 在 “快速视图 ”工具栏中，单击“ 更多工具 ” ) 按钮，然后选择“ 网络请求阻止 ”。 网络请求阻止 工具将在 “快速视图 ”面板中打开。 在 网络请求阻止 工具中，单击“ 添加网络请求阻止模式 ) 按钮。 在 网络请求阻止 工具中，单击“ 添加网络请求阻止模式 ) 按钮。 在“ 阻止匹配请求的文本模式 ”文本框中，输入 *.png ，然后单击“ 添加 ”按钮。 已列出 *.png ，并带有复选标记。 在 网络 工具中， “请求” 表仍为空，因为尚未主动阻止任何请求。 在“ 阻止匹配请求的文本模式 ”文本框中，输入 *.png ，然后单击“ 添加 ”按钮。 已列出 *.png ，并带有复选标记。 在 网络 工具中， “请求” 表仍为空，因为尚未主动阻止任何请求。 刷新网页。 在演示网页中，显示的不是标题旁边的 Edge 徽标，而是一个损坏的图像图标，以及图像的替换文字 ( Microsoft Edge DevTools 徽标 ) 。 在 网络 工具中， 请求 表仅列出 .png 文件。 “请求” 表将阻止的请求突出显示为红色文本。 在 “网络” 工具中，底部的状态栏显示显示的请求数（总数），例如 2/5 个请求 。 在演示网页中，显示的不是标题旁边的 Edge 徽标，而是一个损坏的图像图标，以及图像的替换文字 ( Microsoft Edge DevTools 徽标 ) 。 在演示网页中，显示的不是标题旁边的 Edge 徽标，而是一个损坏的图像图标，以及图像的替换文字 ( Microsoft Edge DevTools 徽标 ) 。 在 网络 工具中， 请求 表仅列出 .png 文件。 “请求” 表将阻止的请求突出显示为红色文本。 在 网络 工具中， 请求 表仅列出 .png 文件。 “请求” 表将阻止的请求突出显示为红色文本。 在 “网络” 工具中，底部的状态栏显示显示的请求数（总数），例如 2/5 个请求 。 在 “网络” 工具中，底部的状态栏显示显示的请求数（总数），例如 2/5 个请求 。 若要筛选出除源自与页面源不同的请求之外的所有内容，请在 “筛选器 ”操作栏中选择“ 更多筛选器” > 第三方请求 ，以便显示复选标记。 在 “检查网络活动 ”演示页上试用。 底部的状态栏显示显示的请求数。 默认情况下， “请求” 表中的请求按启动时间排序，但您可以使用其他条件对表进行排序。 单击 “请求” 中任何列的标题，以按该列对请求进行排序。 默认情况下， 瀑布 列处于关闭状态。 若要打开 瀑布 列：右键单击 “请求” 表标题，然后选择没有子菜单的普通 瀑布菜单项 。 若要更改 瀑布 列对请求的排序方式，请执行以下操作： 右键单击“ 请求 ”表的标题，单击“ 瀑布飞溅 ”，然后选择以下选项之一： 开始时间 - 启动的第一个请求位于顶部。 响应时间 - 开始下载的第一个请求位于顶部。 结束时间 - 完成的第一个请求位于顶部。 总持续时间 - 具有最短连接设置和请求或响应的请求位于顶部。 延迟 - 等待响应时间最短的请求位于顶部。 右键单击“ 请求 ”表的标题，单击“ 瀑布飞溅 ”，然后选择以下选项之一： 开始时间 - 启动的第一个请求位于顶部。 开始时间 - 启动的第一个请求位于顶部。 响应时间 - 开始下载的第一个请求位于顶部。 响应时间 - 开始下载的第一个请求位于顶部。 结束时间 - 完成的第一个请求位于顶部。 结束时间 - 完成的第一个请求位于顶部。 总持续时间 - 具有最短连接设置和请求或响应的请求位于顶部。 总持续时间 - 具有最短连接设置和请求或响应的请求位于顶部。 延迟 - 等待响应时间最短的请求位于顶部。 延迟 - 等待响应时间最短的请求位于顶部。 这些说明假定每个相应的选项按从最短到最长进行排名。 单击“ 瀑布飞溅 ”列的标题以反转顺序。 下图显示了按总持续时间排序“瀑布飞溅”的操作。 每个条形图的较浅部分是等待所用的时间，较暗部分是下载字节所用的时间： 只要 DevTools 处于打开状态，它就会在 网络 工具中记录所有请求。 使用 网络 工具分析请求。 使用 “请求” 表可以显示开发工具打开时发出的所有请求的日志。 若要显示有关每个项目的详细信息，请单击或将鼠标悬停在请求上。 默认情况下， “请求” 表显示以下列： 名称 。 资源的文件名或资源的标识符。 状态 。 HTTP 状态代码。 类型 . 请求资源的 MIME 类型。 发起程序 。 以下对象或进程可以启动请求： 分析器 。 HTML 分析器。 重定向 。 HTTP 重定向。 脚本 。 JavaScript 函数。 其他 。 其他一些过程或操作，例如通过链接导航到页面或在地址栏中输入 URL。 分析器 。 HTML 分析器。 重定向 。 HTTP 重定向。 脚本 。 JavaScript 函数。 其他 。 其他一些过程或操作，例如通过链接导航到页面或在地址栏中输入 URL。 大小 。 服务器提供的响应标头和响应正文的合并大小。 时间 。 从请求开始到收到响应中的最后一个字节的总持续时间。 完成者 。 HTTP 缓存还是应用的服务工作进程实现了请求。 默认情况下， 瀑布 列处于关闭状态。 若要打开 “瀑布” 列，请右键单击 “请求 ”表标题，然后选择没有子菜单的普通 瀑布菜单项 。 右键单击“ 请求”（Requests ） 表格的标题，然后选择要隐藏或显示它的列名称。 当前显示的列旁边有复选标记： 要向 “请求” 表添加自定义列： 右键单击“ 请求 ”表的标题，然后选择“ 响应标头”和 >“ 管理标头列” 。 管理 标题列 弹出窗口随即打开： 右键单击“ 请求 ”表的标题，然后选择“ 响应标头”和 >“ 管理标头列” 。 管理 标题列 弹出窗口随即打开： 单击“ 添加自定义标头 ”按钮，输入自定义标头名称，然后单击“ 添加 ”按钮。 单击“ 添加自定义标头 ”按钮，输入自定义标头名称，然后单击“ 添加 ”按钮。

如果页面上的内联框架启动了大量请求，您可以通过对它们进行分组来使请求日志更加友好。 按 iframe 对请求分组： 在新窗口或选项卡中转到网页，例如 网络工具参考演示 。 在新窗口或选项卡中转到网页，例如 网络工具参考演示 。 右键单击该网页，然后选择 “检查 ”。 DevTools 随即打开。 右键单击该网页，然后选择 “检查 ”。 在 DevTools 中，选择 网络 工具。 在 DevTools 中，选择 网络 工具。 刷新网页。 在 网络 工具的 请求 表中，将显示以下项的行： devtools-network-reference/ ( index.html ) style.css script.js 在 网络 工具的 请求 表中，将显示以下项的行： devtools-network-reference/ ( index.html ) 在演示网页中，单击 加载 iframe 按钮。 “ 请求 ”表中添加了许多行： 在演示网页中，单击 加载 iframe 按钮。 “ 请求 ”表中添加了许多行： 在 网络 工具中，单击 网络设置 ( ) 按钮，然后选中按 帧分组 复选框。 在 “请求 ”表中，显示可展开框架名称。 在 网络 工具中，单击 网络设置 ( ) 按钮，然后选中按 帧分组 复选框。 在 “请求 ”表中，显示可展开框架名称。 在 “请求 ”表中，单击框架上的展开器三角形。 将显示由内联框架启动的请求： 在 “请求 ”表中，单击框架上的展开器三角形。 使用 “请求 ”窗格的 “瀑布飞溅 ”列查看请求的计时关系。 瀑布 列的默认组织使用请求的开始时间。 因此，靠左的请求比靠右的请求更早开始。 默认情况下， 瀑布 列处于关闭状态。 若要打开 “瀑布” 列，请右键单击 “请求 ”表标题，然后选择没有子菜单的普通 瀑布菜单项 。 要查看对瀑布进行排序的不同方法，请参阅上面的 按活动阶段排序 。 “ 请求” 窗格的“ 瀑布飞溅 ”列： 分析 WebSocket 连接的消息 若要查看 WebSocket 连接的消息： 转到网页，例如 联机 Websocket 测试程序 。 转到网页，例如 联机 Websocket 测试程序 。 右键单击该网页，然后选择 “检查 ”。 DevTools 随即打开。 右键单击该网页，然后选择 “检查 ”。 选择 网络 工具。 默认情况下，选中 “所有 筛选器”按钮。 网络 面板为空，未显示任何消息。 默认情况下，选中 “所有 筛选器”按钮。 网络 面板为空，未显示任何消息。 刷新网页。 在 网络 工具的 “请求” 表中，列出了许多请求。 在 网络 工具的 “请求” 表中，列出了许多请求。 在 “网络 ”工具顶部，选择带有工具提示的“ 套接字 筛选器”按钮： WebSocket |Web 传输 |DirectSocket 。 筛选的请求列表为空。 在 “网络 ”工具顶部，选择带有工具提示的“ 套接字 筛选器”按钮： WebSocket |Web 传输 |DirectSocket 。 在 Online Websocket Tester 网页中，单击 “连接 ”按钮。 如果尚未设置帐户和 API 令牌，该页面将显示： 已建立连接 {“error”：“Unknown api key”} ，三角形向下;从服务器发送到浏览器。 在 “网络 ”工具的 “消息 ”选项卡中，显示请求： channel_123？api_key=... 在 Online Websocket Tester 网页中，单击 “连接 ”按钮。 如果尚未设置帐户和 API 令牌，该页面将显示： {“error”：“Unknown api key”} ，三角形向下;从服务器发送到浏览器。 在 “网络 ”工具的 “消息 ”选项卡中，显示请求： channel_123？api_key=... 在请求列表中，选择 WebSocket 连接，例如 channel_123？api_key=... 。 随即打开带有选项卡的边栏。 在请求列表中，选择 WebSocket 连接，例如 channel_123？api_key=... 。 选择 “消息 ”选项卡。 如果未注册 API 令牌，则 “消息” 选项卡会列出以下消息： {“error”：“Unknown api key”} ，带有红色向下箭头;从服务器发送到浏览器。 如果未注册 API 令牌，则 “消息” 选项卡会列出以下消息： {“error”：“Unknown api key”} ，带有红色向下箭头;从服务器发送到浏览器。 在联机 Websocket 测试程序网页的文本框中，将 Hello PieSocket！ 更改为 Hello world！ ，然后单击“ 发送 ”按钮。 在网页中，控制台显示消息 Hello world！ ，三角形向上;从浏览器发送到服务器。 在 网络 工具的 消息 选项卡中，表显示最近 100 条消息;在本例中，会添加以下消息： Hello world！ 带有绿色向上箭头;从浏览器发送到服务器： 在联机 Websocket 测试程序网页的文本框中，将 Hello PieSocket！ 更改为 Hello world！ ，然后单击“ 发送 ”按钮。 在网页中，控制台显示消息 Hello world！ ，三角形向上;从浏览器发送到服务器。 在 网络 工具的 消息 选项卡中，表显示最近 100 条消息;在本例中，会添加以下消息： Hello world！ 带有绿色向上箭头;从浏览器发送到服务器： 注意：要从服务器) 回显红色向下箭头消息 (以及绿色向上箭头消息，您需要执行以下操作： 在 PieSocket 站点创建一个帐户。 这将创建 API 令牌。 在 PieSocket 站点创建一个帐户。 这将创建 API 令牌。 在 PieSocket 站点上创建群集。 在 PieSocket 站点上创建群集。 在 PieSocket 仪表板页面中，单击 “在线测试 ”按钮。 此时将打开 Online WebSocket Tester 页面，其中包含查询参数。 在 PieSocket 仪表板页面中，单击 “在线测试 ”按钮。 此时将打开 Online WebSocket Tester 页面，其中包含查询参数。 若要刷新 “请求” 表，请在“ 名称 ”窗格中，再次单击 WebSocket 连接的名称。 数据 。 消息有效负载。 如果消息是纯文本，它将显示在此处。 对于二进制操作码，此列显示操作码的名称和代码。 支持以下操作码： 延续帧 二进制帧 连接关闭框架 Ping 帧 Pong Frame 数据 。 消息有效负载。 如果消息是纯文本，它将显示在此处。 对于二进制操作码，此列显示操作码的名称和代码。 支持以下操作码： 长度 。 消息有效负载的长度（字节）。 长度 。 消息有效负载的长度（字节）。 时间 。 接收或发送消息的时间。 时间 。 接收或发送消息的时间。 若要查看服务器通过 Fetch API、EventSource API 和 XHR 流式传输的事件，请执行以下操作： 转到在新窗口或选项卡中流式传输事件的网页，例如 网络工具参考演示 。 转到在新窗口或选项卡中流式传输事件的网页，例如 网络工具参考演示 。 右键单击该网页，然后选择 “检查 ”。 DevTools 随即打开。 右键单击该网页，然后选择 “检查 ”。 在 DevTools 中，选择 网络 工具。 在 DevTools 中，选择 网络 工具。 刷新网页。 在 网络 工具的 请求 表中，将显示以下项的行： devtools-network-reference/ ( index.html ) style.css script.js 在 网络 工具的 请求 表中，将显示以下项的行： devtools-network-reference/ ( index.html ) 在演示网页中，单击 Stream 服务器发送的事件 按钮。 在“ 请求 ”表中， sse 添加了 (服务器发送的事件) 行。 在演示网页中，单击 Stream 服务器发送的事件 按钮。 在“ 请求 ”表中， sse 添加了 (服务器发送的事件) 行。 选择 sse (服务器发送的事件) 请求。 边栏随即打开，包括 EventStream 选项卡。 选择 sse (服务器发送的事件) 请求。 边栏随即打开，包括 EventStream 选项卡。 选择 EventStream 选项卡： 每秒接收并显示一次新的“hello”消息。 选择 EventStream 选项卡： 每秒接收并显示一次新的“hello”消息。 若要筛选事件，请在 EventStream 选项卡顶部的筛选栏中指定正则表达式。 若要清除捕获事件的列表，请单击 清除 ( ) 按钮。 服务器发送的事件 - EventSource API。 XMLHttpRequest - XHR. 若要预览 HTTP 响应正文的内容： 在 网络 工具中， 在请求 表的 名称 列中，单击请求的名称。 在 网络 工具中， 在请求 表的 名称 列中，单击请求的名称。 在边栏中，选择 “预览 ”选项卡： 在边栏中，选择 “预览 ”选项卡： “ 预览 ”选项卡主要用于查看图像。 在 “请求 ”表的“ 名称 ”列中，单击请求的名称。 在 “请求 ”表的“ 名称 ”列中，单击请求的名称。 在边栏中，选择 “响应 ”选项卡： 在边栏中，选择 “响应 ”选项卡： 显示有关请求的 HTTP 标头数据： 在 “请求” 表中，单击请求的名称。 在 “请求” 表中，单击请求的名称。 在边栏中，选择 标题 选项卡，然后向下滚动到各个部分： 常规 提前提示标头 (可选) 响应头 请求标头 在边栏中，选择 标题 选项卡，然后向下滚动到各个部分： 默认情况下， “标头” 选项卡按字母顺序显示标头名称。 按接收 HTTP 标头名称的顺序显示这些名称： 转到使用 XHR 的网页，例如在新窗口或选项卡中 移除 -ms-high-contrast 和在 Microsoft Edge 中接受基于标准的强制颜色 。 转到使用 XHR 的网页，例如在新窗口或选项卡中 移除 -ms-high-contrast 和在 Microsoft Edge 中接受基于标准的强制颜色 。 如果横幅提示中出现 Cookie，则接受它。 在强制执行《通用数据保护条例》 (GDPR) 的区域，此站点显示 Cookie 横幅，并且不会发送 collect 以下) (请求，除非你接受横幅中的 Cookie。 如果横幅提示中出现 Cookie，则接受它。 在强制执行《通用数据保护条例》 (GDPR) 的区域，此站点显示 Cookie 横幅，并且不会发送 collect 以下) (请求，除非你接受横幅中的 Cookie。 右键单击该网页，然后选择 “检查 ”。 DevTools 随即打开。 右键单击该网页，然后选择 “检查 ”。 刷新网页。 “ 请求” 表中列出了许多请求。 “ 请求” 表中列出了许多请求。 单击顶部的红色“ 停止记录网络日志 ” (“ ) 按钮。 单击顶部的红色“ 停止记录网络日志 ” (“ ) 按钮。 在 “请求 ”表中，单击 “名称 ”列以按字母顺序对请求进行排序，然后选择 收集 请求。 随即打开带有选项卡的边栏。 在 “请求 ”表中，单击 “名称 ”列以按字母顺序对请求进行排序，然后选择 收集 请求。 选中 Response Headers or Request Headers 部分旁边的 Raw 复选框。 选中 Response Headers or Request Headers 部分旁边的 Raw 复选框。 显示上面的 HTTP 标头 。 有时， “标头 ”选项卡会显示警告消息 ：显示临时标头。 这可能是由于以下原因造成的： 请求不是通过网络发送的，而是从不存储原始请求标头的本地缓存提供。 假设请求不是通过网络发送的，而是从不存储原始请求标头的本地缓存提供。 在这种情况下，可以选中 网络 工具顶部的 禁用缓存 复选框，以查看完整的请求标头。 例如： 转到“ 检查网络活动 ”演示页。 转到“ 检查网络活动 ”演示页。 右键单击网页，然后选择 “检查” 。 DevTools 随即打开。 右键单击网页，然后选择 “检查” 。 选择 getstarted.js 网络请求。 “请求标头 ”部分显示消息： 显示临时标头。禁用缓存以查看完整标头。 选择 getstarted.js 网络请求。 “请求标头 ”部分显示消息： 显示临时标头。禁用缓存以查看完整标头。 选中 网络 工具顶部的 禁用缓存 复选框。 选中 网络 工具顶部的 禁用缓存 复选框。 选择 getstarted.js 网络请求。 “ 请求标头 ”部分不再显示该消息;将显示完整的请求标头。 选择 getstarted.js 网络请求。 “ 请求标头 ”部分不再显示该消息;将显示完整的请求标头。 通过禁用 浏览器缓存来模拟首次访问 者，如上所示。 查看请求有效负载 (查询字符串参数和表单数据) 若要查看HTTP请求的有效负载 (查询字符串参数和表单数据) ，请从“ 请求” 表中选择请求，然后选择边栏中的“ 有效负载 ”选项卡，如下所示： 在新窗口或选项卡中转到网页，例如 网络工具参考演示 。 在新窗口或选项卡中转到网页，例如 网络工具参考演示 。 右键单击该网页，然后选择 “检查 ”。 DevTools 随即打开。 右键单击该网页，然后选择 “检查 ”。 在 DevTools 中，选择 网络 工具。 在 DevTools 中，选择 网络 工具。 刷新网页。 在 网络 工具的 请求 表中，将显示以下项的行： devtools-network-reference/ ( index.html ) style.css script.js favicon.png 在 网络 工具的 请求 表中，将显示以下项的行： devtools-network-reference/ ( index.html ) 在演示网页中，单击“ 发送表单数据” 按钮。 在 网络 工具的 请求 表中，添加了一行： form-data-endpoint?hasfile=true 在演示网页中，单击“ 发送表单数据” 按钮。 在 网络 工具的 请求 表中，添加了一行： form-data-endpoint?hasfile=true 选择行 form-data-endpoint?hasfile=true 。 边栏随即打开，包括“ 有效负载 ”选项卡。 选择行 form-data-endpoint?hasfile=true 。 边栏随即打开，包括“ 有效负载 ”选项卡。 选择 “有效负载 ”选项卡。 将显示请求的有效负载，包括 “查询字符串参数 ”部分和“ 窗体数据 ”部分： 将显示请求的有效负载，包括 “查询字符串参数 ”部分和“ 窗体数据 ”部分： 在 DevTools 的 “控制台 ”选项卡中显示错误： POST https://microsoftedge.github.io/Demos/devtools-network-reference/form-data-endpoint?hasfile=true 405 (Method Not Allowed) (anonymous) @ script.js:49 控制台中会出现这个无害的 “不允许的方法 ” 错误，因为 演示服务器上没有 form-data-endpoint POST 处理程序。 此错误在意料之中，因为 github.io 托管不运行应用程序服务器，仅运行静态文件。 默认情况下， 网络 工具以可读形式显示有效负载。 若要改为查看查询字符串参数或窗体数据的源： 执行上面上一节中的步骤。 在 “有效负载 ”选项卡中， “查询字符串参数 ”部分以可读形式显示有效负载，对于 hasfile 。 表 单数据 部分以人类可读的形式显示有效负载，用于 username 、 timestamp 和 file ： 在 “有效负载 ”选项卡中， “查询字符串参数 ”部分以可读形式显示有效负载，对于 hasfile 。 表 单数据 部分以人类可读的形式显示有效负载，用于 username 、 timestamp 和 file ： 在 “查询字符串参数 ”部分标题旁边，单击 “查看源 ”按钮。 在 “查询字符串参数 ”部分标题旁边，单击 “查看源 ”按钮。 在 “表单数据 ”部分标题旁边，单击“ 查看源 ”按钮。 将显示有效负载的源信息： 在 “表单数据 ”部分标题旁边，单击“ 查看源 ”按钮。 若要以可读格式显示查询字符串参数，但保留编码： 在新窗口或选项卡中转到使用查询字符串参数的网页，例如 网络工具参考演示 。 在新窗口或选项卡中转到使用查询字符串参数的网页，例如 网络工具参考演示 。 右键单击该网页，然后选择 “检查 ”。 DevTools 随即打开。 右键单击该网页，然后选择 “检查 ”。 在 DevTools 中，选择 网络 工具。 在 DevTools 中，选择 网络 工具。 刷新网页。 “请求” 表列出 .html 、 .css .js 和 .png 文件。 “请求” 表列出 .html 、 .css .js 和 .png 文件。 在演示网页中，单击“ 发送编码的查询参数 ”按钮。 “ 请求” 表会添加一行： encoded-query-params-endpoint?name=Danas+Barkus&url=https%3A%2F%2Fcontoso.com%2F%C3%A0%C3%A9%C3%A8%C3%B4%C3%A7%D0%BB 在演示网页中，单击“ 发送编码的查询参数 ”按钮。 encoded-query-params-endpoint?name=Danas+Barkus&url=https%3A%2F%2Fcontoso.com%2F%C3%A0%C3%A9%C3%A8%C3%B4%C3%A7%D0%BB 选择行 encoded-query-params-endpoint 。 随即打开带有选项卡的边栏。 选择行 encoded-query-params-endpoint 。 在边栏中，选择 “有效负载 ”选项卡。 “ 查询字符串参数” 部分显示已解码的 URL，如下所示： https://contoso.com/àéèôçл 在边栏中，选择 “有效负载 ”选项卡。 “ 查询字符串参数” 部分显示已解码的 URL，如下所示： https://contoso.com/àéèôçл 在 “查询字符串参数 ”部分中，单击 “查看 URL 编码” 按钮。 现在， 该 URL 显示 (编码字符，如 %3A 和 %2F ) ;按钮标签将更改为“ 查看解码的数据 ”： 在 “查询字符串参数 ”部分中，单击 “查看 URL 编码” 按钮。 现在， 该 URL 显示 (编码字符，如 %3A 和 %2F ) ;按钮标签将更改为“ 查看解码的数据 ”： 单击 “查看解码” 按钮。 URL 再次显示为解码字符，如： https://contoso.com/àéèôçл ，按钮标签变回“ 查看 URL 编码” 。 URL 再次显示为解码字符，如： https://contoso.com/àéèôçл ，按钮标签变回“ 查看 URL 编码” 。 显示请求的 HTTP 标头中发送的 Cookie： 在 “请求” 表中，单击请求的名称。 在 “请求” 表中，单击请求的名称。 在边栏中，选择“ Cookie” 选项卡： 在边栏中，选择“ Cookie” 选项卡： 有关每列的详细信息，请参阅 查看、编辑和删除 Cookie 中的 字段 。 若要修改 Cookie，请参阅 查看、编辑和删除 Cookie 。 在“请求”表中，单击请求的名称。 在“请求”表中，单击请求的名称。 在边栏中，选择“ 计时 ”选项卡。 在边栏中，选择“ 计时 ”选项卡。 若要更快地访问数据，请参阅 预览计时细分 。 有关“ 计时 ”面板中可能显示的每个阶段的信息，请参阅下面的 “计时细分阶段 说明”。 要显示请求的计时细分预览，请在 “请求” 表的“ 瀑布” 列中，将鼠标悬停在请求的条目上。 默认情况下， 瀑布 列处于关闭状态。 若要打开 “瀑布” 列，请右键单击 “请求 ”表标题，然后选择没有子菜单的普通 瀑布菜单项 。 要在不悬停的情况下查看数据，请参阅上面的 显示请求的计时细分 。 每个阶段都可能出现在 “计时 ”选项卡中： 排队。 浏览器在以下情况下将请求排队 有更高优先级的请求。 已为此源打开六个 TCP 连接，这是限制。 仅适用于 HTTP/1.0 和 HTTP/1.1。 浏览器正在磁盘缓存中短暂地分配空间。 排队。 浏览器在以下情况下将请求排队 已为此源打开六个 TCP 连接，这是限制。 仅适用于 HTTP/1.0 和 HTTP/1.1。 浏览器正在磁盘缓存中短暂地分配空间。 停止 。 该请求可能由于 排队 中描述的任何原因而停止。 停止 。 该请求可能由于 排队 中描述的任何原因而停止。 启动 。 当请求由服务工作进程处理时， 启动 是服务工作进程启动所花费的时间。 启动 。 当请求由服务工作进程处理时， 启动 是服务工作进程启动所花费的时间。 respondWith . 当请求由服务工作进程处理时， respondWith 是服务工作进程运行 fetchEvent.respondWith() 回调所花费的时间。 respondWith . 当请求由服务工作进程处理时， respondWith 是服务工作进程运行 fetchEvent.respondWith() 回调所花费的时间。 DNS 查找 。 浏览器正在解析请求的 IP 地址。 DNS 查找 。 浏览器正在解析请求的 IP 地址。 初始连接 。 浏览器正在建立连接，包括 TCP 握手和重试以及协商安全套接字层 (SSL) 。 初始连接 。 浏览器正在建立连接，包括 TCP 握手和重试以及协商安全套接字层 (SSL) 。 代理协商 。 浏览器正在与 代理服务器 协商请求。 代理协商 。 浏览器正在与 代理服务器 协商请求。 请求已发送 。 正在发送请求。 请求已发送 。 正在发送请求。 ServiceWorker 准备。 浏览器正在启动服务工作进程。 ServiceWorker 准备。 浏览器正在启动服务工作进程。 到 ServiceWorker 的请求 。 请求正在发送到服务工作进程。 到 ServiceWorker 的请求 。 请求正在发送到服务工作进程。 正在等待 TTFB) ( 。 浏览器正在等待响应的首个字节。 TTFB 代表 到首个字节的时间 。 此计时包括一次延迟的往返以及服务器准备响应所花费的时间。 正在等待 TTFB) ( 。 浏览器正在等待响应的首个字节。 TTFB 代表 到首个字节的时间 。 此计时包括一次延迟的往返以及服务器准备响应所花费的时间。 内容下载 。 浏览器正在接收响应。 内容下载 。 浏览器正在接收响应。 接收推送 。 浏览器正在通过 HTTP/2 服务器推送接收此响应的数据。 接收推送 。 浏览器正在通过 HTTP/2 服务器推送接收此响应的数据。 读取推送 。 浏览器正在读取之前接收的本地数据。 读取推送 。 浏览器正在读取之前接收的本地数据。 为了可视化请求路由，时间线显示服务工作进程 Startup 事件和 respondWith 提取事件。 您可以调试和可视化通过服务工作线程的网络请求。 若要显示服务工作进程请求的计时细分： 在新窗口或选项卡中转到使用服务工作进程的页面，例如 pwamp 演示页面。 在新窗口或选项卡中转到使用服务工作进程的页面，例如 pwamp 演示页面。 右键单击该页面，然后选择 “检查 ”。 DevTools 随即打开。 右键单击该页面，然后选择 “检查 ”。 在请求列表中，选择经过服务工作线程文件的网络请求。 例如，选择“ about.css ”。 将显示边栏。 在请求列表中，选择经过服务工作线程文件的网络请求。 例如，选择“ about.css ”。 在边栏中，点按“ 计时 ”标签： Service Worker 部分显示有关 启动 和 respondWith 阶段的计时信息。 在边栏中，点按“ 计时 ”标签： Service Worker 部分显示有关 启动 和 respondWith 阶段的计时信息。 单击 respondWith 部分上的展开箭头： 单击 respondWith 部分上的展开箭头： 在 respondWith 部分中，单击 原始请求 上的展开箭头： 在 respondWith 部分中，单击 原始请求 上的展开箭头： 收到 响应 后，单击展开器箭头。 收到 响应 后，单击展开器箭头。 若要显示请求的发起程序和依赖项，请按住 Shift 并将鼠标悬停在 “请求” 表中的请求上。 发起悬停请求的请求以绿色显示。 当 “请求” 表按时间顺序排序时，如果将鼠标悬停在某行上，则其前面的行将显示绿色请求。 绿色请求是依赖项的发起程序。 如果在此之前的行上显示另一个绿色请求，则该较高请求是发起程序的发起程序。 等等。 DevTools 在 “网络 ”工具上的多个位置显示 和 DOMContentLoaded load 事件的时间： 在“ 概述 ”窗格中，显示竖线。 在“ 概述 ”窗格中，显示竖线。 在“请求”表的“ 瀑布飞溅 ”列中，有竖线。 默认情况下， 瀑布 列处于关闭状态。 若要打开 “瀑布” 列，请右键单击 “请求 ”表标题，然后选择没有子菜单的普通 瀑布菜单项 。 在“请求”表的“ 瀑布飞溅 ”列中，有竖线。 默认情况下， 瀑布 列处于关闭状态。 若要打开 “瀑布” 列，请右键单击 “请求 ”表标题，然后选择没有子菜单的普通 瀑布菜单项 。 在 摘要 窗格中，在 网络 工具底部，具有计时标签。 在 摘要 窗格中，在 网络 工具底部，具有计时标签。 DOMContentLoaded 事件颜色为蓝色， load 事件颜色为红色。 请求总数列在“ 网络” 工具底部的 “摘要” 窗格中。 注意：此数字仅跟踪自打开 DevTools 以来记录的请求。 如果其他请求发生在打开 DevTools 之前，则不计算这些请求。 请求的总下载大小列在“ 网络 ”工具底部的 “摘要 ”窗格中。 注意：此数字仅跟踪自打开 DevTools 以来记录的请求。 如果其他请求发生在打开 DevTools 之前，则不计算之前的请求。 若要在浏览器解压缩每个项目后验证资源的大小，请参阅 显示资源的未压缩大小 。 JavaScript 语句请求资源后，将鼠标悬停在 发起程序 列上以显示请求之前的堆栈跟踪。 若要同时查看资源的传输大小和未压缩大小，请执行以下操作： 在 网络 工具的右上角，单击 网络设置 (齿轮) 图标。 将显示一行复选框。 在 网络 工具的右上角，单击 网络设置 (齿轮) 图标。 将显示一行复选框。 检查“请求”表中的 “大小 ”列。 顶部值为传输的大小，底部值为浏览器解压缩后资源的大小： 检查“请求”表中的 “大小 ”列。 顶部值为传输的大小，底部值为浏览器解压缩后资源的大小： 您可以通过下面介绍的几种方式导出或复制应用过滤器的请求列表。 将所有网络请求保存到 HAR 文件 HAR (HTTP 存档) 是多个 HTTP 会话工具用来导出捕获的数据的文件格式。 格式是具有一组特定字段的 JSON 对象。 请参阅 HAR 分析器 。 为了减少敏感信息意外泄露的可能性，默认情况下，可以以 HAR 格式导出“清理”的网络日志，该格式不包括敏感信息 Cookie ，例如 、 Set-Cookie 和 Authorization 标头。 如果需要，还可以导出包含敏感数据 的 日志。 若要将所有网络请求保存到 HAR 文件，而不保存敏感数据： 转到网页，如新窗口或选项卡中的“ 检查网络活动 ”演示页面。 转到网页，如新窗口或选项卡中的“ 检查网络活动 ”演示页面。 右键单击该网页，然后选择 “检查 ”。 DevTools 随即打开。 右键单击该网页，然后选择 “检查 ”。 在 DevTools 中，选择 网络 工具。 在 DevTools 中，选择 网络 工具。 右键单击“ 请求” 表中的任何请求，然后选择“ 复制 >” 全部复制为 HAR (清理后的) ： 或者，在 网络 工具顶部的操作栏中，单击“ 导出 HAR (已清理) ” ( ) 按钮。 右键单击“ 请求” 表中的任何请求，然后选择“ 复制 >” 全部复制为 HAR (清理后的) ： 或者，在 网络 工具顶部的操作栏中，单击“ 导出 HAR (已清理) ” ( ) 按钮。 开发工具将自打开开发工具以来发生的所有请求保存到 HAR 文件中。 无法筛选请求，也无法保存单个请求。 若要将所有网络请求保存到 HAR 文件，包括敏感数据： 在 DevTools 中，选择 “自定义”并控制 DevTools > 设置 。 “ 设置 > 首选项 ”页面随即打开。 在 DevTools 中，选择 “自定义”并控制 DevTools > 设置 。 “ 设置 > 首选项 ”页面随即打开。 选中复选框 “允许使用敏感数据生成 HAR” 。 选中复选框 “允许使用敏感数据生成 HAR” 。 单击“ 关闭 ” ( ) 按钮。 单击“ 关闭 ” ( ) 按钮。 在 “网络 ”工具中，右键单击“ 请求 ”表中的任何请求，然后选择“ 复制 >” 全部复制为具有敏感数据的 HAR () 。 或者，在顶部的操作栏中，单击“ 导出 HAR (，无论是已清理的还是包含敏感) 数据的 ( ) ”按钮，然后选择 “导出包含敏感数据的 HAR (”) ： 在 “网络 ”工具中，右键单击“ 请求 ”表中的任何请求，然后选择“ 复制 >” 全部复制为具有敏感数据的 HAR () 。 或者，在顶部的操作栏中，单击“ 导出 HAR (，无论是已清理的还是包含敏感) 数据的 ( ) ”按钮，然后选择 “导出包含敏感数据的 HAR (”) ： 将 HAR 文件导入开发工具进行分析 有了 HAR 文件后，可以使用 HAR 分析器 将其导入开发工具进行分析。 若要将 HAR 文件导入开发工具进行分析，请执行以下操作： 在 网络 工具顶部的操作栏中，单击导入 HAR 文件 ( ) 按钮。 在 网络 工具顶部的操作栏中，单击导入 HAR 文件 ( ) 按钮。 或者，将 HAR 文件拖动到 “请求” 表上。 或者，将 HAR 文件拖动到 “请求” 表上。 网络 工具读取并显示从 HAR 文件导入的请求的发起程序。 有关发起程序，请参阅上文 的显示请求日志 。 在 “请求 ”表的“ 名称 ”列下，右键单击请求，将鼠标悬停在 “复制” 上，然后选择以下选项之一。 复制单个请求、其响应或堆栈跟踪： 若要复制一组筛选的请求，请将筛选器应用于网络日志，右键单击请求，然后选择： 将格式化响应 JSON 复制到剪贴板 若要复制 JSON 响应的格式化 JSON 数据，请执行以下操作： 在 “请求” 表中，单击导致 JSON 响应的请求的名称。 在 “请求” 表中，单击导致 JSON 响应的请求的名称。 在边栏中，选择 “预览 ”选项卡。 在边栏中，选择 “预览 ”选项卡。 右键单击格式化 JSON 响应预览的第一行，然后选择 “复制值” ： 现在可以将值粘贴到任何编辑器中。 右键单击格式化 JSON 响应预览的第一行，然后选择 “复制值” ： 现在可以将值粘贴到任何编辑器中。 将属性值从网络请求复制到剪贴板 要将属性值从网络请求复制到剪贴板： 在“请求”表中，单击请求的名称。 在“请求”表中，单击请求的名称。 在边栏中，选择 “有效负载 ”选项卡： 在边栏中，选择 “有效负载 ”选项卡： 展开以下其中一节。 请求有效负载 (JSON) 窗体数据 查询字符串参数 请求标头 响应头 右键单击某个值，然后选择“ 复制值” 。 现在可以将值粘贴到任何编辑器中。 右键单击某个值，然后选择“ 复制值” 。 现在可以将值粘贴到任何编辑器中。 可以展开或折叠 网络 工具 UI 的各部分，以集中重要信息。 默认情况下，开发工具显示 “筛选器” 窗格。 若要隐藏 “筛选器 ”窗格，请选择“ 筛选器” (“ ) ”。 如果希望网络请求表中有更多空格，请使用大请求行。 使用大行时，某些列还提供更多信息;例如： “ 大小 ”列的底部值是请求的未压缩大小。 “ 大小 ”列的底部值是请求的未压缩大小。 默认情况下不显示“ 优先级” 列 () 会同时显示初始 (底部值) 和提取优先级) 最终 (顶部值。 默认情况下不显示“ 优先级” 列 () 会同时显示初始 (底部值) 和提取优先级) 最终 (顶部值。 转到网页，如新窗口或选项卡中的“ 检查网络活动 ”演示页面。 转到网页，如新窗口或选项卡中的“ 检查网络活动 ”演示页面。 右键单击该网页，然后选择 “检查 ”。 DevTools 随即打开。 右键单击该网页，然后选择 “检查 ”。 在 DevTools 中，选择 网络 工具。 在 DevTools 中，选择 网络 工具。 刷新网页。 请求显示在小行中。 在 “网络 ”工具中，单击“ 网络设置 ” ( ) ”按钮，然后选中“ 大请求行” 复选框。 请求显示在大行中： 在 “网络 ”工具中，单击“ 网络设置 ” ( ) ”按钮，然后选中“ 大请求行” 复选框。 默认情况下，开发工具显示 “概述 ”窗格。 若要隐藏 “概述 ”窗格，请清除“ 显示概述 ”复选框。 检查网络活动 - 网络 工具的分步演练和简介。 此页面的某些部分是根据 Google 创建和共享 的作品所做的修改，并根据 Creative Commons Attribution 4.0 International License 中描述的条款使用。 原始页面可在 此处 找到，作者为 Kayce Basques。 本作品根据 Creative Commons Attribution 4.0 International License 获得许可。 想要尝试使用 Ask Learn 阐明或指导你完成本主题？ Last updated on 2026-08-28