Chrome 开发者工具 (Chrome 131) 的新变化

Sofia Emelianova
Sofia Emelianova
GitHub

使用 Gemini 调试 CSS

Chrome 开发者工具新增了实验性 AI 帮助面板，您可以在其中与 Gemini 聊天，并获得 CSS 调试方面的帮助。

立即试用！在元素面板中，右键点击某个元素，然后选择询问 AI，或点击该元素旁边的相应 按钮。开发者工具将打开新的AI 辅助面板。

“询问 AI”菜单选项和相应的按钮。

新面板会提示您开启相应设置。确保您符合要求，开启设置切换开关，然后返回AI 协助面板。它会将您选择的元素用作上下文。输入与该元素有关的问题。

新版 AI 助理面板正在回答问题。

如需详细了解如何最佳地使用新面板，请参阅 5 个利用 DevTools AI 协助功能可执行的酷炫操作，并查看用于样式的 AI 协助。

开发者工具团队期待收到您的反馈。您可以随时在 crbug.com/364805393 中留下反馈。

在专用设置标签页中控制 AI 功能

现在，您可以通过以下新位置集中管理所有 AI 功能： 设置 > AI 创新标签页。其中列出了重要注意事项，介绍了 AI 功能，并允许您单独开启和关闭这些功能。

新的 AI 创新标签页。

如需了解详情，请依次前往设置 > AI 创新。

只需轻轻一点，即可查看控制台数据分析

开发者工具不再需要为 AI 功能启用设置同步。这样一来，您只需点击一下，即可查看之前发布的控制台数据分析以及用于样式的 AI 助理。

如果您已登录 Chrome，请依次前往设置 > AI 创新，然后开启这些功能。

改进了性能面板

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

添加注释并分享效果数据

效果面板在左侧的可展边栏中新增了注释标签页，可简化创建注释的过程，以便在探索轨迹和分享效果数据时进行协作。

现在，您可以在轨迹上标记事件、用箭头连接事件，以及突出显示时间范围。然后，您可以保存、分享和将带注释的轨迹上传回性能面板。

左侧边栏中的新“注释”标签页，以及带有注释的事件、范围和关联。

直接在“性能”面板中获取性能数据分析

现在，您可以在效果面板左侧边栏中新增的数据分析标签页中，发现富有实用价值的数据分析。这些数据分析是从 Lighthouse 报告和性能数据分析面板（即将弃用）中汇总得出的。

数据分析标签页旨在提供引导式分析，并就可能导致网站运行缓慢的性能问题提供富有实用价值的分析洞见。如需使用数据分析，请在效果面板的左侧边栏中打开标签页，展开不同的类别，然后将鼠标悬停在相应项上并点击。性能面板会突出显示轨迹中的相应事件。

开发者工具团队期待您就数据分析的实用性、改进方法，以及与 PageSpeed Insights 和 Lighthouse 等其他工具搭配使用时的体验提供反馈。欢迎随时在 crbug.com/371170842 中留下您的反馈。

更轻松地发现过度布局偏移

布局转换轨道焕然一新。布局偏移现在用更醒目的紫色菱形标记，并且会根据时间轴上的距离分组。摘要标签页中会显示一个有序表格，其中包含时间、得分、元素和可能的罪魁祸首，供您查看班次及其集群。

更新“布局偏移”轨道和重新整理“摘要”标签页后的效果。

此外，实时指标视图会在互动标签页旁边获取包含得分和元素的布局偏移日志。

在将“布局偏移”日志添加到实时指标视图之前和之后。

Chromium 问题：369100729。

发现未合成的动画

动画轨道现在会显示有关未合成动画的实用信息：

  • 根据相应的 CSS 属性（如果有）为动画命名。
  • 在轨道中使用红色三角形标记未合成的动画。
  • 在摘要标签页中显示合成失败的原因。

轨道中命名动画之前和之后的效果，标记非复合动画，以及显示失败原因。

如需了解详情，请参阅坚持仅合成器的属性和管理层计数。

Chromium 问题：41006273。

硬件并发移至传感器

硬件并发设置已从性能面板移至更合适的位置：传感器面板。

将“硬件并发性”设置移至“传感器”面板之前和之后。

Chromium 问题：371463665。

忽略匿名脚本，并在堆栈轨迹中专注于您的代码

控制台中的堆栈轨迹现在可以正确检测、忽略、收起和灰显（如果已展开）来自列入忽略列表的文件的帧。以前，它不会在展开的轨迹中灰显函数名称。

您还可以开启新的 Settings > Ignore list > Anonymous scripts from eval or console，将 DevTools 设置为忽略没有来源网址的匿名脚本。

改进堆栈轨迹中的忽略列表前后。

此外，当您右键点击控制台日志并选择另存为时，系统不会保存展开/收起文本。

Chromium 问题：40279542、40945570、345248263。

元素 > 样式：支持为网格叠加层和 CSS 全局关键字使用 sideways-* 写入模式

元素 > 样式标签页现在支持以下操作：

  • 视口中的网格叠加层现在会显示 sideways-rl 和 sideways-lr 写入模式的网格。
  • 解析 CSS 全局关键字。实际上，这意味着，例如，如果 inherit 是颜色，则“样式”标签页旁边会显示颜色选择器。解析 CSS 全局关键字之前和之后。

Chromium 问题：40280717、40706051、40501131。

在时间跨度模式和快照模式下针对非 HTTP 网页的 Lighthouse 审核

Lighthouse 现在可以在时间范围和快照模式下为非 HTTP 网页生成报告。

在时间跨度模式和快照模式下，为非 HTTP 网页启用审核前后的效果。

无障碍

此版本在无障碍功能方面进行了以下改进：

  • 在 Sources（来源）> Editor（编辑器）中，现在可以通过将焦点置于 X 按钮并按 Enter 或 Space 来关闭包含打开的文件的标签页。
  • 现在，在性能中，您可以选择轨迹中的条目，然后按 Space 键打开上下文菜单。
  • 在效果中，左侧边栏中的数据分析标签页可通过键盘访问，并且可以“按标签页切换”。

Chromium 问题：372411090。

其他亮点

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

  • 节流设置现在会在效果和网络面板之间正确同步（370332090）。
  • 应用 > 后台服务 > 推测性加载 > 规则 现在有一个 {} 美化输出按钮，类似于 Sources > Editor (40279147)。
  • 实时表达式：选择自动补全选项后，按 Tab 键现在会退出编辑字段，而不是缩进文本 (349939551)。
  • 元素 > 样式：anchor() 和 anchor-size() 支持新的语法，您可以重新排列参数并省略 anchor-size() 方向 (343516786)。此外，修复了回退呈现 (365802559)。
  • 网络：修复了 GraphQL 预览 (369931288)。
  • 性能：现在，报告加载和处理轨迹的增量进度。
  • WebAuthn：现在会动态更新由 signal* 方法修改的凭据 (368467199)。
  • WebAssembly：控制台中现在会显示一条警告，告知您 WebAssembly 模块是否有多个调试符号可用，以及正在使用哪个符号 (40879198、369515221)。
  • 从呈现标签页 328487897 中移除了 Core Web Vitals 叠加层。
  • 生成式 AI 功能现在不需要同步 Chrome 设置。

下载预览渠道

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

与 Chrome DevTools 团队联系

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

开发者工具的新变化

DevTools 新变化系列中涵盖的所有内容的列表。