DevTools (Microsoft Edge 102) 中的新增功能
若要检查 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 存储库中提交问题。
提示
Microsoft Build 2022 会议于 5 月 24-26 日举行。 在以下视频中详细了解 DevTools 中用于内存、性能和生产调试的新功能，以及 PWA 的 Web 平台中的新功能：
DevTools 扩展：具有设备和模式仿真以及源映射支持的新浏览器
适用于 Visual Studio Code 的 Microsoft Edge DevTools 扩展现在具有浏览器预览功能，可用于模拟不同的设备。 单击新的 “模拟 CSS 媒体功能 ” (
) ”按钮，以以不同的模式（例如深色、浅色、打印和高对比度）预览当前项目：
单击新的 “模拟视力缺陷 ” (“ 
) 按钮轻松测试辅助功能，例如显示视觉模糊或色觉缺陷网页的外观。
其他新功能包括切换 CSS 镜像的更简单方法，现在也支持源映射。 这意味着可以调试和修改由 Sass、React 和其他抽象在浏览器中创建的 CSS，并查看源文件中的更改。
另请参阅：
将堆中的所有字符串快照保存到 JSON
在 Microsoft Edge 102 中，在内存工具中获取堆快照时，现在可以将所有字符串对象从快照导出到 JSON 文件。 在“内存”工具的“构造函数”部分中，单击条目旁边的(string)新“全部保存到文件”按钮。
内存工具导出一个 JSON 文件，该文件包含堆快照中的所有字符串对象：
另请参阅：
- 使用“内存”工具将字符串从堆快照保存并导出到“记录堆快照”中的 JSON。
内存工具中保留器的新筛选器
在早期版本的 Microsoft Edge 中，周期和内部节点显示在堆快照的“保留器”部分中。 为了帮助简化保留器路径，在 Microsoft Edge 102 中，内存工具中的“保留器”部分现在具有用于隐藏周期和隐藏保留器路径中的内部节点的新筛选器。
在 “保留器 ”部分中，通过灰显来指示循环节点。
在下图的 “筛选器边缘 ”下拉菜单中，未选择 “隐藏循环 ”，因此显示 (灰色) 的循环节点：
在下图的 “筛选器边缘 ”下拉菜单中，选中 了“隐藏循环 ”，因此不显示循环节点：
周期 是在保留器路径中至少出现两次的节点。 节点的一个外观在保留器路径中较早，该节点的其他外观在保留器路径中较晚出现。 若要释放内存，最重要的是删除在保留器路径中首先出现的节点。 节点的第二个和可能的后续外观仍显示在 “保留器 ”部分中。
内部节点 是特定于 V8 的对象， (Microsoft Edge) 中的 JavaScript 引擎。 内部节点也显示在 “保留器 ”部分中。
另请参阅：
- 使用内存工具在“记录堆快照”中隐藏周期。
检查元素工具提示现在可以持久保存，直到关闭它
以前，在“元素”工具中，仅当使用“检查工具” (“检查工具
时，所选节点的覆盖层仅在悬停时显示) 。 以前的设计很难与屏幕放大镜或其他辅助技术配合使用。
在 Microsoft Edge 102 中，使用 “检查” 工具并在呈现的网页中移动时，可以保持显示当前的 “检查” 覆盖。 在呈现的网页中移动时，按住 Ctrl+Alt (Windows、Linux) 或 Ctrl+Option (macOS) 。 将鼠标悬停在呈现网页的不同部分时， “检查” 工具的现有工具提示和网格颜色覆盖将保持显示状态：
此外，现在可以按 Ctrl 隐藏“检查”工具的覆盖层，同时将鼠标指针移到呈现的网页上。
有关Chromium开源项目中此功能的历史记录，请参阅问题1316208。
另请参阅：
- 使用“检查”工具在“分析页面”中保留“检查”工具的工具提示和网格颜色覆盖。
- 使用辅助技术在 Navigate DevTools 中保留“检查”工具的工具提示和网格颜色覆盖。
改进了在高对比度模式下下拉菜单、按钮和图标的呈现
在以前版本的 Microsoft Edge 中，以下项在高对比度模式下无法正确呈现：
- “问题”工具中的下拉菜单。
- 分离元素工具中的按钮。
- 焦点模式下 的活动栏 。
在 Microsoft Edge 102 中，已修复这些问题。
问题工具的菜单在高对比度模式下正确显示：
分离元素工具的 UI 在高对比度模式下正确显示：
使用焦点模式时 (“活动栏 ”和 “快速视图 ”面板) 在高对比度模式下正确显示：
另请参阅：
通过“设置”了解 DevTools 中的试验
在“设置试验”>页中，每个试验现在都有一个“帮助 (
) 按钮：
若要获取有关试验性功能的详细信息，请单击相应的 “帮助 () 按钮。 “ 帮助 ”按钮显示 Microsoft Edge DevTools 中的实验功能 一文的相关部分。
较窄时网络设置的布局更好
在早期版本的 Microsoft Edge 中，当 DevTools 非常窄时，使用网络工具中的齿轮图标打开网络设置会重叠：
在 Microsoft Edge 102 中，此问题已修复。 现在，单个设置在窄布局中显示得更好：
另请参阅：
- 在网络功能参考中捕获页面加载期间有关网络工具的可配置设置的屏幕截图。
Chromium项目的公告
Microsoft Edge 102 还包括来自 Chromium 项目的以下更新：