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

Sofia Emelianova
Sofia Emelianova
GitHub

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

此版本在大多数欧洲国家/地区推出了 Gemini 的控制台数据分析功能。

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

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

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

Gemini 针对控制台中错误提供的数据分析。

性能面板更新

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

增强型网络轨道

效果面板中的网络轨道已得到增强，可提前显示关键信息（例如更详细的时长和网络发起者树），并更清晰地显示视觉提示和颜色。这样，您就不必再在广告网络面板和效果 > 摘要标签页之间切换了。此外，如果您仍需要切换到广告资源网面板，我们已简化了切换流程，让您可以更轻松、更快捷地切换。

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

  • 显示请求类型的颜色图例。
  • 在右上角用红色三角形标记会阻塞渲染的请求。
  • 选择后，系统会显示请求发起者，并用箭头标记。这有助于您了解网络发起者的树状结构，该结构之前仅在网络面板中提供。
  • 经过改进的提示现在会在用户悬停时显示结构化的时间信息，包括渲染阻塞状态和优先级更改（如果有）。
  • 摘要标签页现在还会在右侧的列中显示时间细分。

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

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

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

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

此版本为效果面板引入了对扩展程序数据的支持。现在，您可以向性能轨迹添加包含事件和提示说明的自定义轨道，向摘要标签页添加详细信息，等等。对于使用自定义插桩的框架、库和复杂应用的开发者，此功能可能很有用。

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

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

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

时间轨道的详细信息

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

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

Chromium 问题：345418915。

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

现在，您可以在网络面板中应用过滤条件，仅复制所列请求，而无需复制整个网络日志。

仅针对所列请求复制选项。

堆快照更快，使用了命名 HTML 标记，杂乱程度更低

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

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

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

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

Chromium 问题：41490040、343341610、42203857。

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

Animations 面板现在会执行以下操作：

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

请观看以下视频，了解这两项功能的实际运作方式。

Chromium 问题：352718055。

Lighthouse 12.1.0

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

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

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

Chromium 问题：772558。

无障碍

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

  • 在实时表达式的编辑字段中自动补全后，按 Tab 键可将焦点移至下一个焦点。以前，它会缩进文本。
  • 点击大小调整工具会将焦点移至该工具，以便您使用向右键和向左键移动它。
  • 屏幕阅读器现在会读出来源中的添加监控表达式编辑字段，并且现在使用键盘导航时，删除监控表达式会清晰显示。

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

其他亮点

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

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

下载预览渠道

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

与 Chrome DevTools 团队联系

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

开发者工具的新变化

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