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

Sofia Emelianova
Sofia Emelianova

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

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

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

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

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

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

性能面板更新

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

增强型网络跟踪

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Chromium 问题:345418915

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

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

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

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

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

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

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

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

Chromium 问题:4149004034334161042203857

打开“动画”面板以拍摄动画并实时修改“@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 问题:349939551343942719349334243349428374

其他亮点

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

  • 性能: <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 视频发表评论。

开发者工具的新变化

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