与 AI 助理聊天

DevTools 提供了一个 AI 辅助 面板，可帮助您通过与 AI 智能体聊天来了解您的网站并解决问题。

借助 AI 辅助 ，您可以调试网站的 样式、网络、性能和 来源。

如需在 AI 辅助 面板中与 Gemini 进行有效聊天，请了解如何打开面板、撰写提示和控制对话流程。

打开 AI 辅助面板

AI 辅助 面板会在抽屉式界面中打开。

如需打开该面板，请点击位于顶部主工具栏右侧全局入口点处的 AI 辅助 按钮。

开发者工具栏右上角的 AI 辅助按钮。

从面板中

您可以直接从 Elements、Network、Sources 或 Performance 面板中打开该面板，并选择对话上下文，具体方法如下：

  • 点击元素、网络请求、源文件或展开的性能数据分析旁边的 AI 辅助图标 借助 AI 进行调试 按钮。

    元素旁边的“使用 AI 进行调试”按钮。

  • 右键点击元素、请求、文件或跟踪记录条目，然后从 借助 AI 进行调试 上下文菜单中选择一个常用提示选项。

    元素上下文菜单中的“使用 AI 调试”选项。

从命令菜单中

如需从命令菜单中打开 AI 辅助 ，请键入 AI，然后运行 显示 AI 辅助 命令，该命令旁边有 抽屉式界面 徽章。

打开的命令菜单，其中“显示 AI 辅助”处于突出显示状态。

从“更多工具”菜单中

或者，在右上角，依次选择 更多选项 > 更多工具 > AI 辅助 。

打开的“更多工具”菜单。

提示

在开始新对话时，AI 辅助 会提供示例提示，帮助您快速入门。

AI 辅助面板中的常见提示。

点击任何提示，即可预先填充面板底部的提示输入字段。

或者，在输入字段中输入您自己的提示或问题。

如需发送提示，请按 Enter 键或点击输入字段右侧的箭头。

没有上下文的开放式提示

借助自由形式的聊天框，您可以提出更高级别的开放式问题，而无需提供先前的上下文。例如：

  • How to use DevTools to debug accessibility?

    AI 辅助 将首先运行 Lighthouse 无障碍功能审核，以便更好地回答您的提示。

  • What are the slowest network requests on this page?

    AI 辅助 将在 “网络”面板 中提供可疑请求的列表以及指向这些请求的链接，以便您点击选择请求作为对话上下文。

  • What performance issues exist on the page?

    AI 辅助 将自动使用您选择的设置记录性能跟踪记录，以回答此提示。

  • 诸如 How do I use the Animation panel? 或 Where is the high contrast setting in DevTools? 等提示将直接帮助您了解 DevTools 本身。

开始聊天后，AI 辅助 会在聊天内容为空时根据您的操作智能更新上下文，同时尊重您所做的手动选择。

包含上下文的提示

当您从面板中打开 AI 辅助 时，聊天框中会选择相应的对话上下文，以便您专门针对所选内容进行聊天。

已选择对话上下文。

您可以随时通过以下方式更改上下文：在 Elements 中选择元素，在 Network 中选择请求，在 Performance 中选择跟踪记录条目，或在 Sources 中选择文件。

您还可以从 Sources 面板等位置复制文件的部分内容，并将其粘贴到聊天中，询问其用途。

接下来，详细了解如何将 AI 辅助 与不同的面板搭配使用。

AI 辅助样式

使用 AI 辅助 面板设置样式，了解网站的整体布局、特定元素样式，并获取 AI 生成的 CSS bug 修复方案。

从“元素”面板打开 AI 辅助

如需从 Elements 面板打开 AI 辅助 ，请在 检查 DOM 节点时， 右键点击该节点，然后选择 Ask AI 选项。

突出显示了“向 AI 提问”的元素上下文菜单。

当您以这种方式打开 AI 辅助 时，系统会预先选择检查的 DOM 元素作为对话的上下文元素。

或者，点击附加到悬停的 DOM 节点的浮动按钮。

