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

Jecelyn Yeen

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

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

样式窗格现在支持 CSS 颜色级别 4 规范中概述的 12 个新颜色空间和 7 个新色域。如需全面了解网络上可用的颜色选项，请参阅 High Definition CSS Color Guide。

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

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

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

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

转换时，了解转换是否被剪裁以适应空间非常重要。开发者工具会在转换后的颜色旁边放置一个警告图标，提醒您存在此剪裁问题。

此外，您还可以使用新的快捷方式从屏幕中选择颜色。按“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

改进了断点用户体验

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

以下是一些亮点： - 两种暂停异常选项均已移至断点窗格，并添加了标签文字，以便更易于理解。

• 断点按文件分组，按行号或列号排序，并且可以折叠。

• 现在，当您将鼠标悬停在断点或文件上时，系统会显示用于停用、移除和修改断点的新选项。

• 点击“修改断点”按钮，打开断点编辑器。您可以在此处输入断点条件，也可以切换到日志点。

如需了解如何使用开发者工具进行调试，请参阅 JavaScript 调试参考。

Chromium 问题：1407586、1402891、1402893

可自定义的录音机快捷键

使用键盘快捷键可更快地录制和重放用户流。

记录器引入了一些便捷的键盘快捷键，可用于更快地录制和重放用户流。

不记得快捷键了？没问题，您可以随时点击 ? 按钮查看所有快捷键。

您甚至可以通过设置菜单自定义这些快捷方式。

如果您在其他面板中工作，并想开始录制用户流程，请使用开发者工具中命令菜单中的创建新记录命令开始录制。

Chromium 问题：1339771

更好地突出显示 Angular 语法

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

Chromium 问题：1385374、1385678

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

您现在可以在应用面板的存储空间部分中找到缓存存储空间窗格，而往返缓存窗格已移至后台服务部分。

Chromium 问题：1407166

其他亮点

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

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

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

• 请前往 crbug.com 向我们提交反馈和功能请求。
• 在开发者工具中，依次点击 more_vert 更多选项 > 帮助 > 报告 DevTools 问题，报告开发者工具问题。
• 在 Twitter 上向 @ChromeDevTools 发送推文。
• 在 DevTools 新变化 YouTube 视频或 DevTools 提示 YouTube 视频中发表评论。

开发者工具的新变化

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