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 存储库中提交问题。

使用 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集成成功后,你现在可以在 Microsoft Visual Studio 中嵌入 Microsoft Edge 开发人员工具,以实时调试 ASP.NET 项目。 下载 适用于 Visual Studio 的 Microsoft Edge 开发人员工具 并试用。

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

  1. 确保已安装 Visual Studio 2022 和 ASP.NET 工作负载。
  2. 将 Web Live Preview 设置为默认Web Forms Designer,如 Microsoft Edge Developer Tools for Visual Studio 中所述。
  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 署名 4.0 国际许可中所述的条款使用。 Chromium项目公告的原始页面是 DevTools (Chrome 99) 中的新增功能,由 Jecelyn Yeen (Google) 的 Chrome DevTools 开发人员大使创作。

Creative Commons 许可证 此作品根据 Creative Commons 署名 4.0 国际许可获得许可