网络工具具有以下功能，用于检查网页的网络活动。 有关 网络工具的 分步演练和简介，请参阅 检查网络活动。
详细内容：
记录网络请求
默认情况下，只要 DevTools 处于打开状态，DevTools 将记录网络工具中的所有 网络 请求。
例如：
转到新窗口或选项卡中的网页，例如 “检查网络活动 ”演示页。
右键单击网页，然后选择“ 检查”。
DevTools 随即打开。
在 DevTools 中，选择 “网络 ”工具。
刷新网页。
“ 停止记录网络日志 ”按钮为红色，可用：
停止记录网络请求
若要停止记录请求，请执行以下作：
在 “网络 ”工具上，单击“ 停止记录网络日志 (
) 。 它变为灰色，表示 DevTools 不再记录请求。当网络工具处于焦点时，按 Ctrl+E (Windows、Linux) 或 Command+E (macOS) 。
清除请求
若要清除 “请求” 表中的所有请求，请在 “网络 ”工具中，单击“ 清除网络日志 (
) ”按钮：
或者，在网络工具具有焦点时，按 Ctrl+L (Windows、Linux、macOS) 或 Command+K (macOS) 。
另请参阅：
跨页面加载保存请求
若要跨页面加载保存请求，请在 “网络 ”工具上选中“ 保留日志 ”复选框：
DevTools 会保存所有请求，直到禁用 保留日志。
另请参阅：
在页面加载期间捕获屏幕截图
可以捕获屏幕截图，以分析用户在等待页面加载时显示的内容。
若要启用屏幕截图，请：
在新窗口或选项卡中转到网页（如 TODO 应用）。
右键单击网页，然后选择“ 检查”。
DevTools 随即打开。
在 DevTools 中，打开 “网络 ”工具。
在 “网络 ”工具的右上角，单击“ 网络设置 (齿轮) ”图标。 此时将显示一行复选框。
选中“ 捕获屏幕截图 ”复选框：
捕获屏幕截图：
当 网络 工具具有焦点时，按 Ctrl+F5 刷新页面。 在页面加载期间捕获屏幕截图，缩略图显示在复选框行下方。
可以按如下所示与屏幕截图进行交互。
将鼠标悬停在屏幕截图上可显示捕获该屏幕截图的点。 “ 概述 ”图表窗格上会显示一条黄色垂直线。
单击屏幕截图的缩略图，筛选出捕获屏幕截图后发生的任何请求。
双击屏幕截图缩略图以放大并查看屏幕截图。
按 Esc 关闭屏幕截图查看器。
重播 XHR 请求
重播 XHR 请求：
在新窗口或选项卡中转到网页，例如 “网络工具参考演示”。
右键单击网页，然后选择“ 检查”。
DevTools 随即打开。
在 DevTools 中，选择 “网络 ”工具。
刷新网页。
在 “网络 ”工具的 “请求” 表中，将显示以下行：
-
devtools-network-reference/(index.html) style.cssscript.js
-
在演示网页中，单击“ 发送 XHR 请求 ”按钮。
在 网络 工具的 “请求数” 表中，将添加一
data.json行。 “发起程序”列读取script.js:20。在 “请求” 表中，右键单击请求
data.json，然后选择“ 重播 XHR”。或者，选择请求，然后按 R。
在 网络 工具的 “请求数” 表中，将添加第二
data.json行。 “ 发起方” 列显示 “其他”：
有关发起程序的信息，请参阅：
单击演示的“发送 XHR 请求”按钮 (导致 JavaScript) 发送请求后，“复制堆栈跟踪”菜单项将显示在请求的右键单击>“复制”菜单中。 请参阅下面的 将网络请求复制到剪贴板。
更改加载行为
通过禁用浏览器缓存来模拟首次访问者
若要模拟首次用户体验网站的方式，请打开 “禁用缓存 ”复选框。 DevTools 禁用浏览器缓存。 此功能可以更准确地模拟首次用户体验，因为重复访问时会从浏览器缓存提供请求。
“ 禁用缓存 ”复选框：
从网络条件工具禁用浏览器缓存
在“网络”工具中，可以在 DevTools 底部的“快速视图”面板中打开“网络条件”工具，然后从那里禁用浏览器缓存：
在 “网络 ”工具中，单击“ 更多网络条件 (
按钮。
网络条件工具将在 DevTools 底部的“快速视图”面板中打开。在 “网络条件 ”工具中，选中“ 禁用缓存 ”复选框：
另请参阅：
手动清除浏览器缓存
若要随时手动清除浏览器缓存，请右键单击 “请求” 表中的任意位置，然后选择“ 清除浏览器缓存”：
另请参阅：
脱机模拟
一类名为渐进式Web 应用 (PWA) 的 Web 应用能够在服务工作者的帮助下脱机运行。 你可能会发现，在构建此类应用时，快速模拟没有数据连接的设备很有用。
若要模拟脱机网络体验，请选择“ 无限制 ”下拉菜单 >“”预设>脱机”。
脱机下拉菜单：
模拟慢速网络连接
若要模拟快速 4G、慢速 4G 或 3G，请从顶部作栏中的“ 限制 ”下拉菜单中选择相应的预设：
可以从不同的预设中进行选择，例如：
- 快速 4G
- 慢速 4G
- 3G
- Offline
若要添加自己的自定义预设，请单击“ 限制 ”菜单，然后选择“ 自定义>添加”。
“网络”工具的选项卡上会显示一个警告图标，提醒你已启用限制：
另请参阅：
创建自定义限制配置文件
除了预设（如慢速或快速 4G），还可以添加自己的自定义限制配置文件。
创建自定义限制配置文件：
转到新窗口或选项卡中的网页，例如 “检查网络活动 ”演示页。
右键单击网页，然后选择“ 检查”。
DevTools 随即打开。
选择 “网络 ”工具。
在 “限制 ”菜单中的“ 自定义 ”部分，选择“ 添加”。
或者，选择 “自定义”并控制“DevTools>设置>限制”。
“DevTools 设置” 页随即打开，其中选择了“ 限制 ”页。
在 “网络限制配置文件 ”部分中，单击“ 添加配置文件” 按钮。
示例值如下所示，将在下一部分使用。
在 “配置文件名称” 文本框中，输入 10kbps。
在 “下载 ”文本框中，输入 10 (10 kbit/s) 。
在 “上传 ”文本框中，输入 10 (10 kbit/s) 。
在“ 延迟 ”文本框中，输入 10 (10 毫秒) 。
在 “数据包丢失 ”文本框中，输入 1 %) 的 1 (。
在 “数据包队列长度 ”文本框中，输入 10。
选中 “数据包重新排序 ”复选框：
单击“添加”按钮。
将显示自定义限制配置文件：
在 “设置” 窗格中，单击“ 关闭 (X) ”按钮。
选择 “网络 ”工具。
在 “限制 ”下拉菜单的“ 自定义 ”部分，选择自定义限制配置文件，例如 10kbps：
“网络”选项卡中显示一个警告 (“
”图标) 图标，提醒你已启用限制。
另请参阅：
- 在“限制”中设置自定义网络限制配置文件。
限制 WebSocket 连接
除了 HTTP 请求，DevTools 还可以限制 WebSocket 连接。 我们将使用在上一部分创建的慢速自定义限制配置文件来显示受限制的 WebSocket 连接在你的网页上的影响。
观察 WebSocket 限制：
执行上一部分中的步骤， 即创建自定义限制配置文件。
在新窗口或选项卡中转到使用 WebSocket 的页面，例如 Online WebSocket Tester。
在页面上，建立 WebSocket 连接。
如果使用 Online WebSocket 测试器 网页，请单击“ 连接 ”按钮。
如果未创建 PieSocket 帐户来获取 API 令牌，则网页将显示“已建立连接 - {”error“：”Unknown api key“}。
如果创建 PieSocket 帐户以获取 API 令牌，则网页只显示“已建立连接”。
右键单击网页，然后选择“ 检查”。
DevTools 随即打开。
在 DevTools 的 “网络 ”工具的“ 限制 ”下拉菜单中，选择“ 自定义>10kbps”。
该选项是在上一节创建自定义 限制配置文件中创建的。
在 Online WebSocket Tester 网页的消息文本框中，删除 DevTools 无限制，并输入 带限制的 DevTools。
在 “联机 WebSocket 测试器” 网页中，单击“ 发送 ”按钮。
Online WebSocket 测试器网页中的控制台显示带有限制的 DevTools。
在 “网络 ”工具顶部，选择“ 套接字 筛选器”按钮 (如下所示) 。
在表中，单击连接名称，例如 channel_123？api_key=...。
将显示选项卡。
选择“ 消息 ”选项卡 (如下所示) 。
将显示在客户端和服务器之间发送的 WebSocket 消息。
“ 时间 ”列显示消息的接收或发送时间。 这些时间值反映了受限制的网络连接。
从网络条件工具模拟慢速网络连接
在“网络”工具中，可以在 DevTools 底部的“快速视图”面板中打开“网络条件”工具，然后从那里限制网络连接：
在 “网络 ”工具中，单击“ 更多网络条件 (
) 按钮。
网络条件工具将在 DevTools 底部的“快速视图”面板中打开。在 “网络条件 ”工具的“ 网络限制 ”菜单中，选择连接速度。
另请参阅：
手动清除浏览器 Cookie
若要随时手动清除浏览器 Cookie，请右键单击 “请求” 表中的任意位置，然后选择“ 清除浏览器 Cookie”。
重写 HTTP 响应标头
另请参阅：
- 使用本地副本替代网页资源 (“替代”选项卡)
- 在本地替代 Web 内容和 HTTP 响应标头 中 替代文件和 HTTP 响应标头。
重写用户代理
若要手动替代用户代理，请执行以下作：
在“网络”工具中，单击“更多网络条件 (
网络条件工具将在 DevTools 底部的“快速视图”面板中打开。在 “网络条件 ”工具中，清除 “使用浏览器默认 ”复选框。 其他控件变为可用。
从菜单中选择用户代理选项，或在文本框中输入自定义用户代理。
设置用户代理客户端提示
如果站点使用用户代理客户端提示，并且你想要测试它们，则可以在 网络条件 工具或 模拟移动设备 (设备仿真) 进行设置。
若要在 网络条件 工具中设置用户代理客户端提示，请执行以下作：
在“网络”工具中，单击“更多网络条件 (
网络条件工具将在 DevTools 底部的“快速视图”面板中打开。在 “用户代理 ”部分中，清除 “使用浏览器默认 ”复选框，然后展开 “用户代理客户端提示”：
在 “用户代理 ”下拉列表中，选择预定义的浏览器和设备。 或者，接受默认值 Custom...，并在“ 输入自定义用户代理 ”文本框中输入信息。
对于预定义或自定义) (选项，请指定用户代理客户端提示，如下所示：
- 品牌 和 版本 ，例如 Edge 和 92。 若要添加多个品牌/版本对，请单击“ + 添加品牌”。
- 完整浏览器版本 ，例如 92.0.1111.0。
- 平台 和 版本 ，例如 Windows 和 10.0。
- 体系结构 ，例如 x86。
- 设备型号 ，例如 Galaxy Nexus。
可以设置或更改任何用户代理客户端提示;没有必需的值。
选择“更新”。
若要验证更改，请单击“ 控制台 ”并键入
navigator.userAgentData。 根据需要展开结果以查看对用户代理数据的更改。
另请参阅：
- 检测网站中的用户代理客户端提示Microsoft Edge。
搜索请求
若要跨请求标头、有效负载和响应进行搜索，请执行：
在 “网络 ”工具中，单击“ 搜索 (
) 按钮。 或者，按 Ctrl+F (Windows、Linux) 或 Command+F (macOS) 。“ 搜索 ”选项卡将在 “网络 ”工具的左侧打开。
在“ 查找 ”文本框中，输入查询字符串，然后按 Enter。
（可选）单击 “匹配大小写 ”按钮以启用区分大小写。 （可选）单击 “正则表达式 ”按钮以打开正则表达式。
单击其中一个搜索结果。 网络工具以黄色突出显示匹配的请求。 网络工具还会打开“标头”或“响应”选项卡，并突出显示其中匹配的字符串（如果有）。
若要刷新搜索结果，请在“ 搜索 ”选项卡中，单击“ 刷新 (
) 按钮。
若要清除搜索结果，请在“ 搜索 ”选项卡中，单击“ 清除搜索 (
) 按钮。
有关在 DevTools 中搜索的所有方式的详细信息，请参阅 使用搜索工具查找页面的源文件
筛选请求
可以按属性、类型或时间筛选请求，并且可以隐藏数据 URL。 “ 更多筛选器” 下拉列表包含以下选项和状态复选标记：
- 隐藏数据 URL
- 隐藏扩展 URL
- 阻止的响应 Cookie
- 阻止的请求
- 第三方请求
下拉列表左侧有一个数字，指示在下拉列表中选择了多少个筛选器。
按属性筛选请求
使用“ 筛选 ”文本框可以按属性（如请求的域或大小）筛选请求。
如果未显示文本框，“ 筛选器 ”窗格可能已隐藏;请参阅下面的 “隐藏筛选器”窗格。
“筛选器”文本框：
若要反转筛选器，请选中“筛选器”框旁边的“反转”复选框。
可以通过用空格分隔每个属性来同时使用多个属性。 例如， mime-type:image/png larger-than:1K 显示大于 1 KB 的所有 PNG。 多属性筛选器等效于 AND 作。
OR 不支持作。
支持的属性的完整列表：
| 属性 | 详细信息 |
|---|---|
cookie-domain |
显示设置特定 Cookie 域的资源。 |
cookie-name |
显示设置特定 Cookie 名称的资源。 |
cookie-path |
显示设置特定 Cookie 路径的资源。 |
cookie-value |
显示设置特定 Cookie 值的资源。 |
domain |
仅显示来自指定域的资源。 可以使用通配符 (*) 包含多个域。 例如， *.com 显示以 结尾的所有域名中的 .com资源。 DevTools 使用找到的所有域填充自动完成下拉菜单。 |
has-overrides |
显示已重写内容的请求、标头、任何替代 (是) ，或无替代 (无) 。 可以将相应的 Has 替代列添加到请求表。 |
has-response-header |
显示包含指定 HTTP 响应标头的资源。 DevTools 使用找到的所有响应标头填充自动完成下拉菜单。 |
is |
使用 is:running 查找 WebSocket 资源。 |
larger-than |
显示大于指定大小（以字节为单位）的资源。 将 值 1000 设置为 等效于将 值 1k设置为 。 |
method |
显示通过指定的 HTTP 方法类型检索的资源。 DevTools 使用找到的所有 HTTP 方法填充下拉菜单。 |
mime-type |
显示指定 MIME 类型的资源。 DevTools 使用找到的所有 MIME 类型填充下拉菜单。 |
mixed-content |
显示 () mixed-content:all 的所有混合内容资源，或者仅显示当前 (mixed-content:displayed) 的混合内容资源。 |
priority |
显示其优先级与指定值匹配的资源。 |
resource-type |
显示资源类型的资源，例如图像。 DevTools 使用它遇到的所有资源类型填充自动完成下拉列表。 |
response-header-set-cookie |
在“问题”选项卡中显示原始Set-Cookie标头。“网络”工具中将标记格式不正确的 Set-Cookie Cookie 标头。 |
scheme |
显示通过未受保护的 HTTP () scheme:http 或受保护的 HTTPS (scheme:https) 检索的资源。 |
set-cookie-domain |
显示具有 Set-Cookie 与指定值匹配的属性的标头 Domain 的资源。 DevTools 使用找到的所有 Cookie 域填充自动完成。 |
set-cookie-name |
显示具有 Set-Cookie 名称与指定值匹配的标头的资源。 DevTools 使用找到的所有 Cookie 名称填充自动完成。 |
set-cookie-value |
显示具有 Set-Cookie 标头的资源，其值与指定值匹配。 DevTools 使用找到的所有 Cookie 值填充自动完成。 |
status-code |
显示与特定 HTTP 状态代码匹配的资源。 DevTools 使用找到的所有状态代码填充自动完成下拉菜单。 |
url |
显示 URL 与指定值匹配的资源。 |
按类型筛选请求
若要按请求类型筛选请求，请单击 “网络 ”工具上的按钮： “全部”、“ 提取/XHR”、“ 文档”、“ CSS”、“ JS”、“ 字体”、“ Img”、“ 媒体”、“ 清单”、“ WS (WebSocket) ”、“ Wasm (WebAssembly) ”或“ 其他 ” (此处未列出的任何其他类型) 。
如果未显示按钮，“ 筛选器 ”窗格可能已隐藏。 请参阅下面的 “隐藏筛选器”窗格。
若要同时启用多个类型筛选器，请在 Windows、Linux) 或 macOS) (按住 Ctrl (命令，然后单击筛选器。
按时间筛选请求
在“ 概述 ”窗格中单击并向左或向右拖动，以仅显示在该时间段内处于活动状态的请求。 筛选器是非独占的。 显示突出显示时间内处于活动状态的任何请求。
筛选出大约 300 毫秒处于非活动状态的任何请求：
隐藏数据 URL
数据 URL 是嵌入到其他文档中的小型文件。 以 开头data:的“请求”表中显示的任何请求都是数据 URL。
若要隐藏请求，请关闭 “隐藏数据 URL ”复选框：
隐藏扩展 URL
若要专注于你创作的代码，可以筛选出可能安装在 Microsoft Edge 中的扩展发送的不相关的请求。 扩展请求的 URL 以 chrome-extension://开头。
若要隐藏扩展请求，请在 “筛选器” 作栏中，选择“ 更多筛选器 ”下拉菜单，然后选择“ 隐藏扩展 URL” ，使其旁边显示复选标记：
底部的状态栏显示总计中显示的请求数，例如 5/10 个请求。
仅显示包含阻止响应 Cookie 的请求
若要筛选出除因任何原因被阻止的响应 Cookie 的请求之外的所有内容，请在 “筛选器 ”作栏中，选择“ 更多筛选器” 下拉列表，然后选择“ 阻止的响应 Cookie” ，以便旁边会显示复选标记。
然后，若要了解阻止响应 Cookie 的原因，请选择“ 名称) ”下的请求 (，打开其“ Cookie” 选项卡， (右侧) ，然后将鼠标悬停在信息 (
) 图标上。
例如：
在 Microsoft Edge 中，选择 “设置”和“更多>新建 InPrivate”窗口。
在“地址”栏中，输入 “Microsoft.com”。
右键单击网页，然后选择“ 检查”。
DevTools 随即打开。
选择 “网络 ”工具。
确保已选择 “所有 筛选器”按钮。
刷新网页。
网络工具中列出了许多消息。
在 “筛选器” 作栏中，选择“ 更多筛选器” 下拉列表，然后选择“ 阻止的响应 Cookie”。
在菜单中，“ 阻止的响应 Cookie”旁边会显示一个复选标记。
单击下拉列表外部将其关闭。
将显示已阻止响应 Cookie 的请求，例如 id？d_visid_ver=...。
选择一个请求，例如 id？d_visid_ver=...。
边栏随即打开，其中包含选项卡。
选择“ Cookie” 选项卡。
将鼠标悬停在信息 (
) 图标上。工具提示显示，例如：“由于用户首选项，通过 Set-Cookie 标头设置 Cookie 的尝试被阻止。
底部的状态栏显示总计中显示的请求数。
此外， 网络 工具在请求旁边显示一个警告图标 (
) ，其中包含由于边缘标志或配置而阻止的 Cookie。 将鼠标悬停在图标上可查看带有提示的工具提示，然后单击它转到 “问题” 工具了解详细信息。
仅显示阻止的请求
若要筛选出除阻止的请求以外的所有内容，请在 “筛选器” 作栏中，选择“ 更多筛选器>阻止的请求”，以便显示复选标记。 若要对此进行测试，可以使用 DevTools 底部的“快速视图”面板中的网络请求阻止工具;请参阅检查网络活动中的阻止请求。
例如：
转到新窗口或选项卡中的网页，例如 “检查网络活动 ”演示页。
右键单击网页，然后选择“ 检查”。
DevTools 随即打开。
在 DevTools 中，选择 “网络 ”工具。
刷新网页。
“请求”表列出了
.html、.css、.png和.js文件。在“ 更多筛选器” 下拉列表中， (工具提示“ 仅显示/隐藏请求) ”，选择“ 阻止的请求”。
在下拉列表中，选中标记显示在 “阻止的请求”旁边。
单击下拉列表外部以将其关闭。
“请求”表为空，因为 DevTools 不会阻止任何请求，并且请求现在已筛选为仅显示阻止的请求。
按 一 次或两次 Esc，以便在 DevTools 底部打开 “快速视图 ”面板。
在 “快速视图 ”工具栏中，单击“ 更多工具 (
) 按钮，然后选择“ 网络请求阻止”。“网络请求阻止”工具在“快速视图”面板中打开。
在 “网络请求阻止 ”工具中，单击“ 添加网络请求阻止模式 ” (
) 按钮。在 “阻止匹配请求的文本模式 ”文本框中，输入 *.png，然后单击“ 添加 ”按钮。
*.png 已列出，带有复选标记。
在 网络 工具中， “请求” 表仍为空，因为尚未主动阻止任何请求。
刷新网页。
在演示网页中，显示的不是标题旁边的 Edge 徽标，而是显示一个损坏的图像图标，以及图像的替换文字 (Microsoft Edge DevTools 徽标) 。
在 “网络 ”工具中， “请求” 表仅列出
.png文件。 “请求数”表将阻止的请求突出显示为红色文本。在 “网络 ”工具中，底部的状态栏显示总计中显示的请求数，例如 2/5 个请求。
仅显示第三方请求
若要筛选除源与页面原点不同的请求之外的所有内容，请在 “筛选器” 作栏中，选择“ 更多筛选器>第三方请求”，以便显示复选标记。 在 “检查网络活动 ”演示页上试用。
底部的状态栏显示总计中显示的请求数。
对请求进行排序
默认情况下， “请求” 表中的请求按启动时间排序，但可以使用其他条件对表进行排序。
按列排序
单击 “请求” 中任意列的标头，按该列对请求进行排序。
按活动阶段排序
默认情况下， 瀑布 列处于关闭状态。 若要打开 “瀑布 ”列，请右键单击 “请求” 表标题，然后选择没有子菜单的纯 “瀑布” 菜单项。
若要更改 瀑布列 对请求的排序方式，
右键单击“ 请求” 表的标头，单击“ 瀑布图”，然后选择以下选项之一：
开始时间 - 启动的第一个请求位于顶部。
响应时间 - 开始下载的第一个请求位于顶部。
结束时间 - 完成的第一个请求放置在顶部。
总持续时间 - 将具有最短连接设置和请求或响应的请求置于顶部。
延迟 - 等待响应的最短时间的请求放置在顶部。
这些说明假定每个选项的排名从最短到最长。 单击 瀑布 列的标题可反转顺序。
下面演示了如何按总持续时间对瀑布图进行排序。 每个条形图较轻的部分是等待时间，较暗的部分是下载字节所花费的时间：
分析请求
只要 DevTools 处于打开状态，它都会记录 网络 工具中的所有请求。 使用 网络 工具分析请求。
显示请求日志
使用 Requests 表可显示 DevTools 打开时发出的所有请求的日志。 若要显示有关每个项的详细信息，请单击或将鼠标悬停在请求上。
“请求”表默认显示以下列：
- 名称。 资源的文件名或资源的标识符。
- 状态。 HTTP 状态代码。
- 类型。 所请求资源的 MIME 类型。
-
发起方。 以下对象或进程可以启动请求：
- 分析器。 HTML 分析程序。
- 重定向。 HTTP 重定向。
- 脚本。 JavaScript 函数。
- 其他。 其他一些过程或作，例如通过链接导航到页面或在地址栏中输入 URL。
- 大小。 响应标头和响应正文的组合大小，由服务器传递。
- 时间。 从请求开始到响应中最终字节的接收的总持续时间。
- 实现者。 请求是由 HTTP 缓存还是应用的服务辅助角色完成。
默认情况下， 瀑布 列处于关闭状态。 若要打开 “瀑布” 列，请右键单击 “请求” 表标题，然后选择没有子菜单的纯 “瀑布” 菜单项。
添加或删除列
右键单击 “请求” 表的标题，然后选择一个列名来隐藏或显示它。 当前显示的列旁边有复选标记。
为响应标头添加自定义列
若要向 Requests 表添加自定义列 ， 请执行以下作：
右键单击“ 请求” 表的标头，然后选择“ 响应标头>”“管理标头列”。
此时会打开 “管理标题列” 弹出窗口。
单击“ 添加自定义标头 ”按钮，输入自定义标头名称，然后单击“ 添加”。
按内联帧对请求进行分组
如果页面上的内联帧启动大量请求，可以通过分组使请求日志更友好。
按 iframe 对请求进行分组：
在新窗口或选项卡中转到网页，例如 “网络工具参考演示”。
右键单击网页，然后选择“ 检查”。
DevTools 随即打开。
在 DevTools 中，选择 “网络 ”工具。
刷新网页。
在 “网络 ”工具的 “请求” 表中，将显示以下行：
-
devtools-network-reference/(index.html) style.cssscript.js
-
在演示网页中，单击“ 加载 iframe” 按钮。
请求表中会添加许多行：
在 “网络 ”工具中，单击“ 网络设置 ” (
) 按钮，然后选中“ 按帧分组 ”复选框。在 “请求” 表中，显示可展开的框架名称。
在 “请求” 表中，单击框架上的展开器三角形。
将显示内联框架发起的请求：
显示请求的计时关系
使用“请求”窗格的“瀑布”列可以查看请求的计时关系。 瀑布列的默认组织使用请求的开始时间。 因此，距离左侧较远的请求开始的时间早于向右的请求。
默认情况下， 瀑布 列处于关闭状态。 若要打开 “瀑布” 列，请右键单击 “请求” 表标题，然后选择没有子菜单的纯 “瀑布” 菜单项。
若要查看对瀑布进行排序的不同方式，请参阅上面的 按活动阶段排序。
“请求”窗格的瀑布列：
分析 WebSocket 连接的消息
查看 WebSocket 连接的消息：
转到网页，例如 Online Websocket Tester。
右键单击网页，然后选择“ 检查”。
DevTools 随即打开。
选择 “网络 ”工具。
默认情况下，“ 所有 筛选器”按钮处于选中状态。 “ 网络 ”面板为空，不显示任何消息。
刷新网页。
在 网络 工具的 “请求数” 表中，列出了许多请求。
在 “网络 ”工具顶部，选择“ 套接字 筛选器”按钮，其中包含工具提示： WebSocket |Web 传输 |DirectSocket。
筛选的请求列表为空。
在“联机 Websocket 测试器”网页中，单击“ 连接 ”按钮。
如果尚未设置帐户和 API 令牌，页面将显示：
- 已建立连接
- {“error”：“Unknown api key”} ，三角形指向下;从服务器发送到浏览器。
在 “网络 ”工具的“ 消息 ”选项卡中，将显示请求：
- channel_123？api_key=...
在请求列表中，选择 WebSocket 连接，例如 channel_123？api_key=...。
边栏随即打开，其中包含选项卡。
选择“ 消息 ”选项卡。
如果未注册 API 令牌，“ 消息 ”选项卡将列出消息：
- {“error”：“Unknown api key”} ，带红色向下箭头;从服务器发送到浏览器。
在“联机 Websocket 测试程序”网页的文本框中，将 “Hello PieSocket！” 更改为 “Hello world！”，然后单击“ 发送 ”按钮。
在网页中，控制台显示消息 Hello world！ ，并带有一个三角形指向;从浏览器发送到服务器。
在 “网络 ”工具的“ 消息 ”选项卡中，该表显示最后 100 条消息;在这种情况下，将添加消息：
- 世界您好！ 带绿色向上箭头;从浏览器发送到服务器：
注意：若要从服务器) 获取 (回显的红色向下箭头消息，以及绿色向上箭头消息，需要：
在 PieSocket 站点创建帐户。 这会创建 API 令牌。
在 PieSocket 站点上创建群集。
在“PieSocket 仪表板”页中，单击“联机测试”按钮。
“ Online WebSocket 测试程序 ”页随即打开，其中包含查询参数。
单击“ 连接 ”按钮。
若要刷新 “请求” 表，请在“ 名称 ”窗格中再次单击 WebSocket 连接的名称。
Requests 表包含以下三列：
数据。 消息有效负载。 如果消息为纯文本，则会在此处显示。 对于二进制作码，此列显示作码的名称和代码。 支持以下作代码：
- 延续框架
- 二进制帧
- 连接关闭框架
- Ping 帧
- Pong Frame
长度。 消息有效负载的长度（以字节为单位）。
时间。 接收或发送消息的时间。
分析流中的事件
若要查看服务器通过提取 API、EventSource API 和 XHR 流式传输的事件，请执行以下作：
在新窗口或选项卡中转到流式传输事件的网页，例如 网络工具参考演示。
右键单击网页，然后选择“ 检查”。
DevTools 随即打开。
在 DevTools 中，选择 “网络 ”工具。
刷新网页。
在 “网络 ”工具的 “请求” 表中，将显示以下行：
-
devtools-network-reference/(index.html) style.cssscript.js
-
在演示网页中，单击Stream服务器发送的事件按钮。
在 “请求” 表中，
sse将添加 (服务器发送的事件) 行。选择
sse(服务器发送的事件) 请求。将打开边栏，包括 “EventStream ”选项卡。
选择“ EventStream ”选项卡：
每秒接收并显示一条新的“hello”消息。
若要筛选事件，请在 “EventStream ”选项卡顶部的筛选器栏中指定正则表达式。
若要清除捕获的事件列表，请单击“ 清除 (
) 按钮。
另请参阅：
- 使用提取 API
- 服务器发送的事件 - EventSource API。
- XMLHttpRequest - XHR。
显示响应正文的预览
预览 HTTP 响应正文的内容：
在 “网络 ”工具的 “请求” 表中的“ 名称” 列中，单击请求的名称。
在边栏中，选择“ 预览 ”选项卡：
“ 预览 ”选项卡主要用于查看图像。
显示响应正文
显示请求的响应正文：
在 “请求” 表中的“ 名称 ”列中，单击请求的名称。
在边栏中，选择“ 响应 ”选项卡：
显示 HTTP 标头
显示有关请求的 HTTP 标头数据：
在 “请求” 表中，单击请求的名称。
在边栏中，选择“ 标题 ”选项卡，然后向下滚动到各个部分：
- 常规
- 早期提示标头 (可选)
- 响应标头
- 请求标头
查看 HTTP 标头源
默认情况下，“ 标头 ”选项卡按字母顺序显示标题名称。 若要按接收 HTTP 标头名称的顺序显示它们：：
转到使用 XHR 的网页，例如，在新窗口或选项卡中 ，在 Microsoft Edge 中删除 -ms-high-contrast 和采用基于标准的强制颜色。
如果出现，请接受横幅提示中的 Cookie。
在一般数据保护条例 (GDPR) 强制实施的区域，此网站会显示 Cookie 横幅，并且不会 (以下) 发送
collect请求，除非你接受横幅中的 Cookie。右键单击网页，然后选择“ 检查”。
DevTools 随即打开。
选择 “网络 ”工具。
刷新网页。
在 “请求” 表中，列出了许多请求。
单击顶部的红色 “停止记录网络日志 (
) 按钮。在 “请求” 表中，单击“ 名称” 列以按字母顺序对请求进行排序，然后选择 收集 请求。
边栏随即打开，其中包含选项卡。
选择“ 标头 ”选项卡：
选中“响应标头”或“请求标头”部分旁边的“原始”复选框。
另请参阅：
临时标头警告
有时，“ 标头 ”选项卡显示警告消息 临时标头。 这可能是由于以下原因：
- 请求不是通过网络发送的，而是从本地缓存提供，该缓存不存储原始请求标头。
- 网络资源无效。
- 出于安全原因。
假设请求不是通过网络发送的，而是从本地缓存提供，该缓存不存储原始请求标头。 在这种情况下，你可以选中“网络”工具顶部的“禁用缓存”复选框，以查看完整的请求标头。 例如：
转到 “检查网络活动 ”演示页。
右键单击网页，然后选择“ 检查”。
DevTools 随即打开。
选择 “网络 ”工具。
刷新网页。
选择 getstarted.js 网络请求。
“ 请求标头 ”部分显示消息： 显示临时标头。禁用缓存以查看完整的标头。
选中“网络”工具顶部的“禁用缓存”复选框。
刷新网页。
选择 getstarted.js 网络请求。
“ 请求标头 ”部分不再显示消息;将显示完整的请求标头。
另请参阅：
查看请求有效负载 (查询字符串参数和表单数据)
若要查看 HTTP 请求的有效负载 (查询字符串参数并形成数据) ，请从“ 请求 ”表中选择一个请求，然后在边栏中选择“ 有效负载 ”选项卡，如下所示：
在新窗口或选项卡中转到网页，例如 “网络工具参考演示”。
右键单击网页，然后选择“ 检查”。
DevTools 随即打开。
在 DevTools 中，选择 “网络 ”工具。
刷新网页。
在 “网络 ”工具的 “请求” 表中，将显示以下行：
-
devtools-network-reference/(index.html) style.cssscript.jsfavicon.png
-
在演示网页中，单击“ 发送表单数据 ”按钮。
在 “网络 ”工具的 “请求” 表中，添加了一行：
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的有效负载：
在“ 查询字符串参数” 部分标题旁边，单击“ 查看源 ”按钮。
在“ 窗体数据 ”部分标题旁边，单击“ 查看源 ”按钮。
将显示有效负载的源信息：
显示 URL 编码的查询字符串参数
若要以用户可读格式显示查询字符串参数，但保留编码，请执行以下作：
在新窗口或选项卡中转到使用查询字符串参数的网页，例如 网络工具参考演示。
右键单击网页，然后选择“ 检查”。
DevTools 随即打开。
在 DevTools 中，选择 “网络 ”工具。
刷新网页。
“请求”表列出了
.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。边栏随即打开，其中包含选项卡。
在边栏中，选择“ 有效负载 ”选项卡。
“查询字符串参数”部分显示已解码的 URL，如下所示：
https://contoso.com/àéèôçл
在 “查询字符串参数 ”部分中，单击“ 查看 URL 编码” 按钮。
URL 现在显示有编码字符 (，例如
%3A和%2F) ;按钮标签将更改为“已解码的视图”：
单击“ 查看解码” 按钮。
该 URL 再次显示解码字符，如：
https://contoso.com/àéèôçл，按钮标签将重新更改为“查看 URL 编码”。
显示 Cookie
显示请求的 HTTP 标头中发送的 Cookie：
在 “请求” 表中，单击请求的名称。
在边栏中，选择“ Cookie” 选项卡：
有关每个列的详细信息，请参阅查看、编辑和删除 Cookie 中的字段。
若要修改 Cookie，请参阅 查看、编辑和删除 Cookie。
显示请求的计时细分
显示请求的计时细目：
在“请求”表中，单击请求的名称。
在边栏中，选择“ 计时 ”选项卡。
若要更快地访问数据，请参阅 预览计时明细。
有关可能在 “计时 ”面板中显示的每个阶段的详细信息，请参阅 计时细分阶段说明。
预览计时明细
若要显示请求的计时细目预览，请在“请求”表的“瀑布”列中，将鼠标悬停在请求的条目上。
默认情况下， 瀑布 列处于关闭状态。 若要打开 “瀑布” 列，请右键单击 “请求” 表标题，然后选择没有子菜单的纯 “瀑布” 菜单项。
若要在不悬停的情况下查看数据，请参阅本部分顶部 显示请求的计时细分。
计时细分阶段说明
以下每个阶段都可能出现在“ 计时 ”选项卡中：
排队。 当以下任一项为 true 时，浏览器将请求排队
- 有更高的优先级请求。
- 此源已打开六个 TCP 连接，这是限制。 仅适用于 HTTP/1.0 和 HTTP/1.1。
- 浏览器在磁盘缓存中短暂分配空间。
已停止。 请求可能会因 排队中所述的任何原因而停止。
DNS 查找。 浏览器正在解析请求的 IP 地址。
初始连接。 浏览器正在建立连接，包括 TCP 握手和重试，以及协商安全套接字层 (SSL) 。
代理协商。 浏览器正在与 代理服务器协商请求。
请求已发送。 正在发送请求。
ServiceWorker 准备。 浏览器正在启动服务辅助角色。
向 ServiceWorker 请求。 正在将请求发送到服务辅助角色。
正在等待 TTFB () 。 浏览器正在等待响应的第一个字节。 TTFB 代表 Time To First Byte。 此计时包括一次往返延迟和服务器准备响应所花费的时间。
内容下载。 浏览器正在接收响应。
接收推送。 浏览器通过 HTTP/2 服务器推送接收此响应的数据。
读取推送。 浏览器正在读取以前收到的本地数据。
显示发起方和依赖项
若要显示请求的发起方和依赖项，请按住 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 中，选择 “网络 ”工具。
刷新网页。
右键单击“ 请求 ”表中的任何请求，然后选择“ 复制>全部作为 HAR (清理) ：
或者，在 网络 工具顶部的作栏中，单击“ 导出 HAR (净化) (
) 按钮。
DevTools 将打开 DevTools 后发生的所有请求保存到 HAR 文件。
无法筛选请求，也不能保存单个请求。
若要将所有网络请求保存到 HAR 文件（包括敏感数据），请执行以下作：
在 DevTools 中，选择“ 自定义”并控制“DevTools>设置”。
此时会打开 “设置>首选项” 页。
向下滚动到“ 网络 ”部分。
选中复选框 “允许生成包含敏感数据的 HAR”。
单击 “关闭 (
) 按钮。在 “网络 ”工具中，右键单击“ 请求” 表中的任何请求，然后选择“ 复制>全部作为 HAR (，其中敏感数据) 。
或者，在顶部的作栏中，单击“ 导出 HAR () (
) 按钮，然后选择“ 导出包含敏感数据的 HAR () ：
将 HAR 文件导入 DevTools 进行分析
拥有 HAR 文件后，可以使用 HAR 分析器将其导入回 DevTools 进行分析。
若要将 HAR 文件导入 DevTools 进行分析，请执行以下作：
在 网络 工具顶部的作栏中，单击“ 导入 HAR 文件 (
) 按钮。或者，将 HAR 文件拖到 “请求” 表中。
网络工具读取并显示从 HAR 文件导入的请求的发起程序。 对于发起方，请参阅上面的 显示请求日志。
将网络请求复制到剪贴板
在“请求”表的“名称”列下，右键单击请求，将鼠标悬停在“复制”上，然后选择以下选项之一。
复制单个请求、其响应或其堆栈跟踪：
| 名称 | 详细信息 |
|---|---|
| 复制 URL | 将请求的 URL 复制到剪贴板。 |
| 复制为 cURL (cmd) | 将请求复制为cURL命令。 |
| 复制为cURL (bash) | |
| 复制为 PowerShell | 将请求复制为 PowerShell 命令。 |
| 复制为提取 | 复制请求作为提取调用。 |
| 复制为提取 (Node.js) | 将请求复制为 Node.js 提取调用。 |
| 复制响应 | 将响应正文复制到剪贴板。 |
| 复制堆栈跟踪 | 将请求的堆栈跟踪复制到剪贴板。 此菜单项仅针对由 JavaScript 代码触发的请求（例如 Fetch 或 XHR 请求）显示。 请参阅上面的 重播 XHR 请求。 |
复制所有请求：
| 名称 | 详细信息 |
|---|---|
| 复制所有 URL | 将所有请求的 URL 复制到剪贴板。 |
| 将所有复制为 cURL (cmd) | 将所有请求复制为cURL命令链。 |
| 将所有复制为cURL (bash) | |
| 将全部复制为 PowerShell | 将所有请求复制为 PowerShell 命令链。 |
| 全部复制为提取 | 复制所有请求作为提取调用链。 |
| 全部复制为提取 (Node.js) | 将所有请求复制为 Node.js 提取调用的链。 |
| 将所有复制为 HAR (净化) | 将所有请求复制为 HAR 数据，不包含敏感数据（如 Cookie、 Set-Cookie和 Authorization 标头）。 |
| 使用敏感数据) 将全部复制为 HAR ( | 将所有请求复制为包含敏感数据的 HAR 数据。 如果选中“自定义和控制 DevTools> 设置首选项”>页>“网络”部分>“允许生成包含敏感数据的 HAR”复选框，将显示命令。 |
若要复制筛选的请求集，请将筛选器应用于网络日志，右键单击请求，然后选择：
| 名称 | 详细信息 |
|---|---|
| 复制所有列出的 URL | 将所有筛选的请求的 URL 复制到剪贴板。 |
| 复制列为cURL (cmd) 的所有内容 | 将所有筛选的请求复制为cURL命令链。 |
| 复制所有列为cURL (bash) | 将所有筛选的请求复制为cURL命令链。 |
| 复制作为 PowerShell 列出的所有内容 | 将所有筛选的请求复制为 PowerShell 命令链。 |
| 复制列为提取的所有内容 | 将所有筛选的请求复制为一个提取调用链。 |
| 复制列出的所有提取 (Node.js) | 将所有筛选的请求复制为 Node.js 提取调用的链。 |
| 复制所有列为 HAR (净化) | 将所有筛选的请求复制为 HAR 数据，而不用敏感数据（如 Cookie、 Set-Cookie和 Authorization 标头）。 |
| 复制列出的所有包含敏感数据的 HAR () | 将所有筛选的请求复制为包含敏感数据的 HAR 数据。 如果选中“自定义和控制 DevTools> 设置首选项”>页>“网络”部分>“允许生成包含敏感数据的 HAR”复选框，将显示命令。 |
另请参阅：
- 筛选请求，如上所示。
将格式化响应 JSON 复制到剪贴板
复制 JSON 响应的格式化 JSON 数据：
在 “请求” 表中，单击导致 JSON 响应的请求的名称。
在边栏中，选择“ 预览 ”选项卡。
右键单击格式化的 JSON 响应预览的第一行，然后选择“ 复制值”。
现在可以将值粘贴到任何编辑器中。
将属性值从网络请求复制到剪贴板
将属性值从网络请求复制到剪贴板：
在“请求”表中，单击请求的名称。
在边栏中，选择“ 有效负载 ”选项卡：
展开以下部分之一。
- 请求有效负载 (JSON)
- 表单数据
- 查询字符串参数
- 请求标头
- 响应标头
右键单击某个值，然后选择“ 复制值”。 现在可以将值粘贴到任何编辑器中。
更改网络工具的布局
可以展开或折叠 网络 工具 UI 的各部分，以集中重要信息。
隐藏“筛选器”窗格
默认情况下，DevTools 会显示“ 筛选器 ”窗格。 若要隐藏“ 筛选器 ”窗格，请选择“ 筛选器 (
) 。
使用大请求行
在网络请求表中需要更多空格时，请使用大请求行。 使用大行时，某些列还提供一些更多信息;例如：
“大小”列的底部值是请求的未压缩大小。
默认情况下， “优先级” 列 (不显示) 同时显示初始 (底值) 和最终 (最大值) 提取优先级。
若要启用大行，请：
转到新窗口或选项卡中的网页，例如 “检查网络活动 ”演示页。
右键单击网页，然后选择“ 检查”。
DevTools 随即打开。
在 DevTools 中，选择 “网络 ”工具。
刷新网页。
请求以小行显示。
在 “网络 ”工具中，单击“ 网络设置 ” (
) 按钮，然后选择“ 大请求行 ”复选框。请求显示在大行中：
隐藏“概述”窗格
默认情况下，DevTools 显示“ 概述 ”窗格。 若要隐藏“ 概述 ”窗格，请清除“ 显示概述 ”复选框。
另请参阅
- 检查网络活动 - 网络工具的 分步演练和简介。
演示网页：
注意
此页面的某些部分是根据 Google 创建和共享的作品所做的修改，并根据 Creative Commons Attribution 4.0 International License 中描述的条款使用。 原始页面 在此处 找到，由凯斯·巴斯克创作。
本作品根据 Creative Commons Attribution 4.0 International License 获得许可。