Chrome 130 开发者工具的新变化

Sofia Emelianova
Sofia Emelianova

改进了“网络”面板

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

全新的网络过滤器

Network 面板添加了新的过滤条件,并根据您的反馈重新构思了内容。针对具体类型的过滤条件保持不变,即在一个简洁的多选栏中显示一组标志。

为简化界面,我们将与隐藏、屏蔽和第三方相关的复选框移到了下拉列表下方。列表中有一个数字,用于指示下拉菜单下有多少个已选过滤条件。

将与隐藏、屏蔽和第三方相关的过滤条件移至下拉菜单下之前和之后。

如需恢复旧版过滤器设计,请依次前往 设置 > 实验 > 重新设计了“网络”面板中的过滤器栏,然后清除该复选框。

欢迎告诉我们您对全新设计的看法

Chromium 问题:362672528

HAR 导出内容现在默认会排除敏感数据

为降低敏感信息意外泄露的几率,默认情况下,以 HAR 格式导出的网络日志将不再包含 CookieSet-CookieAuthorization 标头。

如要以包含敏感数据的 HAR 格式导出日志,请依次开启 设置 > 偏好设置 > 网络 > 允许生成包含敏感数据的 HAR网络面板会用箭头标记 导出按钮。长按该按钮,然后从下拉菜单中选择导出 HAR(包含敏感数据)

在向 HAR 导出中添加包含和不含敏感数据的导出选项之前和之后。

Chromium 问题:361717594

元素面板改进

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

text-emphasis-* 属性的自动补全值

现在,Styles 标签页中的自动补全功能会针对以下 CSS 属性提供值建议:

为“text-emphasis-*”属性添加自动补全选项前后。

Chromium 问题:361471205

滚动超出边界会显示标记

元素面板现在会使用新的“滚动”标记标记包含溢出内容且具有 overflow: scrolloverflow: auto 的元素,以便您轻松发现滚动溢出。与其他标志一样,此标志可反映当前 DOM,并且如果内容因大小变化等原因而停止溢出,此标志就会消失。

使用标记标记滚动超出内容之前和之后。

Chromium 问题:40670442

嵌套规则之后的裸声明不会“上移”

根据 CSS 工作组的决定允许在嵌套规则之后出现裸声明,因此,样式标签页现在不会在解析过程中将这些声明“上移”。

在以下代码示例中,嵌套规则后面的裸声明现在不会导致 Chrome 对级联中的样式进行意外重新排序:

p {
  width: 100px;
  height: 100px;
  @media screen {
    background-color: red;
  }

  background-color: green;
}

允许裸声明位于嵌套规则之后之前和之后。

Chromium 问题:358119261

性能面板改进

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

实时指标中的建议

实际指标现在可以提供特定于指标的建议,帮助您尽可能接近用户体验来配置开发环境。

如需获取建议,请从 Chrome 用户体验报告 (CrUX) 设置现场数据提取,然后展开每个指标卡片中的考虑本地测试条件部分(如有),并在环境设置中展开考虑真实的用户环境

展开的部分包含建议。

遵循建议来大致估算用户的体验。

现在,您可以在性能记录的时间轴中浏览面包屑导航:在面包屑导航之间来回“跳转”,覆盖子面包屑导航,以及移除多个子面包屑导航。以前,当您选择父级面包屑导航时,其子级会消失。

内存面板改进

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

新的“已分离的元素”配置文件

内存面板新增了分离元素这一配置文件类型。它会显示由 JavaScript 引用保留的对象。

将“已分离元素”配置文件类型添加到“内存”面板之前和之后。

Chromium 问题:350519222

改进了普通 JS 对象的命名

为了整理和清理堆快照中的 Object 类别,现在的普通 JavaScript 对象如下所示:

  • 基于其包含的属性进行命名,例如 {firstProperty, secondProperty, ..., *nthProperty}
  • 可通过开发者工具构造的这些名称进行搜索。
  • 如果具有相同的属性,则会归为一组。

整理堆快照中的对象类别之前和之后。

Chromium 问题:350519222

关闭动态主题

您现在可以关闭开发者工具颜色与 Chrome 中的自定义主题颜色的自动匹配功能。

如需关闭动态主题,请清除 设置 > 偏好设置 > 外观 > 匹配 Chrome 配色方案,然后重新加载开发者工具。

关闭动态主题设置前后。

Chromium 问题:328472696

Chrome 实验:进程共享

通常,当您从同一个网站(如 Google 文档)中打开多个标签页时,Chrome 会为每个标签页分别创建一个单独的渲染程序进程。进程共享实验通过允许多个标签页共享相同的渲染程序来改善性能,从而改变了这一点。

在开发者工具打开时,如果您看到“此标签页与其他标签页共享资源...”信息栏的消息,则表示您属于该小群组,并且启用了进程共享实验。

“此标签页会与其他标签页共享资源...”信息栏。

进程共享可能会影响断点调试和性能分析。如需了解详情,请参阅 Chrome 实验:进程共享

Lighthouse 12.2.1

Lighthouse 面板现在运行 Lighthouse 12.2.1。

此次更新针对资源压缩建议引入了 < 20 KB 忽略阈值,以便您仅专注于有意义的文件大小缩减。请参阅完整的更改列表

如需了解如何在 DevTools 中使用 Lighthouse 面板的基础知识,请参阅 Lighthouse:优化网站速度

Chromium 问题:772558

其他亮点

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

  • 元素
  • 控制台:修复了 cURL 命令中多行字符串中的非转义 ampersand (352651673)。
  • 内存:修复了包含 Service Worker 的页面上的默认选择,现在会选择主线程 (40669896)。
  • 安全:现在,随着来源的安全阶段发生变化,网址架构突出显示会正确更新(359920086)。

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

开发者工具的新变化

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