附加到 DOM 节点的悬浮按钮。

对话上下文

与 AI 辅助 的聊天始终与当前检查的元素相关，该元素是“元素”面板 DOM 树中最后选择的元素。面板左下角会显示对此元素的引用。

突出显示了上下文元素的 AI 辅助面板。

使用当前元素旁边的元素选择器 或从“元素”面板 DOM 树中进行选择，以更改上下文。

选择上下文后，您可以截取视口的屏幕截图并将其提交到聊天中。点击聊天输入字段旁边的 截屏 按钮。

“拍摄屏幕截图”按钮和输入字段中附加的屏幕截图。

您可以使用屏幕截图为提示提供额外的视觉上下文，例如，检查所有可见按钮是否具有相同的间距。

虽然当前检查的元素是对话的基础，但 AI 辅助 可以访问所有 Web API，以便从检查的网页收集更多信息。这包括使用 document.querySelector 查询其他元素或评估计算出的样式。

AI 辅助网络

使用 AI 辅助 面板了解网站发送的请求。

从“网络”面板打开 AI 辅助

如需从 Network 面板打开 AI 辅助， 请右键点击请求，然后选择 Ask AI 选项。

突出显示了“向 AI 提问”的请求上下文菜单。

当您以这种方式打开 AI 辅助 时，系统会预先选择所选的网络请求作为对话的上下文。

或者，点击悬停的网络请求旁边的浮动按钮。

附加到网络请求的浮动按钮。

对话上下文

与 AI 辅助 的聊天与 Network 面板请求列表中当前选择的网络请求相关。面板左下角会显示对此请求的引用。

突出显示了上下文请求的 AI 辅助面板。

点击 Network 面板中的其他请求，以更改上下文。

AI 辅助 使用请求网址、标头、时间安排和请求发起方链来回答您的问题。

重要提示：可能会包含敏感信息的标头会自动经过修订。

开始对话后，点击 Analyzing network data 条状标签中的 展开 按钮，即可查看 AI 辅助 使用的原始数据。

突出显示“正在分析网络数据”功能块的 AI 辅助面板。

AI 辅助性能

使用 AI 辅助 面板了解“性能”面板中记录的性能 分析报告。

从“性能”面板打开 AI 辅助

如需从 Performance 面板打开 AI 辅助 ，请先记录性能分析报告。

根据您要调查的内容，您可以从单个性能数据分析或性能跟踪记录视图中的活动打开 **AI 辅助** 面板。

性能数据分析

在 Insights 标签页中，打开一项数据分析（例如 **LCP by phase ），然后点击 Ask AI** 按钮。

突出显示的“向 AI 提问”按钮，位于 LCP 性能数据分析下方。

DevTools 会打开 AI 辅助 面板，并预先选择此性能数据分析作为对话的上下文。

性能跟踪记录视图

如需从跟踪记录视图打开 AI 辅助 ，请右键点击活动，然后选择 Ask AI 选项。

突出显示“向 AI 提问”的 activity 上下文菜单。

在这种情况下，系统会预先选择此活动作为对话的上下文。

对话上下文

所选的性能活动将用作与 AI 辅助 对话的上下文。面板左下角会显示对此活动的引用。

突出显示了上下文活动的 AI 辅助功能面板。

性能数据分析

如果您点击了特定性能数据分析的 Ask AI ，您将看到此数据分析作为所选上下文。 您可以点击其他数据分析下的 Ask AI 来更改您的选择。

将 LCP 性能数据分析作为 AI 助理的对话上下文。

开始对话后，展开 Analyzing insight: ... 部分，即可查看 AI 辅助使用的原始数据。

突出显示了上下文数据洞见的 AI 辅助面板。

跟踪记录视图

您可以在性能跟踪记录中选择不同的项，上下文也会相应更改。

AI 辅助 使用所选调用树中的时间安排来回答您的提示。

开始对话后，点击 Analyzing call tree 条状标签中的 按钮，即可查看 AI 辅助 使用的原始数据。

突出显示了“正在分析调用树”功能块的 AI 辅助面板。

