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

Sofia Emelianova
Sofia Emelianova
GitHub

记录器支持导出到 Firefox 的 Puppeteer

作为 WebDriver BiDi 支持的一部分，“记录器”面板现在可以将录制内容导出到 Puppeteer for Firefox。借助 Puppeteer 对 Firefox 的支持，您现在可以使用 Chrome 开发者工具的记录器面板来记录用户流，然后导出这些用户流，并针对 Firefox 和 Chrome 运行它们。

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

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

改进了“效果”面板

此版本对性能面板进行了一些改进。

实时指标观测结果

性能面板现在会实时显示有关核心网页指标的观测结果，这些结果既基于本地计算机上的数据，也基于 Chrome 用户体验报告中的实测数据。这样，您无需捕获性能轨迹即可发现性能问题，并了解您的体验与用户的体验相比如何。

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

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

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

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

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

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

在摘要标签页中，性能面板现在会显示 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 修复。请参阅完整的变更列表。

如需了解有关在开发者工具中使用 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 开发者工具团队联系

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

开发者工具的新变化

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