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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

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

性能面板更新

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

增强型网络跟踪

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

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

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

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

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

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

利用可扩展性 API 自定义性能数据

此版本在性能面板中提供了对扩展程序数据的支持。您现在可以向效果跟踪记录添加包含事件和提示说明的自定义轨道，并将详细信息添加到摘要标签页，以及执行其他操作。此功能对于具有自定义插桩的框架、库和复杂应用的开发者来说可能很有用。

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

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

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

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

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

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

Chromium 问题：345418915。

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

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

仅适用于所列请求的复制选项。

通过已命名的 HTML 标记加快堆快照的速度，减少杂乱

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

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

check_box 在捕获中包括数值设置的性能已得到加速，默认情况下处于启用状态，并从内存面板中移除。

如需在快照中手动添加内部对象，请先开启设置 设置 >实验 >check_box 显示用于在堆快照中公开内部项的选项，然后在 Memory 面板中开启 check_box 公开内部项 (...)。

Chromium 问题：41490040、343341610、42203857。

打开“动画”面板以拍摄动画并实时修改“@keyframes”

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

  • 当您打开面板时捕获动画，因此您无需刷新页面即可捕获动画。
  • 支持实时编辑@keyframes。换言之，在修改 Elements 中的 @keyframes 部分时，系统会更新捕获的动画 >样式。

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

Chromium 问题：352718055。

Lighthouse 12.1.0

Lighthouse 面板现在运行 Lighthouse 12.1.0。

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

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

Chromium 问题：772558。

无障碍

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

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

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

其他亮点

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

  • 性能： <ph type="x-smartling-placeholder">
      </ph>
    • 网络轨道：添加了 WebSocket 连接事件 331351979。
    • Performance 面板现在可以正确放大最繁忙的主线程 activity 345599356。
    • 修复了与上传错误的轨迹文件类型有关的 bug，它现在会阻止上传除正确的 .json 或 .gz 349864878 外的任何类型。
  • 元素 >样式： <ph type="x-smartling-placeholder">
      </ph>
    • 长度属性值的单位下拉菜单现已弃用 41495618。
    • 修复了解析嵌套 at-rules 346732737 的活动属性。
    • 无效 @position-try 部分现在显示为灰色 40246493。
  • 应用： <ph type="x-smartling-placeholder">
      </ph>
    • Cookie：修复了点击刷新按钮 348683488 后无法刷新 Cookie 的错误。
    • 本地存储空间：您现在可以按键的字母顺序 (341129585) 进行排序。

下载预览渠道

请考虑将 Chrome Canary、开发者版或 Beta 版用作您的默认开发浏览器。通过这些预览渠道，您可以访问最新的开发者工具功能，测试先进的网络平台 API，并在用户之前发现您网站上的问题！

与 Chrome 开发者工具团队联系

使用以下选项讨论博文中的新功能和变更，或与开发者工具相关的任何其他内容。

  • 请通过 crbug.com 提交建议或反馈。
  • 使用更多选项报告开发者工具问题 展开 >帮助 >在开发者工具中报告开发者工具问题。
  • 请发送电子邮件至 @ChromeDevTools。
  • 请对我们的开发者工具新功能 YouTube 视频或开发者工具提示 YouTube 视频发表评论。

开发者工具的新变化

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