Microsoft Edge DevTools 中的实验性功能

Microsoft Edge DevTools 提供对仍在开发中的试验功能的访问权限。 本文列出并介绍了以下任一中的试验性功能：

Microsoft Edge 的所有通道都具有试验性功能。 可以使用 Microsoft Edge Canary 通道获取最新的实验性功能。 若要查看 Microsoft Edge 版本中可用的试验的完整列表，请参阅 DevTools 中的“设置试验”>页。

这些试验可能不稳定或不可靠，可能需要重启 DevTools。

默认情况下，以下实验性功能处于打开状态。 你可以立即使用这些功能，而无需更改任何设置。 如果需要，可以关闭这些默认的实验性功能。

在 Microsoft Edge Canary 128 中默认启用：

在 Microsoft Edge Stable 125 中默认启用：

实验性功能不断更新，可能会导致性能问题。 这是你可能想要关闭试验的原因之一。

若要在 Microsoft Edge 中打开或关闭试验，请执行以下操作：

要打开 DevTools，请右击网页，然后选择“检查”。 或者，按 Ctrl+Shift+I (Windows、Linux) 或 Command+Option+I (macOS) 。 DevTools 随即打开。

在 DevTools 中的主工具栏上，单击“ 自定义和控制 DevTools () ”按钮，然后单击 “设置 () 按钮。 或者，按 Shift+？。

在 “设置” 面板左侧，选择“ 试验” 页：

选中或清除试验的复选框。 某些试验默认处于选中状态。

单击“ 关闭 ” ( 右上角) “关闭 ”图标。

单击“ 重新加载 DevTools” 按钮。

若要还原为其启用实验功能的默认设置，请执行以下操作：

要打开 DevTools，请右击网页，然后选择“检查”。 或者，按 Ctrl+Shift+I (Windows、Linux) 或 Command+Option+I (macOS) 。 DevTools 随即打开。

在 DevTools 的主工具栏上，单击 “设置 () 按钮。 或者，按 Shift+？。 “设置”面板随即打开，其中选择了“首选项”页。

