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 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Updated on 改进文章

This site uses cookies to deliver and enhance the quality of its services and to analyze traffic. If you agree, cookies are also used to serve advertising and to personalize the content and advertisements that you see. Learn more about our use of cookies.