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

新的 CSS 长度制作工具

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

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

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

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

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

Chromium 问题:11261781172993

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

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

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

隐藏问题菜单

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

“已隐藏的问题”窗格

Chromium 问题:1175722

改进了属性显示

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

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

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

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

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

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

展平属性

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 的链接

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

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

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

Chromium 问题:12462451245481

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

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

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

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

命令菜单

Chromium 问题:1201997

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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