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

若要检查 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 内部版本 2023 会议于 2023 年 5 月 23-25 日举行。 在以下视频中详细了解 DevTools 中用于内存、性能和生产调试的新功能,以及侧栏、WebView2 和聊天插件中的 PWA 的新功能:

使用故障分析器工具调试 JavaScript 错误堆栈跟踪

新的 崩溃分析器 工具在 Microsoft Edge 113 中作为试验提供。 在 崩溃分析器 工具中,可以输入 JavaScript 堆栈跟踪(例如非致命 JavaScript 异常),然后将源映射应用于堆栈跟踪,以便更快地进行调试。

若要访问故障分析器工具,请在“设置>试验”中选择“启用故障分析器试验”。 请参阅 打开或关闭试验

可以将非致命 JavaScript 异常或类似数据报告给 Azure 应用程序 Insights 等工具:

  1. 首先,若要使用 故障分析器 工具,需要特殊格式的堆栈跟踪,其中包括名为 的部分 Source modules。 本部分包含对作为错误堆栈跟踪一部分的 JavaScript 函数的源映射引用。 可以使用 故障分析器支持 npm 包生成这些堆栈跟踪。

  2. 然后,你需要一种方法来实际从运行代码的浏览器接收堆栈跟踪。 其中一种方法是使用 Azure 应用程序 Insights;请参阅 Application Insights 概述

  3. 创建堆栈跟踪后,将其粘贴到 崩溃分析器 工具的左窗格中。

  4. 故障分析器 工具中,单击“ 分析 ”按钮 (或按 Ctrl+Enter) 。 右侧窗格显示组成堆栈跟踪的原始文件和函数名称:

    使用故障分析器工具调试非致命 JavaScript 异常

  5. 单击各个堆栈帧以查看原始代码中导致错误的行。

另请参阅:

内存工具可以取消缩小堆快照中的对象名称

在 Microsoft Edge 113 中,只要加载源映射,内存工具现在在获取堆快照时会自动提供原始对象名称。 通过将源映射托管在 Azure Artifacts 符号服务器上,可以安全可靠地加载源映射。

在下图中,缩小的对象名称e显示在内存工具的堆快照中:

内存工具中的堆快照显示缩小的对象名称

现在,在 Microsoft Edge 113 中,内存工具会自动取消删除堆中的对象名称快照:

内存工具中的堆快照显示未缩小的对象名称

另请参阅:

问题工具对键盘导航有更好的支持

“问题” 工具中,更改 “严重性 ”或 “浏览器 筛选器”会在 “问题” 工具顶部显示一个信息栏,其中包含“ 重新生成问题 ”按钮。 在早期版本的 Microsoft Edge 中,使用键盘导航此信息栏会导致 “关闭 ”按钮消失。 在 Microsoft Edge 113 中,此问题已修复:

使用键盘导航“问题”工具不再会导致“关闭”按钮消失

另请参阅:

在焦点模式下,将鼠标悬停在某个工具上不再使每个工具的名称消失在活动栏中

在早期版本的 Microsoft Edge 中,在焦点模式下,在水平模式下将鼠标悬停在 活动栏中 的工具图标上会导致 活动栏中 其他工具的名称消失。 在 Microsoft Edge 113 中,此问题已修复。 将鼠标悬停在工具图标上以查看工具提示中的工具名称时,其他工具的名称仍显示在 活动栏中

将鼠标悬停在活动栏中的工具图标上会生成带有工具名称的工具提示

“自定义 DevTools”菜单对 VS Code 主题有更好的支持

在 Microsoft Edge 的早期版本中,应用 Microsoft Visual Studio Code中的主题(如 Solarized Light 或 Kimbie Dark)会导致将鼠标悬停在“自定义和控制”“DevTools”菜单中的项目时出现低对比度问题。 在 Microsoft Edge 113 中,此问题已修复。 “ 自定义和控制 DevTools ”菜单中的项现在以足够的颜色对比度显示:

使用太阳光主题的“自定义 DevTools”菜单中的足够颜色对比度

另请参阅:

内存工具中的“节点类型”筛选器现在仅显示在堆的“摘要”视图中快照

Microsoft Edge 100 中,我们向内存工具添加了节点类型筛选器,因此在查看堆快照时,只能关注特定类型的对象,例如 ArrayString。 此节点类型筛选器仅适用于堆快照的“摘要”视图中显示的对象。

当选择了堆快照的“包含”或“统计信息”视图时,也会显示“节点类型”筛选器,即使筛选器不适用于这些视图也是如此。 此问题已修复。 在 Microsoft Edge 113 中,仅当选择了“摘要”视图时,才会显示“节点类型”筛选器:

“节点类型”筛选器显示在堆的“摘要”视图中快照

“包含 ”和 “统计信息 ”视图中,不再显示 “节点类型 ”筛选器,因为它不适用:

“节点类型”筛选器不显示在堆的“包含”视图中快照

另请参阅:

Chromium项目的公告

Microsoft Edge 113 还包括Chromium项目中的以下更新: