开发者工具提供了一个 AI 辅助面板，可帮助您通过与内置 AI 智能体对话来了解网站并解决问题。
AI 辅助面板由 Gemini 提供支持，可执行以下操作：
- 擅长 Web 开发。
- 可以回答有关整个网页的一般性问题，还可以提供有关各种主题的具体数据分析，包括但不限于样式、网络、性能等。
- 自主缩小范围并选择特定的对话上下文，例如 DOM 元素、网络请求、性能跟踪事件等。
- 可以执行自主操作，例如运行审核和记录性能轨迹。
- 提供有关其操作和推理的分步演练，并提供指向 DevTools 相关部分的链接，以便您点击即可检查这些部分。
- 可以建议代码更改，并根据其分析结果生成提示，供您的编码代理执行。
借助 AI 辅助功能，您可以调试网站的样式、网络、性能、源代码等。
如需在 AI 辅助面板中有效地与 Gemini 聊天，请了解如何打开该面板、撰写提示以及控制对话流程。
打开 AI 辅助面板
如需打开该面板，请点击顶部主工具栏右侧全局入口点处的 AI 辅助按钮。
从面板中
您可以从元素、网络、来源或性能面板中，以两种方式打开已选择对话上下文的面板：
点击元素、网络请求、源文件或展开的性能分析旁边的
Debug with AI 按钮。
右键点击元素、请求、文件或轨迹条目，然后从 Debug with 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 中选择文件。
您还可以从来源面板中复制文件的部分内容，然后将其粘贴到对话中，询问其用途。
接下来，详细了解 AI 辅助中的对话流程。
对话流
发送提示会开始与代理的对话。为了获取所需信息，以便更好地回答您的提示，智能体生成并执行调用 Web API 的 JavaScript。
代理进度以步骤形式显示。初始步数状态为 Investigating…。
随着智能体执行更具体的操作来回答您的提示，初始步骤标签会随之更新。
根据您要调试的内容，代理还可以在开发者工具中执行操作，例如记录性能轨迹或运行 Lighthouse 审核。
代理演示
智能体生成提示的答案后，初始步骤标签会更改为显示智能体演练或显示思考过程，您可以展开该标签，在右侧的侧边栏中查看智能体分析数据所采取的步骤。
具体步骤包括：
- 智能体执行的可展开代码段以及返回的数据。您可以复制该代码，然后在控制台中执行。
- 以更易于理解的格式呈现检测结果的小部件。
微件右上角有一个显示按钮，点击该按钮可前往开发者工具的相关部分。
后续提示
当代理得出最终答案后，可能会建议后续提示。点击任意选项即可继续对话。
为编码智能体生成提示
如需为您的编码代理生成提示，请点击复制到编码代理。
AI 智能体将总结其发现和分析洞见，并以最小化形式或人类可读的 Markdown 格式提供可操作的提示，您可以将其复制到剪贴板，然后继续使用所选的 AI 智能体进行编码。
已暂停的对话
AI 辅助功能可能会生成具有副作用的代码。发生这种情况时，系统会在执行代码之前暂停对话。
当对话暂停时，查看智能体建议的代码。点击 继续以继续，或点击取消以阻止执行。
您可以在“更改”面板中检查建议的代码更改。
代理会在开发者工具内应用更改，但您可以配置工作区，让开发者工具将更改保存到源代码。
保存对工作区所做的更改
借助关联的工作区文件夹，您可以将 AI 助理建议的样式更改保存回计算机上的 CSS 源文件。
为此，请执行以下操作：
-
或者，您也可以手动添加文件夹。
从“元素”面板发起聊天。
提示 AI 助理修改 CSS。
AI 助理可能会生成代码并暂停执行。检查代码，然后点击继续以实时测试更改。
展开未保存的更改部分，然后点击应用到工作区。
查看
diff中的更改，然后点击全部保存。
如需了解此工作流程，请参阅：
未给出答案
AI 助理可能因各种原因而无法提供回答。
如果您认为自己的提示是 AI 助理应该能够讨论的内容，请提交 bug。
对话记录
开始对话后，AI 的每个后续回答都会基于您之前与 AI 的互动。
AI 辅助功能会在会话之间保存对话历史记录，因此即使在重新加载开发者工具或 Chrome 后，您也可以访问之前的对话。
使用面板左上角的控件来控制对话记录。
开始新的测量
如需使用当前所选对话上下文发起新对话，请点击按钮。
继续
如需继续之前的对话，请点击按钮，然后从上下文菜单中选择相应对话。