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

若要查看 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 存储库中提交问题。

在焦点模式下将工具组合在一起

焦点模式是一个试验界面,允许你根据自己的调试方案将不同工具组合在一起。 左侧显示的新“活动栏”包括预定义的工具组,如“布局”和“调试”。 若要自定义每个工具组,请使用“关闭”(X) 图标关闭工具,或使用“更多工具”(+) 图标添加新工具。

若要启用试验,请查看“启用或禁用试验”,然后选择“焦点模式和 DevTools 工具提示”和“启用 + 按钮选项卡菜单以打开更多工具”旁边的复选框。 有关此功能的详细信息,或者要用问题和想法进行评论,请查看 DevTools:焦点模式 UI

显示“活动栏”..

请参阅使用焦点模式简化开发工具

通过信息丰富的工具提示了解 DevTools

DevTools 工具提示功能可帮助你了解所有不同的工具和窗格。 请将鼠标悬停在开发人员工具的每个概述区域上,以了解有关如何使用工具的更多信息。 若要打开工具提示,请执行以下操作之一:

  • 选择“自定义和控制 DevTools (...)”>“帮助” > “切换 DevTools 工具提示”。
  • Ctrl+Shift+H(Windows、Linux)或 Cmd+Shift+H (macOS)。
  • 打开命令菜单,然后键入 tooltips

然后将鼠标悬停在开发人员工具的每个概述区域上:

开发人员工具提示模式。

要关闭工具提示,请按“Esc”。

更新:此功能已发布,不再处于实验性状态。

注意:自 2022 年 5 月起,活动栏不支持工具提示;即,在焦点模式下不支持工具提示。

另请参阅:

在“设置”中自定义键盘快捷方式

现在,你可以为 DevTools 中的任何操作自定义键盘快捷方式。

编辑键盘快捷方式:

  1. 打开 DevTools,然后选择“设置” > “快捷方式”。

  2. 选择要自定义的操作。

  3. 单击“编辑”(编辑图标)图标。

  4. 按下要绑定到操作的按键。

  5. 单击复选标记(复选标记图标) 图标。

有关自定义和编辑快捷方式的详细信息,请查看在开发人员工具中自定义键盘快捷方式。 有关 Chromium 开源项目中此功能的实时更新,请参阅问题 174309

在编辑模式下使用快捷方式在“DevTools 设置”的“快捷方式”上自定义键盘快捷方式。

Microsoft Edge DevTools for Visual Studio Code 扩展更新 1.1.4

适用于 Microsoft Visual Studio Code 的 Microsoft Edge Developer Tools for Visual Studio Code 扩展版本 1.1.4 现在在每个 DevTools 实例旁边显示一个网站图标。 来自 Microsoft Edge 的控制台消息现在显示在 Microsoft Visual Studio Code 的“输出”下的“DevTools 控制台”中。 Microsoft Visual Studio Code 会自动更新扩展。 若要手动更新到版本 1.1.4,请查看“手动更新扩展”。 你可以在 vscode-edge-devtools GitHub repo 上提交问题并参与扩展的改进。

下图显示了来自 Microsoft Edge“控制台”工具中记录的示例网页的消息:

在 Microsoft Edge DevTools 的控制台中显示消息。

下图显示了来自 Microsoft Visual Studio Code“输出”下“DevTools 控制台”中记录的示例网页的相同消息:

在 Microsoft Visual Studio Code“输出”下的“DevTools 控制台”中显示相同消息。

另请参阅:

通过可视弹性框编辑器和多个覆盖改进了 CSS 弹性框编辑

DevTools 现在具有专用的 CSS 弹性框调试工具。 如果将 display: flexdisplay: inline-flex CSS 样式应用于 HTML 元素,则“元素”工具中该元素旁边将显示 flex 图标。 若要在网页上显示(或隐藏)弹性覆盖,请单击 flex 图标。

若要打开 Flexbox 编辑器,请在“元素 ”工具中转到“样式”选项卡,然后单击 display: flexdisplay: inline-flex 样式旁边的新图标。 弹性框编辑器提供了一种快速编辑弹性框属性的方法:

CSS 弹性框调试工具。

此外,“布局”窗格中的“弹性框”部分将显示网页上的所有弹性框元素。 你可以切换每个元素的覆盖:

“布局”窗格中的弹性框部分。

有关 Chromium 开源项目中此功能的历史记录,请参阅问题 11667101175699

另请参阅:

网络请求的键盘导航改进

以前,在“发起程序”窗格中,你无法使用键盘上的箭头键展开或折叠请求链,这与“元素”工具中的 DOM 不同。 当在“网络”工具中选择网络请求时,“发起程序”窗格将显示发起当前选定请求的请求链。

在 Microsoft Edge 版本 90 中,在“发起程序”窗格中,你可以使用键盘上的箭头键展开或折叠请求链。 链中的焦点网络请求现在也会突出显示。

单击“网络请求”,然后单击“发起程序”窗格:

单击“网络请求”,然后单击“发起程序”窗格。

展开或折叠请求发起程序链并执行突出显示的行:

展开或折叠请求发起程序链并执行突出显示的行。

若要在“网络”工具中了解有关发起程序的更多信息,请查看“显示发起程序和依赖项”。

有关 Chromium 开源项目中此功能的历史记录,请参阅问题11582761160637

控制台中的筛选更加一致

当使用控制台边栏进行筛选时,“日志级别”下拉列表中的筛选器不可用。 以前,“日志级别”下拉列表在你悬停时会突出显示,即使从控制台边栏中选择了筛选器也是如此。 在 Microsoft Edge 版本 90 中,当选择控制台边栏中的筛选器时,将鼠标悬停在日志级别下拉列表上时,将不再突出显示该列表。

若要详细了解如何在控制台中进行筛选,请参阅_控制台功能参考_中的“筛选消息”。

以前,如果打开“控制台边栏”并将鼠标悬停在“默认级别”上,它会突出显示:

以前,如果打开“控制台边栏”并将鼠标悬停在“默认级别”上,它会突出显示。

从 Microsoft Edge 90 开始,如果你单击“控制台边栏”并将鼠标悬停在“默认级别”上,它将不会突出显示:

从 Microsoft Edge 90 开始,如果你选择“控制台边栏”并将鼠标悬停在“默认级别”上,它将不会突出显示。

来自 Chromium 项目的公告

以下部分将公布 Microsoft Edge 中已组成开源 Chromium 项目的其他可用功能。

控制台现在可对双引号字符进行转义

以前,控制台不在 JavaScript 字符串中输出有效的双引号 (") 字符。 从 Microsoft Edge 版本 90 开始,控制台将使用转义的双引号 (") 字符输出 JavaScript 字符串:

控制台将使用转义的双引号 () 字符输出 JavaScript 字符串。

有关 Chromium 开源项目中此功能的历史记录,请参阅问题 1178530

另请参阅:

模拟 CSS 色域媒体功能

色域媒体查询会模拟浏览器和你正在测试的设备支持的大致颜色范围。 “模拟 CSS 媒体功能色域”下的下拉列表包含 DevTools 可以模拟的颜色空间。 例如,若要触发 color-gamut: p3 媒体查询,请从下拉列表中选择“色域:p3”。

模拟 CSS 色域媒体功能:

  1. 要打开 DevTools,请右击网页,然后选择“检查”。 或者,按“Ctrl+Shift+I”(Windows、Linux)或“Command+Option+I”(macOS)。 DevTools 随即打开。
  2. 在开发人员工具的主工具栏上,选择“呈现”选项卡。 如果该选项卡不可见,请单击“ 更多选项卡“更多选项卡”图标。)按钮,或者单击“更多工具”(“更多工具”图标。)按钮。 已打开渲染工具。
  3. 在“仿真 CSS 媒体功能颜色范围”下拉列表中,选择 颜色域 选项:

模拟 CSS 色域媒体功能。

若要了解有关 color-gamut 功能的更多信息,请查看“颜色显示质量:‘色域’功能”。

有关 Chromium 开源项目中此功能的历史记录,请参阅问题 1073887

另请参阅:

改进了渐进式 Web 应用的工具

