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

Jecelyn Yeen

全新 CSS 长度制作工具

开发者工具增加了一种更简便、更灵活的方式，可以在 CSS 中更新长度！

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

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

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

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

Chromium 问题：1126178、1172993

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

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

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

隐藏问题菜单

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

“隐藏的问题”窗格

Chromium 问题：1175722

改进了属性显示

开发者工具通过以下操作改进了属性显示：

  • 请始终先在控制台、来源面板和属性窗格中将自己的属性加粗并排序。
  • 展平 Properties 窗格中的属性显示。

例如，以下代码段会创建一个 URL 对象 link，其中包含 user 和 access 这两个属性，并更新继承的属性 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 的新变化。

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

Chromium 问题：772558

在“Sources”面板中对代码段进行排序

现在，在 Sources 面板下的 代码段窗格中，代码段按字母顺序排序。之前，这项指标不排序。

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

在“Sources”面板中对代码段进行排序

Chromium 问题：1243976

添加了指向翻译版版本说明和报告翻译 bug 的新链接

现在，您可以通过“新变化”标签查看另外 6 种语言的开发者工具版本说明 - 俄语、中文、西班牙语、日语、葡萄牙语和韩语。

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

添加了指向翻译版版本说明和报告翻译 bug 的新链接

Chromium 问题：1246245、1245481

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

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

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

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

命令菜单

Chromium 问题：1201997

下载预览渠道

您可以考虑将 Chrome Canary 版、Dev 版或 Beta 版用作默认开发浏览器。通过这些预览渠道，您可以使用最新的开发者工具功能，测试先进的网络平台 API，并在用户采取行动之前发现网站上的问题！

与 Chrome 开发者工具团队联系

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

  • 通过 crbug.com 提交建议或反馈。
  • 使用开发者工具中的更多选项   了解详情   > Help > Report a DevTools issues来报告开发者工具问题。
  • 发推文：@ChromeDevTools。
  • 请在 YouTube 视频或“开发者工具提示”YouTube 视频中留言说明“开发者工具的新变化”。

开发者工具的新变化

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

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 浏览器 112

Chrome 111

Chrome 浏览器 110

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 已取消。

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59