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

Sofia Emelianova
Sofia Emelianova
GitHub

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

作为 WebDriver BiDi 支持的一部分，Recorder 面板现在可以将录制内容导出到 Puppeteer for Firefox。Puppeteer 对 Firefox 的支持后，你现在可以使用 Chrome 开发者工具的 Recorder 面板记录用户流，并导出这些流，然后在 Firefox 和 Chrome 中运行。

将“Puppeteer for Firefox”选项添加到录音机的导出菜单之前和之后。

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

改进了性能面板

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

实时指标观察

性能面板现在会向您显示有关核心网页指标的实时观察结果，这些结果包括在本地计算机上，并且基于 Chrome 用户体验报告中的实测数据。这样一来，您无需捕获性能跟踪记录，即可发现性能问题，并了解您提供的体验与用户体验相比的代表性如何。

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

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

效果面板会突出显示可以改进的指标，并就如何让您的本地体验与用户的体验保持一致提供数据分析和建议。例如，您可能想限制 CPU 或网络，您可以在右侧记录设置部分的相同屏幕中执行该操作。

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

通过搜索找到网络请求。

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

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

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

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

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

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

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

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

改进了“元素”面板

此版本对 Elements 面板进行了几项改进。

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

现在，在元素 > 样式中的 :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。
  • 内存：修复了在忽略保留器 327337527 后，恢复忽略的保留器不显示的 bug。

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

开发者工具的新变化

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