Chrome 134 开发者工具的新变化

Sofia Emelianova

“隐私和安全”面板

旧的安全性面板已演变为隐私设置和安全性面板，并新增了专门用于隐私设置的部分。在此部分中，您可以：

• 在开发者工具处于打开状态时，暂时限制第三方 Cookie（可设置例外情况），并测试网站的行为。
• 查看包含第三方 Cookie 相关信息的表格，包括临时限制模式是否屏蔽或豁免了这些 Cookie，以及哪些类型的 Cookie 可能会受到影响。

Chromium 问题：352364594。

改进了“效果”面板

此版本对性能面板进行了一些改进。

校准后的 CPU 节流预设

现在，您可以自动校准并获得两个额外的 CPU 节流预设，这两个预设可以更准确地近似模拟低端和中端移动设备。

在性能 > CPU 节流下拉菜单中，选择校准…，然后在设置中，依次点击校准和继续，并等待开发者工具计算设备的减速率。您可以在性能 > CPU 降频下拉菜单中找到校准后的降频选项。

在同一 AI 对话中选择不同的效果事件

借助 AI 辅助面板，您现在可以在同一聊天会话中更改性能轨迹中选定的事件。换句话说，您无需发起新对话即可讨论其他赛事。

效果报告中的第一方和第三方突出显示

效果面板的摘要标签页中新增了一个表格，可用于区分第一方数据、第三方数据和扩展程序数据。

将光标悬停在表格中的条目上，即可在性能轨迹中看到突出显示的相应事件。选中使第三方变暗，以便仅关注第一方数据。

此外，点击表格中突出显示的条目旁边的 account_tree 图标，即可前往按第三方分组的自下而上标签页。

标记工具提示和数据洞见中的实地数据

如果您已开启实地数据，现在可以在指标标记提示工具和数据分析标签页中查看实地数据。

Chromium 问题：368135130。

“强制自动重排”分析

效果 > 数据洞见标签页中新增了一项数据洞见：强制重排。当渲染引擎暂停脚本执行以计算样式和布局时，会发生强制重排。强制重排可能会成为您想要避免的瓶颈。

当您将光标悬停在新洞见上时，系统会突出显示强制重排的顶级函数调用及其堆栈轨迹，并显示总重排时间。

Chromium 问题：369766156。

“优化 DOM 大小”数据洞见

另一项新洞见是优化 DOM 大小。大型 DOM 树可能会降低网页性能。

该数据洞见会突出显示性能轨迹中受大型 DOM 大小影响的长时间布局自动重排和样式重新计算，并提供有关元素总数、深度和子元素最多的统计信息。

使用 console.timeStamp 扩展性能轨迹

可扩展性 API 现在支持 console.timeStamp。除了 performance.measure 和 performance.mark 之外，您现在还可以在性能轨迹中创建自定义轨道，并使用 console.timeStamp 捕获自定义标记。console.timeStamp 是一种更轻便的替代方案，不会向浏览器的内部性能时间轴添加条目，而只会将它们显示在性能轨迹中。

例如，您可以使用以下语法：

console.timeStamp("Start");
// Some time later ...
console.timeStamp("End");
// Some time later ...
console.timeStamp("Measure 1", "Start", "End", "Track 1");
// Some time later ...
console.timeStamp("Measure 2", "Start", undefined, "Track 1");

在捕获设置中，选中 check_box 显示自定义轨迹后，您将在轨迹中看到自定义轨迹：

“元素”面板改进

此版本对元素面板进行了一些改进。

动画样式的实时值

“元素”>“样式”标签页现在可以实时更新动画样式的数值。

支持 :open 伪类和各种伪元素

“元素”面板现在支持在“样式”>“:hov”>“强制特定元素状态”部分中为某些 HTML 元素（例如 <details>、<select>、<dialog> 和 <input>）使用 :open 伪类。

此外，“元素”面板现在还支持几个新的伪元素：::checkmark、::picker-icon 以及与轮播界面相关的 ::column、::scroll-button、::scroll-marker 和 ::scroll-marker-group。

Chromium 问题：383157184、379805728。

复制所有控制台消息

您现在可以一次性右键点击复制所有控制台消息。

此外，您还可以在网络 > 请求载荷的上下文菜单中找到类似的复制选项。

Chromium 问题：40206460、384967020。

“内存”面板中的字节单位

内存面板现在会显示采用适当字节单位的大小，而不是大量的字节数。

Chromium 问题：388589515。

其他亮点

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

• 效果：
  • 注释：您现在可以点击标签来选择相应的条目 (crbug.com/388224764)。
  • 数据分析：现在，点击数据分析标签页中的 CLS 会选择最糟糕的集群，而不是最糟糕的偏移。
• 忽略列表：以 node: 开头的节点内部结构现在默认会被忽略 (crbug.com/382453615)。
• 实时表达式：修复了导致实时表达式影响 $_ 命令的 bug (crbug.com/388437265)。
• 元素 > 样式：相对长度现在有一个显示绝对值的弹出式窗口 (crbug.com/40778486)。
• 无障碍功能：列标题现在会播报是否可排序。
• 标签页图标现在位于标签页名称右侧，而不是左侧。

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

• 请前往 crbug.com 向我们提交反馈和功能请求。
• 在开发者工具中，依次点击 more_vert 更多选项 > 帮助 > 报告 DevTools 问题，报告开发者工具问题。
• 在 Twitter 上向 @ChromeDevTools 发送推文。
• 在 DevTools 新变化 YouTube 视频或 DevTools 提示 YouTube 视频中发表评论。

开发者工具的新变化

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