DevTools 新功能(Chrome 95)

Published on Updated on

Translated to: English, Español, Português, 한국어, Pусский, 日本語

感谢 韩昌浩 @hanselfmu 提供的翻译

有兴趣帮忙改进 DevTools 吗?请注册并参与 Google 用户体验调研

新的 CSS 长度编辑工具

DevTools 添加了一种更简单且灵活的方式来更新 CSS 长度!

在“样式”边栏中,找到任意一个含有长度的 CSS 属性(例如 heightpadding)。

将鼠标悬停在长度单位上,会出现一条下划线来标明它。点击它即可在弹出的下拉列表中选择新的长度单位。

将鼠标悬停在长度数值上,就会发现您的鼠标指针变成了可横向移动的光标。横向拖拽光标即可加减长度数值。如果想以 10 来调整长度数值,可以在拖拽的同时按下 Shift 键。

您仍然可以通过使用文本的方式来编辑长度数值 -- 只需要在长度数值上点击一下即可直接编辑。

Chromium 议题: 1126178, 1172993

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

您现在可以在“问题”标签页中隐藏特定的问题,从而只关注您关心的问题。

“问题”标签页,将鼠标悬停在一个您想要隐藏的问题上。点击更多选项   更多   > 隐藏与此类似的问题

“隐藏问题”菜单

所有的隐藏问题都会被添加到“已隐藏的问题”窗格下。展开此窗格,您可以取消隐藏所有问题或选中的问题。

“已隐藏的问题”窗格

Chromium 议题: 1175722

改善属性展示

DevTools 通过以下方式改善了属性的展示:

  • 在控制台、“来源”面板和“属性”边栏中,永远加粗并优先排序自有属性。
  • 在“属性”边栏中扁平化展示属性。

例如,以下的代码片段创建了一个 URL 对象链接(link),它包含了两个自有属性: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。自有属性现在是加粗并优先排序的。这些改动会让自定义属性更容易被发现,尤其对于有着很多继承属性的 Web APIs(例如 URL)。

自有属性加粗并优先排序

在这些改动之外,“属性”边栏所展示的属性现在也已扁平化,从而提供更好的 DOM 属性调试体验,尤其是对于 Web components

扁平化的属性

Chromium 议题: 1076820, 1119900

Lighthouse 面板中的 Lighthouse 8.4

Lighthouse 面板现已运行 Lighthouse 8.4。Lighthouse 现在可以检测到某 Largest Containful Paint (LCP) 元素是否是一个延迟加载的图片,并建议移除该图片的 loading 属性。

更多的更新细节请参见 What’s new in Lighthouse 8.4

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

Chromium 议题: 772558

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

“来源”面板下的“代码段”边栏中的代码段现在按照字母顺序排序了。在此之前它并无排序规则。

利用代码段功能来更快运行命令。请观看此视频来获得一个提示

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

Chromium 议题: 1243976

阅读 DevTools 新功能的翻译文章和举报翻译错误

您现在可以在新变化标签页里点击阅读其他 6 种语言的 DevTools 新功能 - 俄文, 中文, 西班牙文, 日文, 葡萄牙文 and 韩文.

从 Chrome 94 开始,您可以在 DevTools 中设置您的界面语言。 如果您发现任何翻译问题,请通过 更多选项 > 帮助 > 举报翻译问题 帮助我们改进翻译错误

两个新的链接让您阅读 DevTools 新功能的翻译文章和举报翻译错误

Chromium issues: 1246245, 1245481

DevTools 命令菜单的用户交互优化

您是否发现要想在命令菜单中搜索一个文件,这本身就是一件很困难的事情呢?好消息来了,命令菜单的用户交互现在得到了改善!

打开命令菜单,在 Windows 和 Linux 上使用快捷键 Control+P,或在 MacOS 上使用 Command+P 来搜索文件。

命令菜单的用户交互还在持续优化中,请继续关注后续的更新!

命令菜单

Chromium 议题: 1201997

下载 Chrome 预览版本

您可以考虑把 Chrome Canary 版, 开发者版(Dev)测试版(Beta) 设置为默认开发浏览器。这些预览版本能让你抢先体验处于 DevTools 开发阶段的新功能、测试最新的网络平台 API ,让您抢先在用户之前发现您网站上的问题!

联系 Chrome DevTools 团队

您可以透过一下渠道讨论这篇文章的新功能和改进,或一切关于 DevTools 的一切。

  • 提交建议或意见回馈:crbug.com.
  • 报告 DevTools 问题:打开 DevTools,按 更多选项图标   More   > 帮助 > 报告 DevTools 问题
  • 在推特上,发推文: @ChromeDevTools.
  • 在我们的 What's new in DevTools YouTube 视频底下留言。

更多 DevTools 的功能

欲查询完整的 DevTools 已发布的功能,请参考 What's New In DevTools 英文系列。以下是部分已翻译成中文的内容。

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.