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

Sofia Emelianova
Sofia Emelianova
GitHub

Gemini 提供的控制台数据洞见即将在大多数欧洲国家/地区推出

此版本为大多数欧洲国家/地区提供了 Gemini 提供的管理中心数据分析支持。

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

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

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

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

性能面板更新

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

增强型网络跟踪

效果面板中的网络轨道经过改进，可以预先显示关键信息（例如更详细的时长和网络发起程序树），并且提供更清晰的视觉提示和颜色。因此，您无需再在 Network 面板和 Performance > Summary 标签页之间切换。此外，如果您仍然需要切换到网络面板，我们已为您提供了一种更简便、更快捷的方式。

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

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

“摘要”标签页中的增强型网络轨道，带有颜色图例、提示、阻塞渲染的指示器和显示时间。

此外，您现在可以在摘要标签页中右键点击轨道中的相应请求或其网址，然后从下拉菜单中选择在“网络”面板中显示。开发者工具会将您转到 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。换言之，当您在 Elements > Styles 中修改 @keyframes 部分时，系统会更新捕获的动画。

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

Chromium 问题：352718055。

Lighthouse 12.1.0

Lighthouse 面板现在运行 Lighthouse 12.1.0。

此次更新进行了多项更改，包括移除了旧的 First Meaningful Paint (FMP) 指标，取而代之的是 Largest Contentful Paint (LCP)。请参阅完整的更改列表。

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

Chromium 问题：772558。

无障碍

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

  • 在实时表达式的修改字段中执行自动补全操作后按 Tab 键可将焦点移至下一个焦点。以前，它会缩进文本。
  • 点击大小调整工具会将焦点移至该工具，以便您使用向右键和向左键移动它。
  • 现在，屏幕阅读器会读出 Sources 中的 Add watch 表达式（添加监视表达式）修改字段，并且现在，使用键盘导航时，Delete watchexpression 会清晰地显示。

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 新变化系列中涵盖的所有内容的列表。