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

若要了解 Microsoft Edge DevTools 的最新功能以及适用于 Microsoft Visual Studio Code 和 Visual Studio 的 Microsoft Edge DevTools 扩展,请阅读这些公告。

若要随时了解最新并获取最新的 DevTools 功能,请下载 Microsoft Edge 的预览体验成员预览版。 无论你使用的是 Windows、Linux 还是 macOS,都应考虑使用 Canary (或其他预览频道) 作为默认开发浏览器。 Microsoft Edge 的 Beta 版、Dev 版和 Canary 版本作为单独的应用运行,与 Microsoft Edge 的稳定发布版本并排运行。 请参阅 Microsoft Edge 预览体验成员频道

有关最新公告, 请在 Twitter 上关注 Microsoft Edge 团队。 若要报告 DevTools 问题或请求新功能,请在 MicrosoftEdge/DevTools 存储库中提交问题。

视频:DevTools 111 中的新增功能

视频“DevTools 111 中的新增功能”的缩略图

在 HoloLens 2 设备上远程调试 Microsoft Edge、PWA 和 WebView2 控件

适用于 Microsoft Edge 应用的远程工具 现已在 HoloLens 2 设备上提供。 适用于 Microsoft Edge 应用的远程工具适用于桌面的 Windows 设备门户的插件,可对 Microsoft Edge、渐进式 Web 应用 (PWA) 和 WebView2 控件中的选项卡进行远程调试。 通过使用远程调试,可以在远程设备上运行 Web 内容,并直接从开发计算机对其进行调试。

Microsoft 应用商店中的远程工具Microsoft Edge 应用

启用远程调试后,无需再在 HoloLens 2 设备上打开 DevTools。 相反,可以使用设备门户连接到远程 HoloLens 2 设备,打开 edge://inspect 页面,然后选择要与 DevTools 一起使用的目标 (选项卡、PWA 或 WebView2 控件) 。

若要向我们提供有关 Microsoft Edge 的远程调试流的反馈,请在 问题 136:远程调试 HoloLens 2 设备现已随最新版本的远程工具 for Microsoft Edge 应用提供注释。

另请参阅:

设备模式工具栏具有针对主题和视觉缺陷的仿真控件

在早期版本的 Microsoft Edge 中,为了模拟不同的主题或视觉缺陷,可以使用 渲染 工具来模拟 Achromatopsia,即用户无法感知任何颜色时。

在 Microsoft Edge 111 中,除了使用呈现工具外,现在还可以直接从设备模式工具栏访问这些主题和视觉缺陷仿真控件。

例如,若要模拟高对比度模式并测试 Web 内容的响应方式,请执行以下操作:

  1. “设备模式 ”工具栏中,在 “限制 ”下拉列表右侧,单击“ 模拟媒体功能 ” (“吸管”图标、“ 吸管”图标) 。
  2. 选择 强制颜色:活动

直接从设备模式工具栏模拟高对比度模式

还可以通过单击“滴管”图标旁边的“眼睛”图标来模拟视力缺陷。 例如,若要模拟模糊的视觉,

  1. 单击“ 模拟视力缺陷 ” (眼睛图标,“ 眼睛”图标) 。
  2. 选择 “模糊视觉”:

直接从设备模式工具栏模拟模糊的视觉

另请参阅:

性能工具在分析生产代码时取消管理文件和函数名称

Microsoft Edge 99 向 性能 工具添加了名为 Unminify 的新功能。 此 Unminify 功能将源映射应用于使用 性能 工具记录的配置文件,然后将未压缩的配置文件下载到计算机。 DevTools (Microsoft Edge 99) 的新增功能中的“使用源映射在性能配置文件中显示原始函数名称”中介绍了 Unminify 功能。

在 Microsoft Edge 111 中,此功能已被删除,因为只要加载了源映射,性能工具现在在分析生产代码时会自动提供原始文件和函数名称。 通过将源映射托管在 Azure Artifacts 符号服务器上,可以安全可靠地加载源映射。

在下图中,分析生产代码时,在火焰图中看到缩小的函数名称:

火焰图中的缩小函数名称

现在,在 Microsoft Edge 111 中, 性能 工具在分析生产代码时会自动取消检测火焰图中的函数名称:

火焰图中的未缩小函数名称

另请参阅:

“样式”窗格更易于在焦点模式下使用

在以前版本的 Microsoft Edge 中,在 焦点模式下“元素” 工具没有提供访问“ 样式 ”窗格中所有选项卡的简单方法。 在 Microsoft Edge 111 中,此问题已修复。 当 “样式 ”窗格具有较窄的视区并且无法显示所有其他可用选项卡时,请单击“ 更多选项卡 展开器”图标 (“更多选项卡”展开器图标) :

焦点模式中“样式”窗格中的折叠制表符集

若要在“ 样式 ”窗格中仅显示几个选项卡,请单击“ 更多选项卡 折叠器”图标 (“更多选项卡”折叠器图标) :

焦点模式中“样式”窗格中的展开选项卡集

另请参阅:

将选择器统计信息表从性能工具复制到 Excel

Microsoft Edge 109 在性能工具中引入了选择器统计信息功能。 在“性能”工具中启用“启用高级呈现检测 (慢速) ”设置后,选择火焰图中的任何“重新计算样式”事件会在底部窗格中添加“选择器统计信息”选项卡。 请参阅 DevTools (Microsoft Edge 109) 中的新增功能中的使用新的选择器统计信息调试长时间运行的重新计算样式事件

在 Microsoft Edge 111 中,现在可以将每个“重新计算样式”事件的“选择器统计信息”表导出到Microsoft Excel 工作簿。 然后,可以使用 Excel 执行聚合选择器性能分析,并确定在配置文件的生存期内成本最高的选择器。

导出 选择器统计信息 表:

  1. 使用鼠标单击左上角的单元格,然后拖动以选择到右下角的单元格。
  2. 右键单击表,然后选择“ 复制”。 或者,按 Ctrl+C (Windows、Linux) 或 Command+C (macOS) 。
  3. 将表格粘贴到 Excel 中。

选择要复制粘贴的整个选择器统计信息表

另请参阅:

在焦点模式下,将工具移动到“快速视图”时,辅助技术会提示

在以前版本的 Microsoft Edge 中,将工具从 活动栏 移动到 快速视图 工具栏时,辅助技术(如屏幕阅读器)不会宣布确认。 在 Microsoft Edge 111 中,此问题已修复。 将网络工具从活动栏移动到“快速视图”工具栏时,屏幕阅读器现在会报出“已成功将网络添加到快速视图”:

将网络工具从活动栏移动到“快速视图”工具栏

另请参阅:

Chromium 项目的公告

Microsoft Edge 111 还包括 Chromium 项目中的以下更新: