DevTools (Microsoft Edge 87) 中的新增功能
若要检查 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 本地化
为了满足翻译需求，Microsoft Edge DevTools 团队专注于提高翻译质量。 从 Microsoft Edge 版本 87 开始，多个字符串和术语会锁定且不会更改，即使 DevTools 的其余部分以其他语言显示也是如此。 受影响的字符串和术语列表包括：
- Lighthouse 工具中的字符串。
- 术语
service worker。 - 某些 网络 工具筛选器，例如
URL、XHR、JS和CSS。 - $0 控制台实用工具 API。
$0 现已在 控制台 中为 DevTools 的本地化版本的用户提供。 感谢全球开发人员社区帮助改进 Microsoft Edge DevTools 的本地化。 继续 发送有关本地化质量的反馈 ，以改善所有区域设置中对 DevTools 的支持。 有关Chromium开源项目中此功能的实时更新，请参阅问题 #1136655。
另请参阅：
在顶部和底部面板之间移动工具
DevTools 现在支持在顶部面板和底部面板之间移动工具。 通过同时查看两个工具的任意组合来自定义 DevTools 并提高工作效率。 例如，通过将“源”工具移动到底部) 同时查看“元素”和“源”工具， (。
若要将任意顶部工具移动到底部，请右键单击选项卡，然后选择“ 移动到底部”：
若要将任何底部工具移动到顶部，请右键单击选项卡，然后选择“ 移动到顶部”：
有关Chromium开源项目中此功能的历史记录，请参阅问题 #1075732。
另请参阅：
使用网络控制台保存和导出
网络控制台工具现在改进了与 Postman v2.1 和 OpenAPI v2 架构的兼容性。
网络控制台工具现在支持以下操作：
- 保存和导出集合和环境。
- 在 网络控制台 工具中编辑和导出环境变量集。
输入新环境的名称：
选择新环境的格式：
更新：此功能已发布，不再具有试验性。
另请参阅：
- 在 Compose 中保存和导出集合、环境和环境变量，并使用网络控制台工具发送 Web API 请求。
有关历史记录，请参阅Chromium开源项目中的问题 #1093687。
改进了 CSS 网格工具
Microsoft Edge DevTools 现在支持以下功能，用于检查、查看和调试 CSS 网格。
使用 “检查” 工具显示简化的网格覆盖，或使用持久覆盖获取更详细的信息。
若要启用持久网格覆盖，请在“ 元素 ”工具中单击网格容器元素旁边的网格图标，或在 “布局 ”工具中单击网格。
可以为多个网格启用持久覆盖。
借助新的 布局 工具，可以轻松切换网格覆盖层，并为每个网格覆盖配置外观和内容。
默认情况下，这些功能处于打开状态。
更新：此功能已发布，不再具有试验性。
另请参阅：
有关历史记录，请参阅Chromium开源项目中的问题 #1047356。
Microsoft Edge DevTools 团队正在与 Chrome DevTools 团队和Chromium社区协作，向 DevTools 添加新的弹性框工具功能。 有关Chromium开源项目中 flexbox 工具的更新，请参阅 Issue #1136394。
在“设置”中自定义键盘快捷方式
现在可以为 DevTools 中的任何操作自定义键盘快捷方式。 自 Microsoft Edge 版本 84 以来，可以在 Visual Studio Code 和 DevTools 之间进行选择， (键盘快捷方式的默认) 预设。 从 Microsoft Edge 版本 87 开始，可以进一步自定义键盘快捷方式。
更新：此功能已发布，不再具有试验性。
另请参阅：
- 在“自定义键盘快捷方式”中编辑 DevTools 操作的键盘快捷方式。
有关历史记录，请参阅Chromium开源项目中的问题 #174309。
Microsoft Edge Tools for Visual Studio Code 扩展简介
Visual Studio Code的元素和用于Visual Studio Code扩展的网络现在合并到新的 Microsoft Edge Developer Tools for Visual Studio Code 扩展中。 使用 Microsoft Edge DevTools 进行以下活动，而无需离开Microsoft Visual Studio Code。
- 调试 DOM
- 编辑 CSS
- 检查网络流量
使用 扩展，启动 Microsoft Edge，连接到浏览器的现有实例，或者直接从编辑器使用无外设浏览器。 若要开始参与和提交有关此扩展的反馈问题，请参阅 GitHub 上用于Visual Studio Code存储库的 Microsoft Edge 开发人员工具。
在完全浏览器模式下使用扩展：
在无外设模式下使用扩展：
有关详细信息，请参阅适用于 Visual Studio Code 的 Microsoft Edge DevTools 扩展。
Chromium项目的公告
以下部分介绍了 Microsoft Edge 中为开源Chromium项目贡献的其他功能。
新建 WebAuthn 工具
在早期版本的 Microsoft Edge 中，没有本机 WebAuthn 调试支持。 需要使用物理验证器来使用 Web 身份验证 API 测试 Web 应用程序。 使用新的 WebAuthn 工具，无需使用任何物理验证器即可执行以下操作：
- 模拟验证器。
- 自定义验证器的属性。
- 检查验证器的状态。
可以使用新的 WebAuthn 工具模拟验证器和调试 Web 身份验证 API。 若要打开 WebAuthn 工具，请单击“ 自定义和控制 DevTools (...) ” >更多工具>WebAuthn”。 有关Chromium开源项目中此功能的实时更新，请参阅问题 #1034663。
打开 WebAuthn 工具：
WebAuthn 工具：
有关详细信息，请参阅 模拟验证器和调试 WebAuthn。
元素工具更新
另请参阅：
在“样式”窗格中查看计算的边栏窗格
切换“样式”窗格中的“计算”窗格。 默认情况下，“样式”窗格中的“计算”窗格处于折叠状态。 若要显示或隐藏“样式”窗格中的“计算”窗格，请单击“显示计算样式”边栏 (
) 按钮。
打开 “计算”边栏 窗格：
“ 计算”边栏 窗格：
有关Chromium开源项目中此功能的实时更新，请参阅问题 #1073899。
另请参阅：
- 仅查看实际应用于 CSS功能引用中的元素的 CSS
在“计算”窗格中对 CSS 属性进行分组
若要在滚动更少的情况下查看应用的 CSS，请在“ 计算 ”窗格中按类别对 CSS 属性进行分组。 还可以在检查 CSS 时选择性地关注一组相关属性。 从 “元素” 工具中选择一个元素。 若要 (或取消组合) CSS 属性，请切换“ 组 ”复选框。
有关Chromium开源项目中此功能的实时更新，请参阅问题 #1096230、#1084673 和 #1106251。
另请参阅：
- 仅查看实际应用于 CSS功能引用中的元素的 CSS
Lighthouse 工具中的 Lighthouse 6.4
Lighthouse 工具现在正在运行 Lighthouse 6.4。 有关更改的完整列表，请参阅 Lighthouse 发行说明。 有关Chromium开源项目中此功能的实时更新，请参阅问题 #772558。
另请参阅：
performance.mark 在“计时”部分中 () 事件
性能工具中录制的“计时”部分现在标记performance.mark()事件。 若要试用此功能并衡量 JavaScript 代码的性能，请将事件添加到 performance.mark() 代码中。
以下代码在循环前后for添加 start 和性能end标记：
performance.mark('start');
for (var i = 0; i < 1000; i+=7;){
console.log(i);
}
performance.mark('end');
然后，打开 “性能” 工具并查看 “计时”部分 ，以记录 JavaScript 代码。
performance.mark()添加的事件现在显示在录制中。
网络工具中的新资源类型和 URL 筛选器
使用网络工具中的 new resource-type 和 url 关键字筛选网络请求。 例如，使用 resource-type:image 将重点放在图像的网络请求上：
若要发现和 url等resource-type更特殊关键字，请参阅按属性筛选请求。
有关Chromium开源项目中此功能的实时更新，请参阅问题 #1121141 和 #1104188。
帧详细信息视图更新
在 “应用程序” 工具的左侧页面列表中，底部页面是 “框架”，通常列出名为 top 的框架。
向终结点显示 COEP 和 COOP 报告
在 “应用程序” 工具的左侧页面列表中，底部页面是 “框架”，通常列出名为 top 的框架。 选择框架以查看框架详细信息视图，其中包括 “安全 & 隔离 ”部分。
在框架详细信息页的“ 安全 & 隔离 ”部分中，查看跨源嵌入器策略 (COEP) 和跨源开放程序策略 (COOP) reporting to 终结点。
报告 API 定义 Report-To，这是一个新的 HTTP 标头，它使你能够指定服务器终结点，供浏览器发送警告和错误。
有关Chromium开源项目中此功能的实时更新，请参阅问题 #1051466。
另请参阅：
- 在 DevTools (Microsoft Edge 88) 的新增功能中 显示打开的窗口的打开程序框架详细信息
- 用于管理存储的应用程序工具
显示 COEP 和 COOP 仅报告模式
在 “应用程序” 工具的左侧页面列表中，底部页面是 “框架”，通常列出名为 top 的框架。 选择框架以查看框架详细信息视图，其中包括 “安全 & 隔离 ”部分。
框架详细信息页的“ 安全 & 隔离 ”部分现在显示 report-only 设置为 report-only 模式的 COEP 和 COOP 标签。
有关Chromium开源项目中此功能的实时更新，请参阅问题 #1051466。
另请参阅：
- 在 DevTools (Microsoft Edge 88) 的新增功能中 显示打开的窗口的打开程序框架详细信息
- 用于管理存储的应用程序工具
在 CSS 概述工具中查看和修复颜色对比度问题
CSS 概述工具现在显示页面上存在颜色对比度问题的元素列表。 CSS 概述辅助颜色演示页包含颜色对比度问题的示例。
若要查看具有颜色对比度问题的元素列表，请在 “对比度问题”上单击“ 文本”。 若要在“ 元素” 工具中打开元素，请单击列表中的元素。 为了帮助解决对比度问题，Microsoft Edge DevTools 会自动提供颜色建议。
更新：此功能已发布，不再具有试验性。
另请参阅：
有关历史记录，请参阅Chromium开源项目中的问题 #1120316。
注意
此页面的某些部分是根据 Google 创建和共享的作品所做的修改，并根据 Creative Commons Attribution 4.0 International License 中描述的条款使用。 原始页面 在此处 找到，由 Jecelyn Yeen 创作。
本作品根据 Creative Commons Attribution 4.0 International License 获得许可。