控制台中的 PWA 可安装性警告

控制台现在显示渐进式 Web 应用 (PWA) 的更详细的可安装性警告消息,其中包含“改进渐进式 Web 应用脱机支持检测”链接。

控制台工具中的 PWA 可安装性警告。

另请参阅:

“清单”窗格中的 PWA 说明长度警告

应用程序工具中,如果清单说明超过 324 个字符,“ 清单 ”窗格现在会显示警告消息:

PWA 说明截断警告。

有关 Chromium 开源项目中此功能的历史记录,请参阅问题 96580211464501169689

另请参阅:

“网络”工具中新的“远程地址空间”列

在“网络”工具中,新的“远程地址空间”列显示每个网络资源的网络 IP 地址空间。 若要显示新的“远程地址空间”列,请执行以下操作:

  1. 在 DevTools 中,打开网络工具。

  2. 在“请求”表( 网络 工具的主部分)中,右键单击标题行,然后选择“远程地址空间”:

    在右键单击菜单中,选择“远程地址空间”。

    现在,“请求”表显示“远程地址空间”列:

    “请求”表现在显示“远程地址空间”列。

要在 Chromium 开放源代码项目中查看此功能的历史记录,请参阅问题 1128885

另请参阅:

在“框架详细信息”视图中显示允许和禁止的功能

应用程序工具中,左下角的“”节点将打开“帧详细信息”视图。 “框架详细信息”视图现在包括“权限策略”部分,其中显示允许和不允许的浏览器功能列表:

基于权限策略允许和禁止的功能。

此列表由权限策略 Web 平台 API 控制,该 API 允许网页使用或阻止网页在单个帧或框架嵌入的 iframe 中使用指定的浏览器功能。

有关 Chromium 开源项目中此功能的历史记录,请参阅问题 1158827

另请参阅:

“Cookie”窗格中新的“SameParty”列

应用程序”工具中的“Cookie”窗格现在显示每个 Cookie 的 SameParty 属性:

“Cookie”窗格中的“SameParty”列。

SameParty 属性是一个新的布尔属性,用于指示在对相同第一方集的起源的请求中是否包含 cookie。

有关 Chromium 开源项目中此功能的历史记录,请参阅问题 1161427

另请参阅:

“控制台”工具中的 fn.displayName 属性现已弃用

以前,fn.displayName 属性允许你控制要在 error.stack 和 DevTools 堆栈跟踪中显示的函数的调试名称。 从 Microsoft Edge 版本 90 开始,fn.displayName 属性现已弃用,并替换为 fn.name 属性:

用于控制函数的调试名称的 fn.name 属性示例。

使用标准 Object.defineProperty 方法定义 fn.name 属性。 若要详细了解fn.name,请参阅 Function.name

有关 Chromium 开源项目中此功能的历史记录,请参阅问题 1177685

另请参阅:

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

实验性功能。

此试验在“元素”工具中提供完整的辅助功能树视图。 “辅助功能”选项卡(与“样式”选项卡同组)提供部分辅助功能树视图,该视图显示从根节点到已检查节点的直接上级链。 打开此试验并重新加载开发人员工具后,单击“元素”面板顶部的按钮区域,切换网页上所有元素在“元素”工具中的显示。

若要显示 DOM 树视图,请单击顶部的“切换到 DOM 树视图”按钮区域:

显示 DOM 树视图。

若要显示完整的辅助功能树,请单击顶部的“切换到辅助功能树视图”按钮:

显示完整的辅助功能树视图。

若要启用试验,请查看“启用或禁用试验”,然后选择“在‘元素’窗格中启用完整的辅助功能树视图”旁边的复选框。

有关 Chromium 开源项目中此功能的历史记录,请参阅问题 887173

另请参阅:

备注

此页面的某些部分是根据 Google 创建和共享的作品所做的修改,并根据 Creative Commons Attribution 4.0 International License 中描述的条款使用。 原始页面位于 此处,并由 Jecelyn Yeen \(开发人员支持者,Chrome DevTools\)制作。

知识共享许可协议。 本作品根据 Creative Commons Attribution 4.0 International License 获得许可。