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

使用 Gemini 调试 CSS

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

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

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

如需详细了解如何充分利用新面板，请参阅使用开发者工具 AI 辅助功能的 5 个实用技巧，并查看用于设置样式的 AI 辅助功能。

DevTools 团队期待收到您的反馈。欢迎随时在 crbug.com/364805393 中提供反馈。

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

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

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

只需轻轻一点，即可获取控制台数据分析

开发者工具不再要求用户开启设置同步才能使用 AI 功能。因此，您只需点击一下，即可使用之前发布的控制台数据分析以及用于样式设置的 AI 辅助工具。

如果您已登录 Chrome，请前往设置 > AI 创新功能，开启这些功能，然后就可以开始使用了。

改进了“效果”面板

此版本对性能面板进行了一些改进。

添加注释并分享效果分析结果

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

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

直接在“效果”面板中获取效果分析

现在，您可以在性能面板左侧边栏中的新数据分析标签页中发现可据以采取行动的分析洞见。这些数据分析是从 Lighthouse 报告和即将弃用的性能数据分析面板中汇总而来的。

数据分析标签页旨在提供引导式分析，并围绕可能拖慢网站速度的性能问题建议可据以采取行动的分析洞见。如需利用分析洞见，请打开效果面板左侧边栏中的相应标签页，展开不同的类别，然后将鼠标悬停在相应项上并点击。性能面板会突出显示轨迹中的相应事件。

开发者工具团队期待您就以下方面提供反馈：洞见的实用性、改进方法，以及您将洞见与其他工具（例如 PageSpeed Insights 和 Lighthouse）搭配使用的体验。欢迎在 crbug.com/371170842 中留下您的反馈。

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

布局偏移轨迹焕然一新。现在，布局偏移会以（更显眼的）紫色菱形标记，并根据其在时间轴上的邻近程度分组。在摘要标签页中，您会看到一个包含时间、得分、元素和潜在原因的有序表格，其中列出了所有班次及其聚类。

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

Chromium 问题：369100729。

找出未合成的动画

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

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

如需了解详情，请参阅坚持使用仅限合成器的属性并管理图层数量。

Chromium 问题：41006273。

硬件并发移至传感器

硬件并发设置从性能面板移到了更合适的传感器面板。

Chromium 问题：371463665。

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

控制台中的堆栈轨迹现在可以正确检测、忽略、折叠来自忽略列表文件的帧，并在展开时将其灰显。之前，它不会在展开的轨迹中将函数名称灰显。

您还可以启用新的设置，方法是依次前往设置 > 忽略列表 > check_box 来自 eval 或控制台的匿名脚本，以将开发者工具设置为忽略没有源网址的匿名脚本。

此外，当您右键点击并选择另存为...控制台日志时，系统不会保存显示更多/更少文本。

Chromium 问题：40279542、40945570、345248263。

元素 > 样式：支持网格叠加层和 CSS 范围关键字的 sideways-* 书写模式

元素 > 样式标签页现在支持以下功能：

• 视口中的网格叠加层现在会显示 sideways-rl 和 sideways-lr 书写模式的网格。
• 解析 CSS 通用关键字。实际上，这意味着，例如，如果 inherit 是一种颜色，则样式标签页会在旁边显示一个颜色选择器。

Chromium 问题：40280717、40706051、40501131。

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

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

无障碍

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

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

Chromium 问题：372411090。

其他亮点

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

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

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

• 请前往 crbug.com 向我们提交反馈和功能请求。
• 在开发者工具中，依次选择 more_vert 更多选项 > 帮助 > 报告 DevTools 问题，以报告 DevTools 问题。
• 在 Twitter 上向 @ChromeDevTools 发送推文。
• 在 DevTools 新变化 YouTube 视频或 DevTools 提示 YouTube 视频中发表评论。

开发者工具的新变化

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