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

Jecelyn Yeen

新的 CSS 长度制作工具

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

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

将光标悬停在单位类型上，您会注意到该单位类型带有下划线。点击该下拉菜单，然后从中选择一个单位类型。

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

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

Chromium 问题：1126178、1172993

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

您现在可以隐藏“问题”标签页中的特定问题，以便仅关注对您而言重要的问题。

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

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

Chromium 问题：1175722

改进了房源的显示方式

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

• 始终在控制台、来源面板和属性窗格中将自有属性加粗并排在前面。
• 在属性窗格中扁平化显示属性。

例如，以下代码段创建了一个具有 2 个自有属性（user 和 access）的 URL 对象 link，并更新了继承属性 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。自有房源现在以粗体显示，并排在最前面。这些更改使您能够更轻松地发现自定义属性，尤其是对于具有许多继承属性的 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 中的新功能。

Chromium 问题：772558

对“来源”面板中的摘要进行排序

来源面板下摘要窗格中的摘要现在按字母顺序排序。之前，它未经过排序。

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

Chromium 问题：1243976

新增了指向翻译版版本说明的链接，以及报告翻译 Bug 的链接

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

自 Chrome 94 起，您可以在开发者工具中设置首选语言。如果您发现翻译存在任何问题，请通过以下方式报告翻译问题，帮助我们改进翻译：依次选择更多选项 > 帮助 > 报告翻译错误。

Chromium 问题：1246245、1245481

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

您是否觉得很难在命令菜单中搜索文件？好消息！我们现在增强了命令菜单界面！

打开命令菜单，在 Windows 和 Linux 中按键盘快捷键 Control+P，或在 macOS 中按 Command+P，即可搜索文件。

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

Chromium 问题：1201997

下载预览渠道

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

与 Chrome 开发者工具团队联系

您可以使用以下选项来讨论新功能、更新或与开发者工具相关的任何其他内容。

• 请前往 crbug.com 向我们提交反馈和功能请求。
• 在开发者工具中，依次选择 more_vert 更多选项 > 帮助 > 报告 DevTools 问题，以报告 DevTools 问题。
• 在 Twitter 上向 @ChromeDevTools 发送推文。
• 在 DevTools 新变化 YouTube 视频或 DevTools 提示 YouTube 视频中发表评论。

开发者工具的新变化

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