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

Sofia Emelianova
Sofia Emelianova
GitHub

Gemini 控制台数据分析功能将在大多数欧洲国家/地区正式推出

此版本在欧洲大部分国家/地区支持 Gemini 的控制台数据洞见功能。

新支持的欧洲国家/地区列表

奥地利、比利时、保加利亚、瑞士、塞浦路斯、捷克、德国、丹麦、爱沙尼亚、西班牙、芬兰、法国、英国、希腊、克罗地亚、匈牙利、爱尔兰、冰岛、意大利、列支敦士登、立陶宛、卢森堡、拉脱维亚、马耳他、荷兰、挪威、波兰、葡萄牙、罗马尼亚、瑞典、斯洛文尼亚、斯洛伐克。

如果您位于上述国家/地区，现在可以直接在控制台中让 Gemini 提供数据分析，以便更好地了解错误和警告。

Gemini 针对控制台中的错误提供的分析洞见。

性能面板更新

此更新对效果面板进行了一些改进。

增强型网络轨道

性能面板中的网络轨道已得到增强，可预先显示关键信息，例如更详细的持续时间和网络发起方树，并更清晰地显示视觉提示和颜色。因此，您不必再在网络面板和性能 > 摘要标签页之间切换。此外，如果您仍需切换到网络面板，我们已让您能够更轻松快捷地完成此操作。

网络轨道现在会执行以下操作：

  • 显示请求类型的颜色图例。
  • 在右上角用红色三角形标记会阻塞渲染的请求。
  • 选择后，系统会使用箭头显示请求发起者。这有助于您了解之前仅在网络面板中提供的网络发起者树。
  • 现在，当您将鼠标悬停在任务上时，重新设计的提示会显示结构化的时间信息，包括渲染阻塞状态和优先级变化（如有）。
  • 摘要标签页现在还会在右侧的列中显示时间安排细分。

“摘要”标签页中包含增强的网络轨迹，其中显示了颜色图例、提示、渲染阻塞指示器和时间。

此外，您现在可以右键点击轨道中的请求或摘要标签页中的相应网址，然后从下拉菜单中选择 Reveal in Network panel。开发者工具会将您带到网络面板，并在表格中突出显示您要查找的请求。

包含“在‘网络’面板中显示”选项的请求的右键点击菜单。

使用可扩展性 API 自定义效果数据

此版本为效果面板带来了对扩展数据源的支持。您现在可以向性能轨迹添加包含事件和工具提示说明的自定义轨道，向摘要标签页添加详细信息，以及执行更多操作。对于框架、库和具有自定义插桩的复杂应用的开发者，此功能可能非常有用。

如需查看自定义轨道的示例，请访问此演示页面。在效果 > 捕获设置中，开启 扩展程序数据。开始录制性能，点击演示页面上的 Add new Corgi，然后停止录制。您会在轨迹的摘要标签页中看到一个自定义轨道，其中包含带有自定义工具提示和详细信息的事件。

“性能”面板中的自定义轨道。

简而言之，如需扩展效果数据，请将特定结构传递给 performance.measure() 或 performance.mark() API 调用的 measureOption.detail 或 markOption.detail 参数。

“时间”轨道中的详细信息

如果您是使用 Performance API 的 User Timing 部分将条目添加到 Timings 轨道中的 Web 开发者，现在可以在 Summary 标签页中查看 mark 和 measure 事件及其时间戳的任意详细信息。

“时间”轨道中包含时间戳和详细信息的自定义事件。

Chromium 问题：345418915。

复制“网络”面板中列出的所有请求

现在，您无需复制整个网络日志，只需在网络面板中应用过滤条件，然后复制列出的请求即可。

仅针对列出的请求复制选项。

通过命名 HTML 标记和减少杂乱信息来更快地获取堆快照

内存面板中的堆快照速度更快，现在按命名的 HTML 标记对对象进行分组，通过显示更少的内部对象来更好地匹配 JavaScript 语言语义，并且始终包含数值。

按命名的 HTML 标记分组的对象。

在捕获中包含数值设置的性能已得到提升，默认处于开启状态，并已从内存面板中移除。

如需手动将内部对象纳入快照，请先依次开启 Settings > Experiments > Show option to expose internals in heap snapshots，然后在内存面板中开启 Expose internals (...)。

Chromium 问题：41490040、343341610、42203857。

打开“动画”面板，以捕获动画并实时编辑 @keyframes

动画面板现在可以执行以下操作：

  • 捕获您打开面板时已在进行中的动画，因此您无需刷新页面即可捕获动画。
  • 支持对 @keyframes 进行实时编辑。换句话说，当您在元素 > 样式中修改 @keyframes 部分时，系统会更新捕获的动画。

在以下视频中观看这两项功能的实际应用。

Chromium 问题：352718055。

Lighthouse 12.1.0

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

本次更新带来了多项变更，包括移除旧的“首次有效绘制时间”(FMP) 指标，改用 Largest Contentful Paint (LCP)。请参阅完整的变更列表。

如需了解有关在开发者工具中使用 Lighthouse 面板的基础知识，请参阅 Lighthouse：优化网站速度。

Chromium 问题：772558。

无障碍

此版本在无障碍功能方面做出了以下改进：

  • 在实时表达式的编辑字段中自动完成输入后，按 Tab 键会将焦点移至下一个焦点位置。以前，它会缩进文本。
  • 点击调整大小器会将其设为焦点，以便您可以使用向右和向左箭头键移动它。
  • 现在，屏幕阅读器会在来源中播报添加监视表达式编辑字段，并且在使用键盘进行导航时，删除监视表达式现在清晰可见。

Chromium 问题：349939551、343942719、349334243、349428374。

其他亮点

此版本包含以下值得注意的修复和改进：

  • 效果：
    • 网络轨道：添加了 WebSocket 连接事件 331351979。
    • 性能面板现在可以正确放大最繁忙的主线程活动 345599356。
    • 修复了上传错误轨迹文件类型的 bug，现在可防止上传除正确的 .json 或 .gz 之外的任何类型 349864878。
  • 元素 > 样式：
    • 长度属性值中的单位下拉菜单现已弃用 41495618。
    • 修复了为嵌套的 at 规则解析有效属性的问题 346732737。
    • 不活跃的 @position-try 部分现在显示为灰色 40246493。
  • 应用：
    • Cookie：修复了点击刷新后 Cookie 不会刷新的 bug 348683488。
    • 本地存储：您现在可以按键的字母顺序进行排序 341129585。

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

开发者工具的新变化

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