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

Sofia Emelianova
Sofia Emelianova
GitHub

使用 Gemini 调试 CSS

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

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

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

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

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

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

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

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

您现在可以在一个位置集中管理所有 AI 功能：依次点击新的 设置 > AI 创新标签页。该指南列出了重要注意事项，介绍了 AI 功能，并允许您单独启用和停用这些功能。

新的 AI 创新标签页。

如需了解详情，请参阅设置 > AI 创新。

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

开发者工具不再需要为 AI 功能启用设置同步。因此，只需点击一下，即可使用之前发布的管理中心数据分析以及 AI 协助设置样式。

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

性能面板改进

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

注释和共享性能发现结果

Performance 面板的左侧可展开边栏中新增了 Annotations 标签页，简化了在分享性能发现结果时创建备注以供轨迹探索和协作的流程。

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

左侧边栏中的新注释标签页以及已添加注释的事件、范围和连接。

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

您现在可以在效果面板左侧边栏的新数据分析标签页中发现富有实用价值的分析洞见。这些数据分析是从 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 网页启用审核前后的效果。

无障碍

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

  • 在来源 > 编辑器中，现在可以将焦点移到 X 按钮并按 Enter 键或空格键，关闭包含打开文件的标签页。
  • 在性能中，您现在可以选择跟踪记录中的某个条目，然后按空格键打开上下文菜单。
  • 在效果中，左侧边栏中的数据分析标签页可通过键盘访问，并且可以“按标签页切换”。

Chromium 问题：372411090。

其他亮点

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

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

下载预览渠道

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

与 Chrome DevTools 团队联系

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

开发者工具的新变化

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