在 “首选项” 页底部，单击“ 还原默认值并刷新 ”按钮，然后单击“ 关闭 ” ( 。

可以按标题中包含的文本筛选实验性功能。

要打开 DevTools，请右击网页，然后选择“检查”。 或者，按 Ctrl+Shift+I (Windows、Linux) 或 Command+Option+I (macOS) 。 DevTools 随即打开。

在 DevTools 的主工具栏上，单击 “设置 () 按钮。 或者，按 Shift+？。 “设置”面板随即打开，其中选择了“首选项”页。

在 “设置” 面板左侧，选择“ 试验” 页。

在“ 筛选器 ”文本框中单击并输入文本，例如 时间线。 键入时，“ 试验 ”页中仅显示匹配的复选框。

若要结束筛选，请清除 “筛选器 ”文本框。

我们渴望听到你关于实验功能的反馈。 若要与我们共享反馈， 请联系 Microsoft Edge DevTools 团队。

下面列出了在 Microsoft Edge 的 Canary 预览频道最新版本中显示的试验复选框。 在 Canary 中添加或删除复选框之后，还记下了稳定版本。

某些Microsoft Edge 加载项可以为 DevTools 定义自定义颜色主题。 如果安装为 DevTools 定义自定义颜色主题的加载项，则需要启用 “允许扩展加载自定义样式表” 试验以查看加载项主题。

另请参阅：

状态：

若要在运行时将 DOM 节点添加到 DOM 时捕获 JavaScript 堆栈跟踪，请启用此试验。 此试验在“元素”工具中添加“堆栈跟踪”选项卡，并使用“样式”选项卡分组：

启用试验后，可以按如下所示对其进行测试：

另请参阅：

状态：

使 协议监视器 工具在 DevTools 中可用：

协议监视器工具显示 DevTools 发送和接收的消息，以调试检查的页面。 DevTools 使用 Chrome DevTools 协议 (CDP) 与检查页面通信。

若要选中此复选框，然后打开 “协议监视器 ”工具，请执行以下操作：

选中此 协议监视器 复选框，如上面 打开或关闭试验中所述。

在 DevTools 底部的 “快速视图 ”中，单击“ 更多工具 (+) ”按钮，然后选择“ 协议监视器”。

或者，打开 命令菜单，例如按 Ctrl+Shift+P (Windows/Linux) 或 Command+Shift+P (macOS) ，然后在文本框中键入 协议 。 然后选择“ 显示协议监视器”。

协议监视器工具显示在 DevTools 底部的“快速视图”面板中。

另请参阅：

状态：

自 Microsoft Edge 105 起新增功能

是否显示一个复选框以在 内存 工具的堆快照中公开内部。

另请参阅：

状态：

自 Microsoft Edge 124 起新增功能

在“内存”工具中配置“浅层大小”列，以报告对象的全部大小，包括对象的后备存储区的大小。 如果启用此试验，则当你拍摄新的堆快照时， “浅表大小 ”列现在包括整个大小的对象：

默认情况下，“内存”工具中的“浅层大小”列仅包含对象本身的大小。 浅层大小是对象直接持有的 JavaScript 堆的大小。 对象的浅表大小通常很小，因为 JavaScript 对象通常只将对象的描述（而不是值）存储在对象的直接保留内存中。 大多数 JavaScript 对象将其值存储在 JavaScript 堆中其他位置的 后备存储 中，并且仅在该对象直接拥有的 JavaScript 堆部分公开一个小包装器对象。 例如，JavaScript Array 实例将数组的内容存储在后备存储中，该存储是数组的浅表大小中未包括的单独内存位置。

另请参阅：

状态：

自 Microsoft Edge 122 起新增功能

暂时禁用 源 工具中的缩进标记。 缩进标记是指示代码缩进级别的垂直线：

另请参阅：

状态：

使用源映射在计算表达式时自动将原始变量名称映射到缩小的变量名称。

此复选框会影响“控制台”和“源”工具中的“监视”边栏选项卡。

另请参阅：

状态：

设置启动时所有可能定义的断点。

另请参阅：

状态：

高级感知对比度算法 (APCA) 取代了颜色选取器中的 AA/AAA 准则对比率。 颜色选择器在“元素”工具的“样式”选项卡中使用。

APCA 是一种计算对比度的新方法。 它基于对颜色感知的新式研究。 与 AA/AAA 准则相比，APCA 更依赖于上下文。 对比度是根据文本、颜色和上下文的以下空间属性计算的。

另请参阅：

状态：

在“元素”工具中添加“切换到辅助功能树视图”按钮，用于在 DOM 树和辅助功能树之间切换。 按钮标签切换为 切换到 DOM 树视图。

如果清除此试验复选框，则 元素 工具缺少按钮：

如果选中此“试验”复选框，则 “元素” 工具具有按钮：

“元素”工具中的“辅助功能树”视图：

另请参阅：

状态：

可以使用可视 字体编辑器 编辑字体。 使用它来定义字体和字体特征。 视觉字体 编辑器 可帮助你执行以下操作：

若要使用可视 字体编辑器，请执行以下操作：

要打开 DevTools，请右击网页，然后选择“检查”。 或者，按 Ctrl+Shift+I (Windows、Linux) 或 Command+Option+I (macOS) 。 DevTools 随即打开。

在 DevTools 中，在主工具栏上，选择“ 元素 ”选项卡。如果“ 元素 ”选项卡不可见，请单击“ 更多选项卡 () 按钮，或者单击“ 更多工具 () 按钮。

在“ 样式 ”选项卡中，选择“ 字体编辑器” 图标。

某些浏览器频道在 “样式”窗格中具有复选框标签“启用新的字体编辑器工具”。

另请参阅：

状态：

这是 Edge Stable 125 中的复选框标签。

请参阅上一部分，其中显示了复选框的较新标签。

在“问题”工具中启用自动对比度 问题 报告。

另请参阅：

状态：

启用实验性 Cookie 功能。

另请参阅：

状态：

是否同步“元素”工具的“样式”选项卡中的 CSS 更改。

另请参阅：

状态：

自 Microsoft Edge 106 起新增功能

突出显示 元素 工具 DOM 树中的违规节点或属性。

另请参阅：

状态：

自 Microsoft Edge 104 起新增功能

控制是否在“源”工具的“页面”选项卡中将资源分组到单独的“创作”树和“已部署”树中。 源工具中的此功能允许将源文件分组到两个文件夹中，具体取决于这些文件是否为：

另请参阅：

状态：

自 Microsoft Edge 106 起新增功能

在 “源” 工具的树视图中，省略“忽略”列表中包含的代码。

另请参阅：

状态：

自 Microsoft Edge 128 起的新复选框标签

选中此复选框会突出显示当前所选 DOM 树元素的工具（如“元素”工具）的“属性”选项卡中的重要 DOM 属性。 此新试验使主要属性更易于查看。 某些属性以粗体显示，其他属性以粗体显示，旁边有一个星形图标。

此突出显示很有用，因为在 JavaScript 中，对象继承自父对象，而父对象本身继承自其他上级对象，有时相当于数百个属性。 此试验可帮助你查找主要属性。

对象属性查看器包含多个工具，包括 元素、 源、 控制台和 网络。 它提供对象的属性树视图。

若要在 “元素 ”工具中查看对象属性查看器，请执行以下操作：

右键单击网页中的项目，然后选择“ 检查”。 DevTools 随即打开，并在“元素”工具的 DOM 树中选择了页面 元素 。

在 “元素” 工具中，选择“ 属性 ”选项卡，该选项卡与 “样式 ”选项卡分组。

“ 属性 ”选项卡包含所选元素的属性列表。

另请参阅：

若要在 源 工具中查看对象属性查看器，请执行以下操作：

打开文件 .js 。

在文件中的代码 .js 行上设置断点。

通过在网页上运行代码，将调试器暂停到该行。

对象属性显示在右侧边栏中的 “作用域 ”部分中。 请参阅在 JavaScript 调试功能中查看和编辑属性和变量。

另请参阅：

状态：

自 Microsoft Edge 105 起新增功能

请参阅上一部分，其中显示了复选框的较新标签。

自 Microsoft Edge 128 起的新标签

启用后台页面选择器，例如用于预呈现调试。

另请参阅：

状态：

自 Microsoft Edge 114 起新增功能

请参阅上一部分，其中显示了复选框的较新标签。

自 Microsoft Edge 120 起新增功能

在 “网络 ”工具中，重新设计了筛选器栏：

清除了此复选框的筛选器栏：

选中了此复选框的筛选器栏：

另请参阅：

状态：

自 Microsoft Edge 125 起新增功能

向 DevTools 添加 自动填充 工具，以记录当用户使用浏览器的自动填充功能填写表单时浏览器触发的各种事件。 例如，当浏览器记住你的地址并在地址字段中自动填充它时。

另请参阅：

状态：

此试验改进了 性能 工具的 Main 部分，以帮助你快速识别 postMessage 事件和处理程序，方法是将 方法触发 postMessage 的事件与 性能 工具中显示的其他事件区分开来。 此试验可帮助你调查与跨应用程序的各个线程发布消息相关的性能问题，以查看窗口、iframe 和专用辅助角色之间的消息。

如果没有此试验，通过调度和处理应用程序线程之间的消息触发的事件显示为泛型脚本函数调用事件。 启用此试验后：

此试验可帮助你调查 postMessage 何时发生调用，以及消息在 postMessage 处理程序启动前排队的时间。 调度事件通过单击任一类型的事件时显示的发起程序箭头链接到处理程序事件：

另请参阅：

状态：

自 Microsoft Edge 124 起新增功能

请参阅上一部分，其中显示了复选框的较新标签。

自 Microsoft Edge 128 起的新标签

添加了在 性能 工具中持久保存对跟踪文件所做的以下更改的功能，并在导入跟踪时重新应用这些更改：

使用痕迹导航所做的更改。 借助此功能，可以裁剪到跟踪中更相关的部分，并专注于跟踪的更相关部分。 请参阅 DevTools (Chrome 122) 中的新增功能中的时间线中的痕迹导航。

通过右键单击曲目所做的更改。借助此功能，可以合并和隐藏跟踪的多余的或不相关的条目，从而清理火焰图表和树。 请参阅 DevTools (Chrome 124) 中的新增功能中的隐藏函数及其子级。

另请参阅：

状态：

自 Microsoft Edge 125 起新增功能

请参阅上一部分，其中显示了复选框的较新标签。

自 Microsoft Edge 128 起新增功能

在 性能 工具中，添加未记录性能跟踪时显示的登陆页。 登陆页显示有关实时更新的呈现页面的性能指标，例如：

另请参阅：

状态：

控制是否在 控制台 工具中记录 DevTools 未捕获的异常。

另请参阅：

状态：

webhint 是一个开源代码工具，可为网站和本地网页提供实时反馈。 webhint 提供的反馈类型包括：

webhint 试验在“问题”工具中显示 webhint 反馈。 选择问题以显示有关解决方案的文档以及网站上受影响的资源列表。 选择资源链接以打开相关工具，例如 网络、 源或 元素：

另请参阅：

状态：

在 “元素” 工具的 DOM 节点下，将语法错误显示为波浪下划线。

另请参阅：

状态：

Visual Studio Code 中的“打开源文件”试验将源工具的代码编辑器替换为 Visual Studio Code，用于编辑本地文件。 打开此试验时，开发人员工具会检测何时编辑本地文件，并提示选择要用作工作区的文件夹。

选择要用作工作区的文件夹时，选择 DevTools 中文件的任何链接将在 Visual Studio Code 中打开该文件。 在早期版本的 Microsoft Edge 中，此操作在 DevTools 中源工具的代码编辑器中打开了该文件。

在 DevTools 中所做的任何编辑现在会更改硬盘驱动器上的文件，并与 Visual Studio Code 实时同步。

另请参阅：

状态：

自 Microsoft Edge 114 起新增功能

启用自适应 CPU 限制。

另请参阅：

状态：

是否在 “性能 ”工具中包含 JavaScript 帧中的“忽略”列表中的代码。

另请参阅：

状态：

控制是否实时更新堆配置文件。

另请参阅：

状态：

控制是否在 性能 工具中显示采样堆探查器时间线。

另请参阅：

状态：

在“性能”工具的“摘要”选项卡中添加“重新计算样式”事件的“无效”部分。 “失效”部分提供有关“重新计算样式”事件的根本原因的信息，在调查导致性能问题的长时间运行的“重新计算样式”事件时，这可能有所帮助。

“无效”部分列出了由于网页上的更改（如 DOM 突变）而失效的 DOM 节点，以及浏览器引擎在重新计算 Style 事件期间必须重新调整的 DOM 节点。

另请参阅：

状态：

请参阅上一部分，其中显示了复选框的较新标签。

控制是否在 性能 工具中显示所有事件。

另请参阅：

状态：

请参阅上一部分，其中显示了复选框的较新标签。

控制是否在 性能 工具中显示 V8 运行时调用统计信息。 V8 是 Microsoft Edge 使用的 JavaScript 引擎。

另请参阅：

状态：

请参阅上一部分，其中显示了复选框的较新标签。

自 Microsoft Edge 124 起新增功能

启用轨迹配置功能，以便选择 在性能 工具中可见的曲目及其显示顺序：

配置轨迹：

另请参阅：

状态：

自 Microsoft Edge 128 起的新标签

启用在 性能 工具中自定义用户计时事件外观的扩展。

另请参阅：

状态：

自 Microsoft Edge 125 起新增功能

请参阅上一部分，其中显示了复选框的较新标签。

自 Microsoft Edge 128 起新增功能

此试验使 性能 工具捕获新添加的跟踪，以支持增强的跟踪 v2。 此功能正在上游 Chromium 项目中实现。 此试验不会影响 Microsoft Edge 捕获增强跟踪的功能，也不会影响 DevTools 用户体验。

状态：

另请参阅：

自 Microsoft Edge 128 起新增功能

在 性能 工具中，导出跟踪文件时，将编译脚本的源代码存储在跟踪文件中。

此试验使 性能 工具在跟踪中记录脚本源文本。 此功能正在上游 Chromium 项目中实现。

状态：

另请参阅：

自 Microsoft Edge 128 起新增功能

将“跟踪事件”部分添加到性能工具的“摘要”选项卡。 在记录的性能跟踪中选择事件时，将显示“ 跟踪 事件”部分。 “ 跟踪事件 ”部分显示有关所选跟踪事件的调试信息，例如其名称和持续时间。

状态：

另请参阅：

是否在测试断点处停止。 此试验使断点更加可靠。

另请参阅：

状态：

自 Microsoft Edge 118 起新增功能

是否使用源映射中的范围信息。

另请参阅：

状态：

自 Microsoft Edge 128 起的新标签

在应用程序工具的“后台服务”部分中添加“推理加载”页，包括“规则”页和“推理”页：

推理规则 API 可用于以编程方式告知Microsoft Edge 预呈现某些页面。 这很有用，因为预呈现的页面几乎是即时导航到的。 浏览器以隐藏的方式预呈现用户可能导航到的下一页，而用户仍在当前页上。

“ 推理加载 ”页列出了 Web 作者在网页中定义的推理规则。 该页提供调试信息，显示是否实际使用了规则，并显示特定页面是否已预呈现。

“ 规则” 页包含以下列：

“ 猜测 ”页包含以下列：

另请参阅：

状态：

自 Microsoft Edge 121 起新增功能

请参阅上一部分，其中显示了复选框的较新标签。

自 Microsoft Edge 118 起新增功能

是否在 应用程序 工具中启用存储桶树。

另请参阅：

状态：

自 Microsoft Edge 128 起新增功能

在 性能 工具中启用边栏。 边栏是 WIP) (正在进行的试验性工作。

状态：