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

新的 CSS 长度制作工具

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

Styles 窗格中,查找具有长度的任何 CSS 属性(例如 heightpadding)。

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

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

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

Chromium 问题:11261781172993

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

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

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

“隐藏问题”菜单

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

“已隐藏的问题”窗格

Chromium 问题:1175722

改进了房源的显示

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

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

例如,以下代码段会创建一个 URL 对象 link,该对象包含 2 个自己的属性(useraccess),并更新继承属性 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 问题:10768201119900

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 问题:12462451245481

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

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

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

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

命令菜单

Chromium 问题:1201997

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

开发者工具的新变化

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