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

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

从应用程序工具测试 PWA 的协议处理程序

在 Microsoft Edge 105 中, 应用程序 工具现在支持测试协议处理程序。 自 Microsoft Edge 96 以来,你已能够在渐进式 Web 应用的应用程序清单中定义协议处理程序, (PWA) 。 现在,如果已安装 PWA,则可以在 DevTools 中从 应用程序 工具本身测试这些协议。

为 PWA 打开 DevTools 后:

  1. 打开 应用程序 工具。
  2. 在左侧展开并选择“ 应用程序>清单>协议处理程序”。
  3. “协议处理程序 ”页的“ 协议处理程序 ”下拉列表中,选择要测试的协议。
  4. 在文本框中,输入要测试的 URL 或终结点。
  5. 单击“ 测试协议 ”按钮。

应用程序工具将尝试使用指定的协议和 URL 启动 PWA。 浏览器请求打开应用程序的权限,然后提示确认是否要处理协议和要启动的应用。 如果授予权限,应用将打开并显示指定内容。

协议处理程序

另请参阅:

在网络控制台工具中更可靠地编辑和重新发送网络请求

以前在 Microsoft Edge 中,从网络工具为网络请求选择 “编辑并重新发送 ”可能尚未可靠地打开 网络控制台 工具,并且未使用请求中的值对其进行预填充。

在 Microsoft Edge 105 中,此问题已在旧版 DevTools UI 中修复。 将来版本中的焦点模式 DevTools UI 中也会修复此问题。 编辑和重新发送 现在使用要重新发送的网络请求的值预先填充 网络控制台 工具。 在从 网络控制台 工具发送请求之前,可以继续修改这些值。 感谢你向我们发送你关于此问题的反馈!

右键单击要更改和重新发送的网络请求,然后选择 “编辑并重新发送”:

编辑和重新发送

网络控制台中,编辑网络请求信息,然后单击“ 发送 ”按钮:

网络控制台编辑和发送

另请参阅:

焦点模式:改进了 DevTools、活动栏和快速视图的位置控件

在 Microsoft Edge 105 中,对位置控件进行了多项改进,包括用于更改 “快速视图 ”面板方向的新选项。

自定义和控制 DevTools (...) 菜单现在直接包含用于设置 DevTools 停靠位置的按钮,而无需打开子菜单。 “停靠位置”图标现在具有更高的对比度,并且现在突出显示了当前所选的“停靠位置”按钮。

此菜单现在还直接包含用于设置和指示 活动栏 显示位置的按钮,而不是使用子菜单。

在早期版本的 Microsoft Edge 中,在焦点模式下选择停靠位置:

将位置菜单图标停靠在前面

在 Microsoft Edge 105 的焦点模式下选择停靠位置:

在之后停靠位置菜单图标

你现在可以更改 快速视图 工具栏和面板的方向。 若要垂直而不是水平显示 “快速视图 ”面板,请单击“ 将快速视图停靠到右侧 ”按钮:

将快速视图停靠在右侧

若要将 “快速视图 ”工具栏和面板返回到水平方向,请单击“ 将快速视图停靠到底部 ”按钮:

将快速视图停靠到底部

若要在任一方向最小化 “快速视图 ”面板,请单击“ 折叠快速视图 ”按钮,或按 Esc

最小化快速视图

修复:源和网络工具中的搜索现在在焦点模式下按预期工作

在早期版本的 Microsoft Edge 中,焦点模式试验未正确展示“网络”工具中的“搜索”功能或“源”工具中的“在所有文件中搜索”功能。 在 Microsoft Edge 105 中,已修复这些问题。

现在,可以通过“搜索”图标在 “网络 ”工具中 搜索

网络搜索

若要在 “源” 工具中搜索所有文件,请在“ 页面 ”部分中,右键单击 顶部 窗口或任何域,然后选择“ 在所有文件中搜索”:

网络搜索全部

另请参阅:

提高了“问题”工具的可靠性

在早期版本的 Microsoft Edge 中,存在一个 bug,导致问题未显示在 “问题” 工具中。 Microsoft Edge 105 中已修复此 bug。

另请参阅:

Chromium项目的公告

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