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

Jecelyn Yeen

新的 CSS 长度制作工具

开发者工具添加了一种更简单、更灵活的方式来更新 CSS 中的长度！

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

将鼠标悬停在单元类型上，您会发现该单元类型带有下划线。点击该图标，然后从下拉菜单中选择一个单位类型。

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

您仍然可以将单位值作为文本进行修改，只需点击该值即可开始修改。

Chromium 问题：1126178、1172993

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

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

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

“隐藏问题”菜单

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

“已隐藏的问题”窗格

Chromium 问题：1175722

改进了房源的显示

借助以下功能，DevTools 可以改进属性的显示效果：

  • 在 Console、Sources 面板和 Properties 窗格中，始终将自有媒体资源设为粗体并优先排序。
  • 在属性窗格中展开属性显示。

例如，以下代码段会创建一个 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}`;

尝试在 Console 中记录 link。自有媒体资源现在会以粗体显示并优先排序。这些更改有助于更轻松地发现自定义属性，尤其是对于具有许多继承属性的 Web API（例如 URL）。

自有媒体资源会以粗体显示并优先排序

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

展开属性

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

现在，您可以点击“新变化”标签页，以 俄语、中文、西班牙语、日语、葡萄牙语和韩语阅读 DevTools 版本说明。

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

指向已翻译版本说明的新链接以及报告翻译 bug

Chromium 问题：1246245、1245481

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

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

打开命令菜单，然后使用键盘快捷键（在 Windows 和 Linux 中为 Control+P，在 macOS 中为 Command+P）搜索文件。

我们仍在不断改进命令菜单的界面，敬请关注更多更新！

命令菜单

Chromium 问题：1201997

下载预览渠道

不妨考虑将 Chrome Canary 版、开发者版或 Beta 版用作默认开发浏览器。通过这些预览版渠道，您可以使用最新的 DevTools 功能、测试尖端的 Web 平台 API，并帮助您在用户发现问题之前发现网站上的问题！

与 Chrome 开发者工具团队联系

您可以使用以下选项讨论与 DevTools 相关的新功能、更新或任何其他内容。

开发者工具的新变化

DevTools 新变化系列中涵盖的所有内容的列表。