Chrome 129 开发者工具中的新功能

Sofia Emelianova
Sofia Emelianova
GitHub

录制器支持将数据导出到适用于 Firefox 的 Puppeteer

作为 WebDriver BiDi 支持的一部分，录制器面板现在可以将录制内容导出到适用于 Firefox 的 Puppeteer。由于 Puppeteer 支持 Firefox，您现在可以使用 Chrome 开发者工具的 Recorder 面板录制用户体验历程、导出这些历程，并在 Firefox 和 Chrome 中运行这些历程。

在录制器的“导出”菜单中添加“Puppeteer for Firefox”选项之前和之后。

如需了解详情，请参阅 WebDriver BiDi - 跨浏览器自动化的未来。

改进了性能面板

此版本对性能面板进行了多项改进。

实时指标观察

效果面板现在会显示有关核心网页指标的实时观察结果，包括本地机器上的结果，以及基于 Chrome UX Report 中的现场数据的结果。这样，您无需捕获性能轨迹即可发现性能问题，并了解您的体验与用户体验相比具有多大代表性。

如需查看 LCP 和 CLS 的实时观察结果，请打开效果面板。如需查看 INP，请在网页上执行互动操作。如需将您的本地指标与 Chrome 用户体验报告中的汇总用户体验数据进行比较，请添加现场数据：在右侧的现场数据部分中，点击设置，然后在对话框窗口中点击确定。将光标悬停在某个指标值上，即可看到包含更多信息的提示。

“效果”面板中有关指标的实时观察结果。

效果面板会突出显示可改进的指标，并提供有关如何使本地体验与用户体验相匹配的分析和建议。例如，您可能需要限制 CPU 或网络，您可以在同一屏幕的右侧录制设置部分执行此操作。

效果面板中的搜索框现在也适用于网络轨道，因此您可以使用 Ctrl / Cmd + F 快捷键查找请求。

通过搜索找到的网络请求。

查看 performance.mark 和 performance.measure 调用的堆栈轨迹

在 Summary 标签页中，Performance 面板现在会显示 performance.mark 和 performance.measure 调用的堆栈轨迹。您可以使用这些调用来使用自定义数据扩展性能轨迹。

显示 performance.mark 和 performance.measure 调用的堆栈轨迹之前和之后。

如需了解详情，请参阅使用可扩展性 API 自定义效果数据。

在“自动填充”面板中使用测试地址数据

自动填充面板现在可为地址表单提供测试数据。这样，当您在 Chrome 中未保存任何地址或使用访客个人资料时，就可以更轻松地测试您网站上的地址表单。

如需使用测试数据自动填充地址表单，请打开自动填充面板，开启 在自动填充菜单中显示测试地址，右键点击您网页上提交的地址表单，然后从开发者工具菜单中选择一个选项。

在向地址表单字段下拉菜单中添加自动填充测试数据选项之前和之后。

改进了“元素”面板

此版本对元素面板进行了一些改进。

为特定元素强制设置更多状态

现在，在元素 > 样式中的 :hov 部分，您可以强制启用更多伪类。这组新选项位于强制使用特定元素状态下拉菜单下，仅适用于您选择的特定元素。例如，<label> 和 <input> 具有不同的选项集。

添加强制设置特定元素状态功能之前和之后。

Chromium 问题：40280012。

“元素”>“样式”现在会自动补全更多网格属性

现在，当您修改网格区域和线条名称时，元素 > 样式标签页会提供自动补全选项。

在添加自动补全选项之前和之后修改网格线名称。

如需了解详情，请参阅检查 CSS 网格布局 ，尤其是其中的显示行名称部分。

Lighthouse 12.2.0

Lighthouse 面板现在运行的是 Lighthouse 12.2.0。

此更新修复了许多 bug。请参阅完整的变更列表。

如需了解如何在 DevTools 中使用 Lighthouse 面板的基础知识，请参阅 Lighthouse：优化网站速度。

Chromium 问题：772558。

其他亮点

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

  • 元素：
    • 修复了重载长度属性呈现不正确的 bug 357020613。
    • 已根据规范将 position-try-options 重命名为 position-try-fallbacks。
    • 现在，即使在 iframe 中，页面刷新也会恢复所选节点 40719145。
    • 无障碍：屏幕阅读器现在会读出显示元素按钮 357382536。
  • 性能 > 网络：在“网络”中显示菜单选项现在会打开相关网络请求的标头标签页。
  • 控制台：
    • C/C++ 扩展程序中的错误现在不会强制打开控制台 356320158。
    • 修复了 JS 模块中的 import.meta 在暂停时无法求值的 bug 40743793。
  • 内存：修复了以下 bug：在忽略保留器后，“恢复被忽略的保留器”不会显示 327337527。

下载预览渠道

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

与 Chrome DevTools 团队联系

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

开发者工具的新变化

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