通过

DevTools (Microsoft Edge 114) 中的新增功能

  • 项目

以下是 Microsoft Edge DevTools 稳定版中的最新功能。

提示

Microsoft版本 2023 会议于 2023 年 5 月 23-25 日举行。 在以下视频中详细了解 DevTools 中用于内存、性能和生产调试的新功能，以及侧栏、WebView2 和聊天插件中的 PWA 的新功能：

视频：DevTools 113 和 114 中的新增功能

视频“DevTools 113 和 114 中的新增功能”的缩略图

性能工具中的聚合选择器统计信息

Microsoft Edge 109 向性能工具添加了选择器统计信息功能。 可以使用选择器统计信息中的数据来了解哪些 CSS 选择器在性能工具中重新计算样式事件期间花费的时间最多，并且导致性能降低。

在 Microsoft Edge 114 中，不再需要选择单个 “重新计算样式” 事件来查看在该事件期间重新计算的选择器。 相反，性能工具底部窗格中的“选择器统计信息”选项卡会自动聚合记录的配置文件中所有“重新计算样式”事件的数据。 放大配置文件的特定部分时， “选择器统计信息 ”选项卡将更新为仅显示当前正在分析的配置文件部分的数据。

此外，新的 样式表 列已添加到 “选择器统计信息 ”选项卡。 “样式表” 列包含指向定义选择器的样式表的每个选择器的链接。

选择器统计信息现在跨记录的配置文件当前显示的部分中的“重新计算样式”事件进行聚合

感谢你在 GitHub 问题 #98：[反馈] 选择器性能跟踪解释器中使用选择器统计信息功能并与我们分享你的反馈！

另请参阅：

“问题”工具和“样式”窗格针对触发布局的 CSS 属性发出警告

DevTools 现在可检测并警告在网页中使用 CSS 动画（例如移动文本）时可能导致基于布局的性能问题的 CSS 属性。 布局 是 Web 浏览器进程，用于重新计算文档中元素的位置和几何图形，以重新呈现文档的一部分或全部。 由于布局是浏览器中的用户阻止作，因此我们建议尽可能限制布局，以使 Web 内容流畅且响应交互。

某些 CSS 属性不会触发布局作，因为它们在浏览器中的合成器线程上运行，例如 转换 和 不透明度。 但是，即使不触发 Layout 的 CSS 属性也可能会触发画图作，当与 CSS 动画结合使用时，可能会对性能产生负面影响。

在“元素”工具的“样式”窗格中，已对触发布局或绘制作的 CSS 属性添加了波浪下划线和工具提示。 若要在工具提示中查看问题，请将鼠标悬停在波浪下划线上：

“样式”窗格中的 CSS 布局问题

在 “问题” 工具的“ 性能 ”类别中，报告了一种新的问题，例如“对此属性的更改将触发：'布局'，在 内部 @Keyframes使用时可能会影响性能。使用“ 样式 ”窗格时，若要在 “问题” 工具中打开问题， 请 Shift+单击此类属性上的波浪下划线，或右键单击波浪下划线，然后选择“ 查看问题”。 “ 问题” 工具随即在 DevTools 底部的“ 抽屉 (快速视图 ”面板) 打开：

问题工具中的 CSS 布局问题

另请参阅：

内存工具可以加载大于 1 GB 的增强跟踪

在早期版本的 Microsoft Edge 中，加载大于 1 GB 的增强跟踪失败。 在 Microsoft Edge 114 中，此问题已修复。 现在可以成功加载任何大小的增强跟踪。

增强跟踪是 Microsoft Edge 中的一项实验性功能，可用于导出和导入整个 DevTools 实例（保存为 .devtools 文件），并在 内存、 性能、 元素、 控制台和 源 工具中保留尽可能多的状态。 文件 .devtools 在单独的 DevTools 实例中打开，并加载以下跟踪信息，同时保留对源代码的引用：

  • DOM 快照。
  • 控制台消息。
  • 堆快照。
  • 性能配置文件。

增强的跟踪

另请参阅：

内存工具更准确地比较两个堆快照

在 内存 工具中，可以拍摄多个堆快照并进行比较，以查找堆中对象的差异。 在 Microsoft Edge 的早期版本中， 内存 工具在比较堆快照时报告了过多的新对象和已删除的对象，因为该工具无法一致地跟踪对象 ID。 实际上，其中许多可能是相同的对象。

在 Microsoft Edge 114 中，通过确保跨多个快照跟踪一致的对象 ID，解决了此问题。

比较 Microsoft Edge 114 中的两个堆快照

另请参阅：

CSS 概述工具的辅助功能改进

在 Microsoft Edge 112 中，CSS 概述工具已更新为在概述快照网页 CSS 时显示非简单选择器列表。 在 Microsoft Edge 114 中，CSS 概述工具的非简单选择器部分现在更易于通过辅助技术（如屏幕阅读器）使用。

单击选择器或导航到选择器，然后按 Enter 时，屏幕阅读器现在会报出“复制的 CSS 选择器”：

使用键盘导航 CSS 概述工具

另请参阅：

VS Code 的 DevTools 扩展对高对比度模式有更好的支持

在适用于 Visual Studio Code 的 Microsoft Edge DevTools 扩展的早期版本中，在高对比度模式下，将鼠标悬停在工具中的图标上无法以足够的对比度呈现 UI 控件。 此问题已修复。

例如，在“元素”工具的“样式”窗格中，用于将样式应用于元素的复选框现在在高对比度模式下正确呈现：

在 VS Code 扩展的高对比度模式下将鼠标悬停在“样式”窗格中的复选框上

此外，在 控制台 工具中，“ 显示控制台边栏” 等图标现在在高对比度模式下正确呈现：

在 VS Code 扩展的高对比度模式下将鼠标悬停在“显示控制台边栏”按钮上

另请参阅：

Chromium项目的公告

Microsoft Edge 114 还包括来自 Chromium 项目的以下更新：

另请参阅