AI 辅助来源

使用 AI 辅助 面板了解网站加载和使用的文件。

从“来源”面板打开 AI 辅助

如需从 Sources 面板打开 AI 辅助， 请右键点击文件，然后选择 Ask AI 选项。

突出显示了“向 AI 提问”的文件上下文菜单。

当您以这种方式打开 AI 辅助 时，系统会预先选择所选文件作为对话的上下文。

或者，在将鼠标悬停在文件上时，点击浮动按钮。

附加到悬停文件的浮动按钮。

对话上下文

所选文件将用作与 AI 辅助 对话的上下文。面板左下角会显示对此文件的引用。

突出显示了上下文的描述文件的 AI 辅助功能面板。

点击“来源”面板中的其他文件，以更改上下文。

AI 辅助 使用所选文件的名称、网址、源映射（如果有）和内容来回答您的问题。

开始对话后，点击 Analyzing file 条状标签中的 按钮，即可查看 AI 辅助 使用的原始数据。

突出显示“正在分析文件”条状标签的 AI 辅助功能面板。

对话流程

发送提示会开始与样式代理的对话。为了获取回答提示所需的信息，代理会生成并执行调用 Web API 的 JavaScript。代理进度以步骤形式显示。初始步骤状态为 Investigating…。

开始对话后的 AI 辅助面板。

随着代理执行更多具体操作来解决您的问题，步骤标签会更新。

代理得出最终答案后，答案会显示在调查步骤下方，包括后续提示的建议。

AI 辅助面板，其中显示了 AI 给出的答案。

点击任何建议的提示以继续对话。点击

调查步骤，以便更好地了解 AI 辅助在后台执行的操作。

AI 辅助面板，其中包含展开的对话步骤。

展开进度条状标签后，您会看到代理已执行的代码及其返回值。复制执行的代码以供进一步使用，例如 使用控制台面板执行代码。

已暂停的对话

AI 辅助 可能会生成具有副作用的代码。发生这种情况时，对话会在执行代码之前暂停。

显示已暂停对话的 AI 助理面板。

对话暂停后，查看代理建议的代码。点击 继续 以继续，或点击取消 以阻止执行。

将更改保存到工作区

借助 关联的工作区文件夹，您可以将 AI 辅助 建议的样式更改保存回计算机上的 CSS 源文件。

为此，请执行以下操作：

  1. 首先，生成元数据文件并关联工作区文件夹。

    或者，您可以手动添加文件夹。

  2. 从“元素”面板开始聊天。

  3. 提示 AI 辅助 修改您的 CSS。

  4. AI 辅助 可能会生成代码并暂停执行。查看代码，然后点击继续 以实时测试更改。

  5. 展开 Unsaved changes 部分，然后点击 Apply to workspace 。

  6. 查看 diff 中的更改，然后点击 Save all 。

如需了解此工作流程，请参阅：

未给出答案

AI 辅助 可能会因各种原因而无法提供答案。

显示拒绝对话的 AI 助理面板。

如果您认为 AI 辅助 应该能够 讨论，请提交 bug。

对话记录

开始对话后，每个后续答案都基于您与 AI 之间的先前互动。

AI 辅助会在会话之间保存您的对话记录，因此即使在开发者工具或 Chrome 重新加载后，您也可以访问之前的聊天记录。

使用面板左上角的控件来控制对话记录。

突出显示了历史记录控件的 AI 辅助面板。

开始新的测量

如需使用当前选择的 对话上下文开始新对话，请点击按钮。

继续

如需继续之前的对话，请点击按钮，然后从上下文菜单中选择该对话。

删除

如需从历史记录中删除对话，请点击按钮。

为答案评分并提供反馈

AI 辅助 是一项实验性功能。因此，我们积极征求您的反馈，以了解如何提高答案质量和整体体验。

突出显示了评分控件的 AI 辅助面板。

为答案投票

使用答案下方的 我喜欢 和 不喜欢 按钮为答案评分。

举报答案

如需举报不当内容，请点击投票按钮旁边的按钮。