开发者工具提供了一个 AI 辅助 面板，您可以通过与内置 AI 智能体聊天来了解网站并解决问题。
AI 辅助 面板由 Gemini 提供支持，可执行以下操作：
- 专注于 Web 开发。
- 可以回答有关整个网页的一般问题，还可以提供有关各种主题的具体分析，包括但不限于样式、网络、性能等。
- 自主缩小范围并选择特定上下文供您聊天，例如 DOM 元素、网络请求、性能跟踪事件等。
- 可以执行自主操作，例如运行审核和记录性能跟踪。
- 提供其操作和推理的分步演示，并提供指向开发者工具相关部分的链接，以便您点击即可检查。
- 可以建议代码更改，并根据其分析生成提示，供您的编码代理执行。
借助 AI 辅助 ，您可以调试网站的样式、网络、性能、来源等。
如需在 AI 辅助 面板中与 Gemini 进行有效聊天，请了解如何打开面板、撰写提示和控制对话流程。
打开 AI 辅助面板
AI 辅助 面板默认在抽屉式面板中打开。
如需打开该面板，请点击位于顶部主工具栏右侧全局入口点处的 AI 辅助 按钮。
从面板中
您可以直接从 Elements、Network、Sources 或 Performance 面板中打开该面板，并选择对话上下文，方法有两种：
点击元素、网络请求、源文件或展开的性能分析旁边的
使用 AI 调试 按钮。
右键点击元素、请求、文件或跟踪条目，然后从 使用 AI 调试 上下文菜单中选择一个常用提示选项。
从命令菜单中
如需从命令菜单中打开 AI 辅助 ，请键入 AI，然后运行 Show AI assistance 命令，该命令旁边有 Drawer 徽章。
从“更多工具”菜单中
或者，在右上角，依次选择 更多选项 > 更多工具 > AI 辅助 。
提示
在开始新对话时，AI 辅助 会提供示例提示，帮助您快速入门。
点击任何提示，即可预先填充面板底部的提示输入字段。
或者，在输入字段中输入您自己的提示或问题。
如需发送提示，请按 Enter 键，或点击输入字段右侧的箭头。
没有上下文的开放式提示
借助自由格式聊天框，您可以提出更高级别的开放式问题，而无需提供上下文。例如：
How to use DevTools to debug accessibility?AI 辅助 将首先运行 Lighthouse 无障碍功能审核，以便更好地回答您的提示。
What are the slowest network requests on this page?AI 辅助 将在 Network 面板中提供可疑请求列表以及指向这些请求的链接，以便您点击即可选择请求作为对话上下文。
What performance issues exist on the page?AI 辅助 将自动使用您选择的设置记录性能跟踪，以回答此提示。
例如，
How do I use the Animation panel?或Where is the high contrast setting in DevTools?等提示将直接帮助您了解开发者工具本身。
开始聊天后，当聊天内容为空时，AI 辅助 会根据您的操作智能更新上下文，同时尊重您手动选择的内容。
包含上下文的提示
当您从面板中打开 AI 辅助 时，聊天框中会选择相应的对话上下文，以便您专门针对所选内容进行聊天。
您可以随时手动更改上下文，方法是在 Elements 中选择元素，在 Network 中选择请求，在 Performance 中选择跟踪条目，或在 Sources 中选择文件。
您还可以从 Sources 面板等位置复制文件的部分内容，并将其粘贴到聊天中，询问其用途。
接下来，详细了解 AI 辅助 中的对话流程。
对话流程
发送提示会开始与代理的对话。为了获取最佳回答提示所需的信息，代理会生成并执行调用 Web API 的 JavaScript。
代理进度以步骤形式显示。初始步骤状态为 Investigating…。
随着代理执行更多具体操作来回答您的提示，初始步骤标签会更新。
根据您要调试的内容，代理还可能会在开发者工具中执行操作，例如记录性能跟踪或运行 Lighthouse 审核。
代理演示
代理生成提示的回答后，初始步骤标签会更改为 Show agent walkthrough 或 Show thinking，您可以展开该标签以查看代理在右侧侧边栏中分析数据所采取的步骤。
这些步骤包括：
- 代理执行的可展开代码段以及返回的数据。您可以复制代码并在控制台中执行。
- 以更易于理解的格式呈现结果的小部件。
小部件的右上角有一个 Reveal 按钮，可将您带到开发者工具的相关部分。
后续提示
代理得出最终答案后，可能会建议后续提示。点击任意提示即可继续对话。
为您的编码代理生成提示
如需为您的编码代理生成提示，请点击 Copy to coding agent 。
该智能体将总结其发现和分析洞见，并以最小化形式或人类可读的 Markdown 格式提供可操作的提示，您可以将其复制到剪贴板，并使用您选择的 AI 智能体继续编码。
已暂停的对话
AI 辅助 可能会生成具有副作用的代码。发生这种情况时，对话会在执行代码之前暂停。
对话暂停后，请查看代理建议的代码。点击 继续 以继续，或点击 取消 以阻止执行。
您可以在 Changes 面板中检查建议的代码更改。
代理会在开发者工具内应用更改，但您可以配置工作区，让开发者工具将更改保存到您的源代码。
将更改保存到工作区
如果连接了工作区文件夹，您可以将AI 辅助建议的样式更改保存回计算机上的 CSS 源文件。
为此，请执行以下操作：
-
或者，您可以手动添加文件夹。
提示 AI 辅助 修改您的 CSS。
AI 辅助 可能会生成代码并暂停执行。查看代码，然后点击 继续 以实时测试更改。
展开 Unsaved changes 部分，然后点击 Apply to workspace 。
在
diff中查看更改，然后点击 Save all 。
如需了解此工作流，请参阅：
未给出答案
AI 辅助 可能会因各种原因而无法提供答案。
如果您认为您的提示是 AI 辅助 应该能够 讨论的内容，请提交 bug。
对话记录
开始对话后，每个后续回答都基于您与 AI 之间的先前互动。
AI 辅助会在会话之间保存您的对话记录，因此即使在开发者工具或 Chrome 重新加载后，您也可以访问之前的聊天记录。
使用面板左上角的控件来控制对话记录。
开始新的测量
如需使用当前选择的 对话上下文开始新对话，请点击 按钮。
继续
如需继续之前的对话，请点击按钮，然后从上下文菜单中选择该对话。
删除
如需从历史记录中删除对话，请点击按钮。
为回答评分并提供反馈
AI 辅助 是一项实验性功能。因此，我们积极征求您的反馈，以了解如何提高回答质量和整体体验。
为回答投票
使用回答下方的 赞 和 踩 按钮为回答评分。
举报回答
如需举报不当内容，请点击投票按钮旁边的按钮。