Chrome 134 开发者工具的新变化

Sofia Emelianova
Sofia Emelianova
GitHub

“隐私和安全”面板

旧版安全面板已演变为隐私和安全面板，并新增了一个专门的隐私设置部分。在本部分中，您可以：

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

在“安全”面板中添加“隐私”部分之前和之后。

Chromium 问题：352364594。

改进了效果面板

此版本对性能面板进行了多项改进。

校准后的 CPU 节流预设

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

在性能 > CPU 节流下拉菜单中，选择校准...，然后在设置中，依次点击校准和继续，并等待 DevTools 计算设备的运行缓慢率。您可以在 Performance（性能）> CPU throttling（CPU 节流）下拉菜单中找到已校准的节流选项。

添加节流校准前后。

在同一 AI 聊天中选择不同的效果事件

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

“效果”页面中突出显示第一方和第三方来源

Performance 面板的 Summary 标签页中新增了一个表格，可让您区分第一方数据、第三方数据和扩展程序数据。

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

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

标记提示和数据洞见中的字段数据

如果您已开启现场数据，现在可以在指标标记提示和数据分析标签页中看到这些数据。

在向标记提示和“数据洞见”标签页添加已提交的数据之前和之后。

Chromium 问题：368135130。

“强制自动重排”数据分析

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

当您将光标悬停在新的分析洞见上时，系统会突出显示发生强制重新流动的前 10 个函数调用及其堆栈轨迹，并显示总重新流动时间。

添加“强制重新流”数据分析前后。

Chromium 问题：369766156。

“优化 DOM 大小”数据分析

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

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

添加“优化 DOM 大小”数据分析前后。

使用 console.timeStamp 扩展性能轨迹

Extensibility API 现在支持 console.timeStamp。除了 performance.measure 和 performance.mark 之外，您现在还可以在性能轨迹中创建自定义轨道，并使用 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");

依次选择捕获设置 > 显示自定义轨迹，您将在轨迹中看到自定义轨迹：

添加 console.timeStamp 支持前后。

“元素”面板改进

此版本对元素面板进行了多项改进。

动画样式的实时值

元素 > 样式标签页现在会实时更新动画样式的值。

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

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

添加“: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 开发者工具团队联系

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

开发者工具的新变化

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