DevTools (Microsoft Edge 93) 中的新增功能
若要检查 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 存储库中提交问题。
将主题从 Visual Studio Code 应用到 DevTools
除了现有的浅色和深色主题外，Microsoft Edge DevTools 现在还支持Visual Studio Code中的一些最常用的颜色主题。 若要选择颜色主题，请单击“DevTools 设置” (
) 按钮，然后从“ 主题 ”下拉列表中选择一个主题。
支持的Visual Studio Code主题包括：
浅色主题：
- 太阳光
- 静音灯
深色主题：
- 深渊
- 金比黑
- Monokai
- Monokai 灰显
- 太阳深色
- 红色
- 明晚蓝色
请参阅 将颜色主题应用到 DevTools。
使用新的分离元素工具调试 DOM 节点内存泄漏
当 DOM 节点不再附加到 DOM 的任何元素，但仍被 Microsoft Edge 保留在内存中时，该节点被视为“分离”。 浏览器无法对元素进行垃圾回收，因为某些 JavaScript 仍在引用该元素，即使它不再位于页面或 DOM 的一部分。
新的 “分离元素” 工具可查找页面上的所有分离元素并显示它们。 可以展开和折叠分离的元素，以查看同时保留的父节点和子节点。 可以通过选择“回收垃圾”来触发浏览器的 垃圾 回收，并在分离的元素无法进行垃圾回收时验证是否存在内存泄漏。 最后，可以通过使用“分析”按钮获取堆快照，跳转到引用分离元素的 JavaScript。
更新：此功能已发布，不再具有试验性。
另请参阅：
Visual Studio Code调试器现在与 DevTools 扩展集成
如果在 Visual Studio Code 中使用 JavaScript 调试，现在可以通过选择“检查”按钮启动适用于Visual Studio Code的 Microsoft Edge 开发人员工具扩展。
此功能将 DOM 和 CSS 调试与 Visual Studio Code 中的 JavaScript 调试集成。 如果未安装 DevTools 扩展，则选择“检查”按钮时，Visual Studio Code提示安装扩展。
其他新功能包括：
- 在不同调试目标之间切换时，工具会自动刷新。
- 修复了几个 bug。
- 扩展的更详细文档。
有关改进和修复的更多详细信息，检查存储库中的 vscode-edge-devtoolschangelog 文件。
另请参阅：
获取适用于 Visual Studio Code 扩展的 Microsoft Edge 开发人员工具。 Microsoft Visual Studio Code自动更新扩展;若要手动更新此扩展，请参阅手动更新扩展。
可以在 vscode-edge-devtools GitHub 存储库上提交问题并参与扩展。
DevTools 的新 Fluent UI 图标
Microsoft Edge DevTools 已采用 Fluent UI，使按钮和菜单具有更现代的外观，更好地与 Microsoft Edge 浏览器的其余部分保持一致。
直接从“设置”更改 DevTools 显示语言
以前，若要在 DevTools 中更改显示语言，必须更改浏览器语言。 现在，你可以在 DevTools 设置中轻松切换显示语言，而无需更改浏览器设置。 为此，请打开 “设置”，然后在 “首选项”中，从“ 语言 ”下拉列表中选择一种语言。
默认情况下，DevTools 与浏览器的显示语言匹配。 请参阅 更改 DevTools 语言设置。
有关Chromium开源项目中此功能的历史记录，请参阅问题2882756。
在 CSS-in-JS 库的“样式”窗格中复制声明
以前，使用 CSS-in-JS 库时，无法复制 CSS 声明 (CSS 属性和) JavaScript 格式的值。 必须编辑复制的 CSS 以匹配 JavaScript 的语法。
现在，在 Microsoft Edge 版本 93 中，可以复制单个 CSS 声明或样式规则中的所有声明，并将其直接粘贴到 JavaScript 文件中，而不会遇到语法问题。 若要尝试此功能，请执行以下操作：
在 “元素 ”工具的“ 样式 ”窗格中，右键单击样式规则中的声明。
选择“ 将声明复制为 JS ”或 “将所有声明复制为 JS”。
将复制的 CSS 粘贴到文本编辑器中的 JavaScript 文件中，例如Visual Studio Code。 例如：
'--more-link': 'lime'。
若要详细了解如何查看和更改 CSS，请参阅 CSS 功能参考。
更轻松地自定义 User-Agent 客户端提示
User-Agent 客户端提示使浏览器信息比分号分隔的 User-Agent 字符串更易于访问，并改进了网站兼容性。 最初，User-Agent 客户端提示测试和调试非常耗时。 对客户端提示的控制较少，并且必须正确填写客户端提示才能使表单正常工作。
在此版本中，我们重新设计了调试体验，以便你可以通过具有多个单独字段和控件的 UI 轻松修改 User-Agent 客户端提示。 此外，现在可以同时测试自定义 User-Agent 客户端提示和 User-Agent 字符串。 现在可以在“设置”或“网络条件”工具中为自定义设备定义 User-Agent 客户端提示。
有关在 “设置”中定义提示的详细信息，请参阅 设置用户代理客户端提示。
还可以使用 网络条件 工具替代当前页 User-Agent 客户端提示。
有关在 网络条件 工具中定义提示的详细信息，请参阅 设置用户代理客户端提示。
有关Chromium开源项目中此功能的历史记录，请参阅问题1174299。
屏幕阅读器现在在工具栏和控制台中报出错误、警告和问题
以前，屏幕阅读器的用户只会听到 DevTools 工具栏中宣布的错误、警告或问题数。 未包括有关正在宣布的通知类型的附加信息，例如“错误”、“警告”或“问题”。 例如，如果 DevTools 报告了 3 个错误，屏幕阅读器将只报出“3”。
现在，在 Microsoft Edge 版本 93 中，屏幕阅读器正确报出通知的类型和数量;错误、警告或问题。 例如，如果 DevTools 报告了 3 个错误和 5 个警告，屏幕阅读器现在将报出“3 个错误，5 个警告”。 此修补程序已应用于 DevTools 工具栏和控制台中的通知。
有关调试控制台错误的信息，请参阅 修复控制台中报告的 JavaScript 错误。 有关 DevTools 发现的问题以及可以对网页进行的改进的信息，请参阅 使用问题工具查找和修复问题。
有关Chromium开源项目中此功能的历史记录，请参阅问题1223208。
网络工具中的“作为 PowerShell 进行复制”现在包括 Cookie
以前，在网络工具中，在 网络 活动日志中为给定网络请求生成 PowerShell 命令时， “复制>为 PowerShell 上下文菜单”选项不包含 Cookie。 这意味着，如果需要 Cookie，则生成的 PowerShell 命令无法成功发出相同的网络请求。
现在，在 Microsoft Edge 版本 93 中， “复制为 PowerShell 上下文菜单”选项可正确设置 DevTools 观察到的 User-Agent 字符串和 Cookie。 生成的 PowerShell 命令现在可以成功发出 DevTools 观察到的相同网络请求，甚至可以对依赖于 Cookie 的服务器发出请求。
有关网络活动日志的详细信息，请参阅 网络功能参考。
有关此功能的历史记录，请参阅问题 932971。
注意
此页面的部分内容是基于 Google 创建和 共享 的工作进行的修改，并根据 Creative Commons 署名 4.0 国际许可中所述的条款使用。 原始页面 在此处 找到，由 Jecelyn Yeen (开发人员大使 Chrome DevTools) 创作。
