当前位置：首页 > news >正文

Chrome 134 版本开发者工具（DevTools）更新内容

news 来源：原创 2025/7/25 21:48:07

Chrome 134 版本开发者工具（DevTools）更新内容

一、隐私与安全面板

旧的 Security 面板已演变为隐私与安全面板，并新增了一个专注于隐私的部分。在该部分中，可以：

在 DevTools 打开时，临时限制第三方 Cookie（可带或不带例外），并测试网站在此情况下的表现。
查看一张表格，其中包含有关第三方 Cookie 的信息，包括它们是否被临时限制模式拦截或豁免，以及可能受影响的 Cookie 类型。

二、Performance 面板改进

此版本为 Performance 面板带来了一系列改进。

1. 校准后的 CPU 限流预设

支持自动校准，并获得两个额外的 CPU 限流预设，这些预设能更准确地模拟低端和中端移动设备。

在 Performance > CPU throttling 下拉菜单中，选择 Calibrate…；然后在 Settings 中点击 Calibrate, Continue，等待 DevTools 为设备计算降速率。校准后的限流选项将出现在 Performance > CPU throttling 下拉菜单中。

2. 在同一个 AI 聊天中选择不同的性能事件

AI 助手面板允许在同一个聊天中切换性能跟踪中选定的事件。换句话说，无需开启新的聊天即可讨论不同的事件。

3. Performance 中的第一方和第三方高亮

Performance 面板在 Summary 选项卡新增了一张表格，能够区分第一方、第三方以及扩展数据。

将鼠标悬停在表格中的条目上，可以在性能跟踪中看到相应的事件被高亮显示。选中 “Dim 3rd parties” 以仅聚焦第一方数据。

此外，点击表格中高亮条目旁的 account_tree 图标，即可切换到以第三方分组显示的 Bottom-up 选项卡。

4. 标记工具提示和洞察中的字段数据

如果已启用字段数据，可以在指标标记工具提示和 Insights 选项卡中查看到它。

5. “Forced reflow” 洞察

Performance > Insights 选项卡新增了一项洞察：Forced reflow。Forced reflow 发生在渲染引擎暂停脚本执行以计算样式和布局时。Forced reflow 可能成为避免的瓶颈。

当将鼠标悬停在这项新洞察上时，它会高亮显示触发 Forced reflow 的顶级函数调用、其堆栈跟踪，并显示总的 reflow 时间。

6. “Optimize DOM size” 洞察

另一项新洞察是 Optimize DOM size。庞大的 DOM 树可能会降低页面性能。

该洞察在性能跟踪中高亮显示了因 DOM 尺寸过大而导致的长时间布局重排和样式重计算，并提供了关于元素总数、层级深度以及子元素最多的统计数据。

7. 使用 console.timeStamp 扩展性能跟踪

扩展性 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");

在 Capture settings > Show custom tracks 选项中勾选后，将在跟踪记录中看到自定义轨道。

三、Elements 面板改进

本版本为 Elements 面板带来了一系列改进。

1. 动画样式的实时数值

Elements > Styles 选项卡会实时更新动画样式的数值。

2. 支持 :open 伪类及各种伪元素

Elements 面板在 Styles > :hov > Force specific element state 部分支持某些 HTML 元素（如 details、select、dialog 和 input）的 :open 伪类。

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

四、复制所有控制台消息

可以通过右键一次性复制所有控制台消息。

另外，在 Network > Request Payload 的上下文菜单中也提供了类似的复制选项。

五、内存（Memory）面板中的字节单位

内存面板会以合适的字节单位显示大小，而不再仅仅显示大量的字节数字。

六、其他

Performance：
- Annotations： 可以点击标签来选择对应的条目
- Insights： 在 Insights 选项卡中，点击 CLS 会选择最差的聚类，而非最差的偏移
Ignore list： 默认情况下，所有以 “node:” 开头的 Node 内部项现已被忽略
Live expressions： 修复了一个导致 live expression 影响 $_ 命令的 bug
**Elements > Styles：**相对长度带有一个弹出窗口，显示其绝对值
**Accessibility：**列标题会提示是否可排序
标签图标显示在标签名称右侧，而非左侧

Chrome 134

Privacy and security panel
Performance improvements
Calibrated CPU throttling presets
Select different performance events in the same AI chat
First- and third-party highlighting in Performance
Field data in marker tooltips and insights
Forced reflow insight
‘Optimize DOM size’ insight
Extend the performance trace with console.timeStamp
Elements panel improvements
Real-time values of animated styles
Support for :open pseudo-class and various pseudo-elements
Copy all console messages
Byte units in the Memory panel
Miscellaneous highlights

引用

What’s new in DevTools