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

Jecelyn Yeen

使用“Styles”窗格调试 HD 颜色

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

Styles（样式）窗格现在支持 12 种新颜色空间和 7 种新色域（如 CSS 颜色级别 4 规范中所述）。如需全面了解网络上可用的颜色选项，请参阅高清 CSS 颜色指南。

下面是包含 color()、lch()、oklab() 和 color-mix() 的 CSS 颜色定义示例。 CSS 颜色定义示例。

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

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

开发者工具支持在颜色格式之间进行颜色转换。使用 Change Color Format 图标打开转换弹出式窗口，或直接使用 Shift 并点击 Styles 窗格中的色样。 在不同颜色格式之间转换颜色。

转换时，请务必了解转换是否被裁剪以适应空间。开发者工具会在转换后的颜色旁边放置一个警告图标，提醒您注意此剪辑。 颜色裁剪警告。

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

断点用户体验增强

经过重新设计的 Breakpoints 窗格可让您快速访问常用功能，特别是停用、修改和移除断点的功能。

下面介绍了一些亮点： - 两个暂停异常选项均已移至 Breakpoints 窗格并带有文字标签，以使其更加清晰易懂。 暂停例外选项。

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

  • 新增了一些选项，可用于在将鼠标指针悬停在某个断点或文件上时停用、移除和修改断点。 用于停用断点的新选项。

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

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

Chromium 问题：1407586、1402891、1402893

可自定义的录音机快捷键

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

Recorder 引入了一些方便的键盘快捷键，可加快用户流程的录制和重放速度。

不记得快捷键？没问题，点击 ? 按钮即可随时查看所有快捷键。 “录音机”快捷方式。

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

如果您使用的是其他面板，并希望启动用户流记录，请使用开发者工具中命令菜单中的 Create a new record 命令开始创建流程。 创建新的录制命令。

Chromium 问题：1339771

更好地突出显示 Angular 的语法

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

Chromium 问题：1385374、1385678

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

缓存存储窗格现在位于应用面板的存储部分，往返缓存窗格已移至后台服务部分。 “Applications”面板中的缓存。

Chromium 问题：1407166

其他亮点

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

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

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

  • 请通过 crbug.com 提交建议或反馈。
  • 使用更多选项报告开发者工具问题 展开 >帮助 >在开发者工具中报告开发者工具问题。
  • 请发送电子邮件至 @ChromeDevTools。
  • 请对我们的开发者工具新功能 YouTube 视频或开发者工具提示 YouTube 视频发表评论。

开发者工具的新变化

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