开发者工具中的新功能 (Chrome 95)

Jecelyn Yeen

新的 CSS 长度制作工具

开发者工具添加了一种更轻松灵活的 CSS 更新长度方式！

在样式窗格中，查找任何具有长度的 CSS 属性（例如 height、padding）。

将鼠标悬停在单元类型上，您会发现该单元类型带有下划线。点击该条件可从下拉列表中选择一种单位类型。

将鼠标悬停在单位值上，鼠标指针将变为水平光标。水平拖动可增大或减小值。要将值调整 10 倍，请在拖动时按住 Shift 键。

您仍然可以以文本形式修改单位值，只需点击值并开始修改即可。

Chromium 问题：1126178、1172993

在“问题”标签页中隐藏问题

您现在可以在“问题”标签页中隐藏特定问题，仅关注您所关注的问题。

在“问题”标签页中，将鼠标悬停在要隐藏的问题上。点击更多选项   展开 >隐藏此类问题。

隐藏问题菜单

所有已隐藏的问题都将添加到已隐藏的问题窗格下。展开该窗格。您可以取消隐藏所有已隐藏的问题或选定的问题。

“已隐藏的问题”窗格

Chromium 问题：1175722

改进了属性显示

开发者工具通过以下方式改进了属性的显示方式：

  • 在控制台、来源面板和属性窗格中，应始终将自身属性加粗并优先排序。
  • 将属性窗格中的属性显示扁平化。

例如，以下代码段会创建一个 URL 对象 link，该对象包含 2 个自己的属性（user 和 access），并更新继承属性 search 的值。

/* example.js */

const link = new URL('https://goo.gle/devtools-blog');

link.user = { id: 1, name: 'Jane Doe' };
link.access = 'admin';
link.search = `?access=${link.access}`;

尝试在控制台中记录 link。自己的属性现在以粗体显示并列在最前面。这些更改可让您更轻松地发现自定义属性，尤其是对于具有许多继承属性的网络 API（如 URL）。

自己的属性以粗体显示并列在最前面

除了这些更改外，属性窗格中的属性现在也已扁平化，以提供更好的 DOM 属性调试体验，尤其是对于网络组件。

展平属性

Chromium 问题：1076820、1119900

Lighthouse 面板中的 Lighthouse 8.4

Lighthouse 面板现已运行 Lighthouse 8.4。Lighthouse 现在将检测 Largest Containful Paint (LCP) 元素是否为延迟加载的图片，并建议从中移除 loading 属性。

如需详细了解相关更新，请查看 Lighthouse 8.4 的新变化。

Lighthouse 报告中的延迟加载 LCP 审核

Chromium 问题：772558

在“来源”面板中对代码段进行排序

在来源 面板下，代码段 窗格中的摘要现在按字母顺序排序。之前，系统不会对其排序。

利用代码段功能更快速地运行命令。观看此视频获取提示！

在“来源”面板中对代码段进行排序

Chromium 问题：1243976

新增指向翻译后的版本说明和报告翻译 bug 的链接

现在，您可以通过“新功能”标签页点击查看另外 6 种语言的开发者工具版本说明，这些语言包括俄语、中文、西班牙语、日语、葡萄牙语和韩语。

从 Chrome 94 开始，您可以在开发者工具中设置首选语言。如果你发现翻译中存在任何问题，请通过更多选项报告翻译问题，帮助我们加以改进 >帮助 >报告翻译错误。

新增指向翻译后的版本说明和报告翻译 bug 的链接

Chromium 问题：1246245、1245481

改进了开发者工具命令菜单的界面

您是否发现很难在命令菜单中搜索文件？好消息！命令菜单界面现已得到增强！

打开命令菜单，在 Windows 和 Linux 下按键盘快捷键 Ctrl+P，或在 MacOS 中使用键盘快捷键 Command+P 搜索文件。

命令菜单的界面改进仍在进行中，敬请关注更多更新！

命令菜单

Chromium 问题：1201997

下载预览渠道

请考虑将 Chrome Canary、开发者版或 Beta 版用作您的默认开发浏览器。通过这些预览渠道，您可以访问最新的开发者工具功能，测试先进的网络平台 API，并在用户之前发现您网站上的问题！

与 Chrome 开发者工具团队联系

使用以下选项讨论博文中的新功能和变更，或与开发者工具相关的任何其他内容。

  • 请通过 crbug.com 提交建议或反馈。
  • 使用更多选项报告开发者工具问题 展开 >帮助 >在开发者工具中报告开发者工具问题。
  • 请发送电子邮件至 @ChromeDevTools。
  • 请对我们的开发者工具新功能 YouTube 视频或开发者工具提示 YouTube 视频发表评论。

开发者工具的新变化

开发者工具的新变化系列涵盖所有内容的列表。