Chrome 130 开发者工具的新变化

Sofia Emelianova
Sofia Emelianova
GitHub

“网络”面板的改进

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

重新构想的网络过滤条件

网络面板新增了根据您的反馈重新设计的过滤器。特定类型的过滤条件保持不变，即一个简洁的多选栏中的一组徽章。

为了简化界面，与隐藏、屏蔽和第三方相关的复选框移到了下拉列表中。该列表会显示一个数字，用于告知您下拉菜单中有多少个过滤条件处于选中状态。

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

如需恢复旧版过滤条件设计，请依次清除 Settings > Experiments > Redesign of the filter bar in the Network panel。

欢迎分享您对全新设计的看法。

Chromium 问题：362672528。

HAR 导出功能现在默认排除敏感数据

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

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

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

Chromium 问题：361717594。

“元素”面板改进

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

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

样式标签页中的自动补全功能现在会针对以下 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] 中提取），然后展开每个指标卡片中的考虑本地测试条件部分（如有），并在环境设置中展开考虑真实用户环境。

扩展了包含建议的部分。

按照建议大致了解用户的体验。

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

改进了“内存”面板

此版本对内存面板进行了一些改进。

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

内存面板新增了一种分析类型：分离的元素。它会显示由 JavaScript 引用保留的对象。

向“内存”面板添加“分离的元素”分析类型之前和之后。

Chromium 问题：350519222。

改进了纯 JS 对象的命名

为了整理和清理堆快照中的 Object 类别，现在：

  • 根据其中包含的属性命名，例如 {firstProperty, secondProperty, ..., *nthProperty}。
  • 可通过 DevTools 构建的这些名称进行搜索。
  • 如果具有相同的属性，则归为一组。

在堆快照中整理“对象”类别之前和之后。

Chromium 问题：350519222。

关闭动态主题

现在，您可以停用开发者工具颜色与 Chrome 中的自定义主题颜色之间的自动匹配。

如需关闭动态主题，请依次前往 Settings > Preferences > Appearance，清除 Match Chrome color scheme，然后重新加载开发者工具。

关闭动态主题功能前后的对比图。

Chromium 问题：328472696。

Chrome 实验：进程共享

通常，当您打开同一网站（例如 Google 文档）的多个标签页时，Chrome 会为每个标签页创建一个单独的渲染器进程。进程共享实验通过允许多个标签页共享同一渲染器进程来改进此问题，从而提升性能。

如果开发者工具处于打开状态时，您看到一条信息栏消息，指出“此标签页与其他标签页共享资源…”，则表示您是启用了进程共享实验的小组中的一员。

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

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

Lighthouse 12.2.1

Lighthouse 面板现在运行的是 Lighthouse 12.2.1。

此更新针对资源压缩建议引入了 < 20 KB 忽略阈值，以帮助您仅关注有意义的文件大小节省。请参阅完整的变更列表。

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

Chromium 问题：772558。

其他亮点

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

  • 元素：
  • 控制台：修复了 c网址 命令中多行字符串中未转义的 & 符号 (352651673)。
  • 内存：修复了具有 Service Worker 的页面上的默认选择，现在选择的是主线程 (40669896)。
  • 安全性：网址方案突出显示功能现在可以随着来源的安全阶段发生变化而正确更新 (359920086)。

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

开发者工具的新变化

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