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

若要了解 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 106 中的新增功能

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

命令面板简介

Microsoft Edge 123 中删除了命令面板试验。

在 Microsoft Edge 106 中,现在可以启用和使用命令面板试验。 使用命令面板,只需一个键盘快捷方式即可访问浏览器管理和开发人员工具命令: Ctrl+Shift+空格键

若要启用命令面板试验,请执行以下操作:

  1. 转到 edge://flags。 然后在 “搜索标志 ”文本字段中,开始键入 “命令面板”。

  2. “命令面板 ”下拉菜单中,选择“ 已启用”

    版本 106 的标志页中命令面板的键盘快捷方式

    请注意键盘快捷方式,该快捷方式显示在页面上的 “命令面板edge://flags 部分中。

  3. 单击“ 重启 ”按钮,选择 “已启用”时,该按钮显示在右下方。

若要在启用试验后快速访问可用的浏览器管理命令和 DevTools 命令:

  1. 在 Microsoft Edge (中,无论是否打开 DevTools) ,按 Ctrl+Shift+空格键

  2. 开始键入。 命令根据输入字符进行筛选,并分组为 建议历史记录DevTools 等类别:

    Microsoft Edge 命令面板

  3. 若要缩小筛选范围以仅列出 DevTools 命令,请键入大于 (>) 字符:

    Microsoft Edge 命令面板输入 > 以选择 DevTools 命令

通过在 MicrosoftEdge/DevTools 存储库中的问题 73:[反馈] 命令面板试验中发布注释,让我们知道你希望在 Microsoft Edge 的未来版本中看到哪些命令!

在 Visual Studio Code 的 DevTools 中筛选并自动修复代码问题

适用于 Visual Studio Code 的 Microsoft Edge DevTools 扩展现在提供 快速修复 选项,使你能够自动修复问题。

若要访问 “快速修复” 选项,请执行以下操作:

  1. 将鼠标悬停在 DevTools 扩展报告的问题上,代码中用波浪下划线指示。 问题旁边会显示一个灯泡图标。

  2. 单击灯泡 (灯泡图标) 图标。 此时会显示 “快速修复 ”菜单:

    快速修复选项

  3. 选择要用于解决问题或停止将其报告为问题的 快速修复 。 选择忽略问题会自动创建一个 .hintrc 文件,该文件指示扩展忽略此问题类型,不再报告此问题类型。

另请参阅:

DevTools 现在在缓存源映射时使用的磁盘空间更少

Microsoft Edge 101 开始,DevTools 开始在 IndexedDB 中缓存源映射,以减少提取源映射的网络请求量。 但是,如果从未删除这些源映射,此更改可能会占用大量磁盘空间。

在 Microsoft Edge 106 中,此问题已通过从 IndexedDB 存储中删除 30 天内未访问的任何源映射而得到修复。 此外,也不再缓存从 中 localhost 提供的源映射。 感谢你向我们发送有关此问题的反馈!

若要了解 DevTools 如何提取和缓存源映射,请观看源映射监视器工具中的“加载状态”列。 首次加载网页时, 源映射监视器 工具显示源映射尚未缓存:

首次加载时源映射监视器工具

刷新网页时, 源映射监视器 工具显示已使用缓存的源映射:

第二次加载时源映射监视器工具

若要清除 IndexedDB 缓存并强制 DevTools 重新加载源映射,请在命令菜单中运行 “清除源映射缓存 ”命令。 请参阅 命令菜单中的运行命令

有关历史记录,请参阅 问题 89

另请参阅:

Chromium 颜色主题已弃用

为了提高可靠性,已弃用 Chromium 浅色和 Chromium 深色主题。 以前选择了这些主题的用户将分别自动迁移到 “浅色+ ”或“ 深色+” 主题:

Light+ 主题中的 DevTools:

Light+ 主题中的 DevTools

深色+ 主题的 DevTools:

深色+ 主题的 DevTools

有许多 DevTools 颜色主题可供选择,例如 MonokaiSolarized。 若要更改 DevTools 中的颜色主题,请单击 “设置 (”图标) 按钮,然后在 “首选项” 页的“ 主题 ”下拉菜单中选择主题:

将 DevTools 主题设置为 Monokai

另请参阅:

焦点模式和高对比度模式下的辅助功能改进

焦点模式下的停靠位置和活动栏位置按钮现在更好地与屏幕阅读器配合使用

在 Microsoft Edge 105 中,焦点模式得到了多项改进,包括新的 Dock 位置和活动栏位置按钮。 在 Microsoft Edge 106 中,这些新按钮现在更好地与屏幕阅读器等辅助技术配合使用。

屏幕阅读器现在会报出当前选择了哪个 “停靠位置 ”按钮或 “活动栏位置 ”按钮,以及表示可用位置选项的按钮数:

焦点模式下重新设计的停靠菜单

另请参阅:

计算样式在高对比度模式下更易于查看

在高对比度模式下,在以前版本的 Microsoft Edge 中,计算样式的展开和折叠按钮未正确呈现,位于“元素”工具的“计算”选项卡中。 在 Microsoft Edge 106 中,此问题已修复。 展开和折叠按钮现在在高对比度模式下可见:

高对比度模式下的计算样式

另请参阅:

Chromium 项目的公告

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