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

Jecelyn Yeen

使用“样式”窗格调试高清颜色

新的 CSS 颜色类型和空间即将登陆 Web 平台！同样令人兴奋的是，DevTools 推出了新工具，可帮助开发者创建、转换和调试高清色彩。

Styles 窗格现在支持 12 个新颜色空间和 7 个新色域，如 CSS Color Level 4 规范中所述。如需全面了解 Web 上提供的颜色选项，请参阅高清 CSS 颜色指南。

以下是使用 color()、lch()、oklab() 和 color-mix() 的 CSS 颜色定义示例。 CSS 颜色定义示例。

使用 color-mix() 函数时，您可以在“计算”窗格中查看最终颜色输出。 “计算”窗格中的颜色混合结果。

颜色选择器支持所有新的颜色空间，并提供更多功能。例如，点击 color(display-p3 1 0 1) 的颜色样本。我们还添加了色域边界线，以区分 sRGB 和 display-p3 色域，以便您更清楚地了解所选颜色的色域。色域边界线。

开发者工具支持在颜色格式之间转换颜色。使用更改颜色格式图标可访问转换弹出式窗口，或者只需按 Shift 并点击样式窗格中的颜色样本即可。 在颜色格式之间转换颜色。

转换时，请务必了解转换内容是否已剪裁以适应空间。DevTools 会在转换后的颜色旁边放置一个警告图标，以提醒您发生了这种剪裁。 颜色剪裁警告。

此外，您还可以使用新快捷方式从屏幕中选择颜色。按“c”键可激活滴管工具，按 Escape 键可将其停用。取色器工具仅会在 sRGB 颜色空间中采样颜色。例如，如果您尝试对不在 sRGB 颜色空间内的颜色 color(display-p3 1 0 1) 进行采样，滴管工具会将该颜色剪裁为 sRGB 空间中最接近的颜色，即紫红色 color(display-p3 0.92 0.2 0.97)。

启用滴管。

最后，颜色格式设置现已废弃，以便为新的高清颜色格式腾出空间。 弃用颜色格式设置。

Chromium 问题：1073895、1395782、1408777、1395782、1392717、1382409、1392054

改进了断点用户体验

通过经过重新设计的断点窗格，您可以快速访问常用功能，尤其是停用、修改和移除断点。

以下是一些亮点： - 两个暂停异常选项都移到了“断点”窗格，并带有文字标签，以便于用户自行理解。 暂停异常选项。

  • 断点按文件分组，按行号或列号排序，并且可收起。按文件对断点进行分组。

  • 在悬停在断点或文件上时，可以使用新选项停用、移除和修改断点。用于停用断点的新选项。

  • 点击“修改断点”按钮以打开断点编辑器。在这里，您可以输入断点条件或切换到日志点。 断点修改对话框。

如需了解如何使用 DevTools 进行调试，请参阅 JavaScript 调试参考。

Chromium 问题：1407586、1402891、1402893

可自定义的录音机快捷键

使用键盘快捷键可更快地录制和重放用户体验历程。

Recorder 引入了一些便捷的键盘快捷键，以便更快地录制和重放用户体验历程。

不记得快捷方式？没关系，您可以随时点击 ? 按钮查看所有快捷方式。 录音机快捷键。

您甚至可以通过设置菜单自定义这些快捷键。 自定义录音机快捷键。

如果您在其他面板中工作，并想要开始录制用户体验历程，请使用 DevTools 中的命令菜单中的创建新录制内容命令开始录制。 创建新的录制命令。

Chromium 问题：1339771

改进了 Angular 的语法突出显示功能

开发者工具增强了 Angular HTML 模板的语法突出显示功能，让您更轻松地阅读代码并识别其结构。 针对 Angular HTML 模板的语法突出显示。

Chromium 问题：1385374、1385678

在“应用”面板中重新整理缓存

缓存存储空间窗格现已移至应用面板的存储空间部分，而前进/返回缓存窗格已移至后台服务部分。“应用”面板中的缓存。

Chromium 问题：1407166

其他亮点

以下是此版本中的一些值得注意的修复：

  • DevTools 已更新，在加载源代码映射时会遵循停用缓存设置。(1407084)
  • 元素面板现在会立即自动聚焦到搜索结果中的第一个匹配元素。(1381853)
  • 修复了多项 bug，以提高源代码映射和断点的可靠性。（508270、1403362、1403432、1396298、1395337、1405134）
  • 为了更好地进行调试，开发者工具现在支持使用私有类成员评估表达式。(1381806) 使用私有类成员对表达式进行求值。

下载预览渠道

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

与 Chrome DevTools 团队联系

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

开发者工具的新变化

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