通过

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

  • 项目

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

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

从 Visual Studio Code 扩展中的“样式”工具同步实时更改

适用于 Visual Studio Code 的 Microsoft Edge DevTools 扩展现在具有名为 CSS 镜像编辑的试验。 使用此功能，可以使用样式工具调整 CSS，并且应用的更改会自动添加到Visual Studio Code编辑器中的 CSS 源文件。 可以打开和关闭此功能。

有关详细信息，请参阅从“样式”选项卡中更新.css文件 (CSS 镜像编辑) 。

若要提供反馈，请在Visual Studio Code活动栏中单击“Microsoft Edge 工具”，然后在“CSS 镜像编辑”部分中，单击“在此处留下反馈”链接。

CSS 样式编辑器中的更改现在显示在 CSS 文件中Visual Studio Code

控制台中的所有错误和警告消息现在都有搜索 Web 图标

“在 Web 上搜索此消息 ”图标现在可用于 控制台中的所有错误和警告。 以前，此图标仅针对某些常见错误和警告出现。 现在，图标已添加到剩余的错误和警告上。 单击“ 在 Web 上搜索此消息” 图标，使用相关的错误或警告字符串搜索 Web。

有关详细信息，请参阅 在 Web 上搜索控制台错误。

控制台中的所有错误和警告消息现在都有搜索 Web 图标

另请参阅：

改进了用于定义 User-Agent 客户端提示的键盘访问

从 Microsoft Edge 版本 92 开始，可以指定 User-Agent 客户端提示。 可以在以下两个位置之一指定 User-Agent 客户端提示：

在版本 95 之前的 Microsoft Edge 中，从“设置”的“设备”部分添加要模拟的自定义设备时，使用键盘选择“用户代理客户端提示”按钮会导致激活不正确的 UI 项。 它选择了“添加”按钮，而不是展开“用户代理客户端提示”部分进行填充。 使用 用户代理客户端提示 部分中的空字段立即添加你开始定义的设备。

在 Microsoft Edge 版本 95 中，此问题已修复。 现在，使用键盘选择 “用户代理客户端提示 ”按钮会展开一个窗体，你可以在其中为自定义设备指定客户端提示。

若要详细了解 User-Agent 客户端提示，请参阅 检测网站中的 Microsoft Edge。

设置 > 设备 > 设置 User-Agent 客户端提示

若要在Chromium开源项目中查看此功能的历史记录，请参阅问题1243827：用户代理客户端提示表单辅助功能。

如果筛选器与组标题匹配，控制台筛选器现在会显示分组消息

可以使用 console.group() 标记一组消息并为控制台消息提供一些组织。 在早期版本的 Microsoft Edge 中，尝试在控制台中筛选分组消息时存在几个问题。 筛选到组标签时，控制台不会在组内显示单个消息。 此外，即使标签与筛选器不匹配，筛选也不会隐藏组标签。

在 Microsoft Edge 版本 95 中，已修复这些问题。 筛选到标签后，现在会显示组标签和组内的各个消息。 当筛选器与组标签不匹配时，将隐藏整个组。

当筛选器字符串与组标签匹配时，将显示组及其成员：

当筛选器字符串与组标签匹配时，将显示组及其成员

如果筛选器字符串与组标签不匹配，则不会显示组及其成员：

当筛选器字符串与组标签不匹配时，不会显示组及其成员

另请参阅：

  • 控制台对象 API 参考中的组。

若要在Chromium开源项目中查看此功能的历史记录，请参阅问题363796：☂控制台筛选器不恰当地隐藏分组内容，并且不隐藏组标题。

Chromium项目的公告

以下是 Microsoft Edge 版本 95 中提供的一些其他功能，这些功能是开源Chromium项目贡献的。

改进了属性的显示

DevTools 通过以下方式改进了属性的显示：

  • 始终首先在控制台、源工具中和元素工具的“属性”选项卡中加粗和排序自己的属性。 (自己的属性 是直接在 object 上定义的属性。)
  • 平展“属性”窗格中显示 的属性 。

例如，下面的代码片段 创建一个 URL 对象，该对象 link 具有两个自己的属性： user 和 access，然后更新继承的属性 search的值：

const link = new URL('https://blogs.windows.com/msedgedev/');
link.user = { id: 1, name: 'Amelie Garner' };
link.access = 'admin';
link.search = `?access=${link.access}`;

在 控制台中输入上述代码后，请尝试记录 link。 自己的属性现在为粗体，在排序顺序中处于第一位。 通过这些更改，可以更轻松地发现自定义属性，尤其是 Web API (，例如 URL 具有许多继承属性的) ：

自己的属性是粗体并首先排序

在“元素”工具的“属性”窗格中，现在将平展属性列表，以便在调试 DOM 属性时获得更好的体验，尤其是对于 Web 组件：

平展的属性列表

另请参阅：

有关此功能的历史记录，请参阅1076820和 1119900Chromium问题。

代码片段现在在“源”面板中排序

在“源”工具的“代码段”选项卡中，以前未对代码段进行排序。 代码片段现在按字母顺序排序：

“源”面板中的已排序代码片段

另请参阅：

有关此功能的历史记录，请参阅Chromium问题：1243976。

改进了 DevTools 命令菜单的 UI

命令菜单已得到增强，以便更轻松地搜索文件。 在 Windows 和 Linux 中按 Ctrl+P 或在 macOS 中按 Command+P 时， 命令菜单 现在以粗体显示文件名以及指示文件类型的图标：

命令菜单，其中以粗体显示文件名，并带有一个指示文件类型的图标

另请参阅：

有关此功能的历史记录，请参阅Chromium问题1201997。

注意

此页面的“Chromium项目的公告”部分是基于 Google 按网站策略创建和共享的工作的修改，并根据 Creative Commons 署名 4.0 国际许可中所述的术语使用。 Chromium项目中公告的原始页面是 DevTools (Chrome 95) 中的新增功能，由 Jecelyn Yeen 创作。

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