与 AI 助理聊天

开发者工具提供了一个 AI 辅助面板，您可以通过与 AI 智能体对话来了解网站并修复问题。

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

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

打开 AI 辅助面板

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

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

您还可以直接从元素、网络、来源或效果面板中打开该面板，方法是右键点击某个元素或请求，然后选择向 AI 提问。

注意：使用以下方法打开 AI 辅助功能时，请务必选择上文所述的对话上下文。

从命令菜单中

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

从“更多工具”菜单中

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

提示

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

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

或者，您也可以在输入字段中自行输入提示或问题。

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

借助免费的聊天框，您可以提出更高级别的问题，例如“如何使用开发者工具调试无障碍功能？”或“哪些网络请求速度较慢？”，还可以从来源面板复制文件的部分内容，然后将其粘贴到聊天框中，询问其用途。

注意： 您仍然可以像以前一样在元素、网络、性能和来源面板中选择特定上下文。

AI 辅助样式设置

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

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

如需在元素面板中打开 AI 辅助功能，请在检查 DOM 节点时，右键点击该节点，然后选择向 AI 提问选项。

当您像这样打开 AI 辅助时，检查的 DOM 元素已预先选定为对话的上下文元素。

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

对话上下文

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

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

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

您可以使用屏幕截图为提示提供更多视觉背景信息，例如，检查所有可见按钮是否具有相同的间距。

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

AI 辅助网络

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

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

如需从“网络”面板打开 AI 辅助，请右键点击相应请求，然后选择向 AI 提问选项。

当您打开此类 AI 辅助功能时，所选的网络请求会预先选定为对话的上下文。

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

对话上下文

与 AI 助理的对话与当前在网络面板请求列表中选择的网络请求相关。相应请求的引用会显示在面板的左下角。

点击网络面板中的其他请求，即可更改上下文。

AI 辅助功能正在使用请求网址、标头、计时和请求发起者链来回答您的问题。

重要提示：可能包含敏感信息的标头会自动进行编辑。

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

AI 辅助功能（性能）

使用AI 辅助性能面板了解性能面板中记录的性能配置文件。

从“效果”面板打开 AI 辅助

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

您可以根据要调查的内容，从单个性能数据分析中打开 **AI 辅助** 面板，也可以从性能轨迹视图中的活动打开该面板。

性能数据分析

在数据分析标签页中，打开一项数据分析（例如**按阶段划分的 LCP），然后点击**“向 AI 提问”按钮。

开发者工具会打开 AI 辅助面板，并预先选择此性能洞见作为对话的上下文。

性能轨迹视图

如需从轨迹视图中打开 AI 辅助功能，请右键点击某项活动，然后选择向 AI 提问选项。

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

对话上下文

所选的性能活动记录会用作与 AI 辅助对话的上下文。相应活动的引用会显示在面板的左下角。

性能数据分析

如果您点击了向 AI 提问以获取特定效果分析，则会看到此分析作为所选上下文。您可以点击其他数据洞见下方的向 AI 提问来更改选择。

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

跟踪记录视图

您可以在性能轨迹中选择不同的项，上下文会随之更改。

AI 辅助功能正在使用所选调用树中的时间信息来回答您的提示。

开始对话后，点击 Analyzing call tree 信息块中的 按钮，即可查看 AI 助理使用的原始数据。

AI 辅助功能（针对来源）

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

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

如需从来源面板打开 AI 辅助功能，请右键点击某个文件，然后选择向 AI 提问选项。

当您打开此类 AI 辅助功能时，系统会预先选择所选文件作为对话的上下文。

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

对话上下文

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

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

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

开始对话后，点击 Analyzing file 信息块中的 按钮，即可查看 AI 辅助功能使用的原始数据。

对话流程

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

随着代理执行更具体的行动来解答您的问题，步骤标签会随之更新。

当智能体得出最终答案后，该答案会显示在调查步骤下方，其中还包括后续提示的建议。

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

的调查步骤，以便更好地了解 AI 助理在幕后做了什么。

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

已暂停的对话

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

当对话暂停时，查看智能体建议的代码。点击 play_arrow 继续以继续，或点击取消以阻止执行。

注意： 在对话暂停期间，提示输入处于停用状态。

保存对工作区所做的更改

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

具体操作步骤如下：

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

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

2. 从“元素”面板发起聊天。

3. 提示 AI 助理修改 CSS。

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

5. 展开未保存的更改部分，然后点击应用到工作区。

   注意： 如果您没有关联的工作区文件夹，AI 辅助面板会在这一步要求您手动添加。

6. 查看 diff 中的更改，然后点击全部保存。

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

未给出答案

AI 助理可能因各种原因而无法提供回答。

如果您认为自己的提示是 AI 助理应该能够讨论的内容，请提交 bug。

对话记录

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

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

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

开始新的测量

如需使用当前所选的对话上下文发起新对话，请点击添加按钮。

继续

如需继续之前的对话，请点击历史记录按钮，然后从上下文菜单中选择相应对话。

注意：对话上下文不会自动更新，因为自对话停止以来，对话上下文可能已消失。

删除

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

为回答评分并提供反馈

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

对回答进行投票

使用回答下方的我喜欢图标 我喜欢 和不喜欢图标 不喜欢 对回答进行评分。

举报回答

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