Chrome 130 开发者工具的新变化

Sofia Emelianova
Sofia Emelianova
GitHub

“网络”面板改进

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

重新定义网络过滤器

广告联盟面板新增了一些过滤条件，这些过滤条件是根据您的反馈重新设计的。特定于类型的过滤条件保持不变，即在简洁的多选栏中显示一组标记。

为了简化界面，我们将与隐藏、屏蔽和第三方相关的复选框移到了下拉列表下方。该列表包含一个数字，表示下拉菜单下已选中的过滤条件数量。

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

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

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

Chromium 问题：362672528。

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

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

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

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

Chromium 问题：361717594。

元素面板改进

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

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

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

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

Chromium 问题：361471205。

带有标志的滚动溢出

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

标记滚动前后会溢出相应标记。

Chromium 问题：40670442。

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

在 CSS 工作组决定允许裸声明位于嵌套规则之后后，样式标签页现在不会在解析过程中“上移”这些声明。

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

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

  background-color: green;
}

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

Chromium 问题：358119261。

改进了性能面板

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

实时指标中的建议

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

如需获取建议，请在 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 忽略阈值，可帮助您仅专注于可显著缩减文件大小的建议。请参阅完整的变更列表。

如需了解在开发者工具中使用 Lighthouse 面板的基础知识，请参阅 Lighthouse：优化网站速度。

Chromium 问题：772558。

其他亮点

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

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

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

开发者工具的新变化

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