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

若要检查 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 Edge |DevTools 99 中的新增功能

视频“Microsoft Edge | 的缩略图DevTools 99 中的新增功能”

使用 Azure Artifacts 符号服务器的源映射安全地调试生产代码

Azure Artifacts 符号服务器现在支持存储生成过程在编译、缩小和捆绑代码时生成的源映射。 现在可以将源映射发布到安全的 Azure Artifacts 符号服务器,而不是在公共服务器上托管源映射。 然后,将 DevTools 连接到符号服务器,让 DevTools 自动提取源映射。

通过使用源映射,可以在 DevTools 中查看和调试原始源代码,而无需使用服务器返回的已编译、缩小和捆绑的生产代码。 在 Azure Artifacts 符号服务器上托管源映射可以安全、私密地查看和使用源代码,而不是将源映射放置在服务器上并公开显示原始代码。

若要尝试此功能,请执行以下操作:

  1. 将源映射发布到 Azure Artifacts 符号服务器
  2. 通过输入 Azure DevOps 组织和个人访问令牌,打开 DevTools >设置>符号服务器 并将 DevTools 连接到 Azure Artifacts 符号服务器。

DevTools 设置中的“符号服务器”页,可在其中输入 Azure DevOps 个人访问令牌

另请参阅:

适用于 Visual Studio 的 Microsoft Edge DevTools 扩展

Visual Studio Code集成成功后,现在还可以在 Visual Studio Microsoft 中嵌入 Microsoft Edge 开发人员工具,以实时调试 ASP.NET 项目。 下载 适用于 Visual Studio 的 Microsoft Edge 开发人员工具 并试用。

若要尝试此功能,请执行以下操作:

  1. 确保已安装 Visual Studio 2022 和 ASP.NET 工作负载。
  2. 将 Web Live 预览版设置为默认Web Forms Designer,如 Microsoft 适用于 Visual Studio 的 Edge 开发人员工具中所述。
  3. 在 ASP.NET 项目中,在 “设计 ”窗口中打开项目的网页。
  4. “设计 ”窗口的左上角,单击“ 打开 Edge DevTools (Open Edge DevTools”图标) 按钮:

打开 Edge DevTools 的 ASP.NET 项目

此时会打开适用于 Visual Studio 的 Edge DevTools,其中选择了 “元素” 工具:

适用于 Visual Studio 的 Microsoft Edge 开发人员工具:DevTools 的元素工具

默认情况下, 网络 工具也可用:

适用于 Visual Studio 的 Microsoft Edge 开发人员工具:DevTools 的网络工具

检查工具 (检查工具图标) 和 切换截屏 (切换截屏图标) 可用,” 更多工具 (更多工具“图标) 菜单提供 问题网络状况网络请求阻止 工具。

另请参阅:

3D 视图中的层

Microsoft Edge 88 以来, 3D 视图 工具提供了 工具的改进版本。 现在,在 Microsoft Edge 99 中, 图层 工具中的功能已删除, 并且图层 工具包含一个链接,用于将你重定向到 3D 视图 工具中的“复合图层”视图。 可以在 3D 视图工具中找到以前使用的所有特征,以及更多功能。

更新: 图层 工具现已删除。

“图层”工具现在链接到 3D 视图工具

另请参阅:

使用源映射在性能配置文件中显示原始函数名称

更新: 在 Microsoft Edge 111 中,此功能已被删除,因为只要源映射托管在 Azure Artifacts 符号服务器上, 性能 工具现在在分析生产代码时会自动提供原始文件和函数名称。 请参阅 DevTools 中的新增功能 (Microsoft Edge 111) 中的性能工具在分析生产代码时取消管理文件和函数名称

已弃用新增功能条目

在性能工具中记录性能配置文件会生成缩小火焰图。 在早期版本的 Microsoft Edge 中,火焰图不使用源映射来显示原始函数名称,即使你在服务器上托管了源映射也是如此。

从 Microsoft Edge 版本 99 开始,可以在性能配置文件中显示原始函数名称,如下所示:

  1. 性能 工具中记录配置文件。
  2. 单击新的 “unminify ” (“unminify”图标) 按钮,创建并下载未指定的性能配置文件。
  3. 加载 (导入) (加载配置文件图标) 未减减的性能配置文件到 性能 工具中。

Unminify ”按钮将使用源映射(前提是它们与生产代码并行托管)来统一 性能 工具火焰图中的函数名称。

性能工具中的火焰图最初显示函数名称 bOXtbn,取自 Web 服务器返回的缩小生产代码:

性能工具火焰图中的缩小函数名称

单击“ unminify (unminify”图标) ,然后单击“ 加载配置文件 (加载配置文件”图标) 之后, 性能 工具中的火焰图现在显示标记有有意义名称的函数: invokeFunc (b) executeAction (O) endBatch (Xt) runReactions (bn) ,从源映射中检索到:

性能工具中火焰图中的未缩小函数名称

另请参阅:

改进了网络控制台和 3D 视图的辅助功能

在 Microsoft Edge 的早期版本中,在网络控制台工具中提供自定义持有者令牌时,辅助技术宣布了不正确的信息。 在 Microsoft Edge 版本 99 中,此问题已修复。 选择用于提供自定义持有者令牌的文本框时,辅助技术现在将报出“令牌编辑文本请求视图组”。

网络控制台工具

在早期版本的 Microsoft Edge 中,辅助技术只会在 3D 视图工具中公布单选按钮文本,而不公布按钮所属的组名称。 在 Microsoft Edge 版本 99 中,此问题已得到修复。 例如,当焦点位于 “使用屏幕纹理 ”单选按钮上时,辅助技术现在将报出:“颜色类型单选按钮组,使用屏幕纹理,单选按钮,已选中”。

3D 视图工具

另请参阅:

改进了“源”面板中的源文件夹树

“源”工具的“页面”选项卡中,源文件夹的树现已得到改进,文件夹的命名和大纲的混乱程度已减少。 已删除不需要的路径前缀,例如 .././ 。 通过合并等效的重复文件夹简化了树结构。

源工具的“页面”选项卡中的清理文件夹轮廓

有关Chromium开源项目中此功能的历史记录,请参阅问题1284737

另请参阅:

Chromium项目的公告

Microsoft Edge 版本 99 还包括来自 Chromium 项目的以下更新:

注意

此页面的某些部分是根据 Google 创建和共享的作品所做的修改,并根据 Creative Commons Attribution 4.0 International License 中描述的条款使用。 Chromium项目公告的原始页面是 DevTools (Chrome 99) 中的新增功能,由 Jecelyn Yeen 创作。

Creative Commons 许可证 本作品根据 Creative Commons Attribution 4.0 International License 获得许可。