DevTools (Microsoft Edge 102) 中的新增功能
以下是 Microsoft Edge DevTools 稳定版中的最新功能。
提示
Microsoft版本 2022 会议于 5 月 24-26 日举行。 在以下视频中详细了解 DevTools 中用于内存、性能和生产调试的新功能，以及 PWA 的 Web 平台中的新功能：
视频：Microsoft Edge |DevTools 102 中的新增功能
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项目中的以下更新：
- 用于模拟浅色和深色主题的新快捷方式
- 提高了“网络预览”选项卡上的安全性
- 改进了在断点处重新加载
- 控制台更新
- 在“样式”窗格中显示继承的突出显示伪元素
- [实验性]复制 CSS 更改
- [实验性]在浏览器之外选取颜色