Chrome 开发者工具是一套 Web 开发者工具，直接内置于 Google Chrome 浏览器中，帮助您即时修改页面和快速诊断问题，让您能够更快地构建更好的网站。
Chrome 开发者工具
https://developer.chrome.google.cn/docs/devtools/ai-assistance?hl=zh-cn
Google Chrome
https://www.google.com/chrome/?hl=zh-cn
您可以使用 AI 助理对网站进行样式设置，本篇文章将带您了解网站的整体布局、特定元素样式，并获取 AI 生成的 CSS 错误修复程序。
注: AI 辅助面板目前处于实验阶段，可在 Chrome Canary 131 及更高版本中使用。开始使用之前，请阅读我们往期文章中的 "已知问题" 和 "我们如何使用您的数据" 部分。
首先需要打开 "AI 辅助" 面板。您可以通过以下三种方式在抽屉式菜单中打开:
"元素" 面板
命令菜单
"更多工具" 菜单
抽屉式菜单
https://developer.chrome.google.cn/docs/devtools/console/reference?hl=zh-cn#drawer
通过 "元素" 面板
如需从 "元素" 面板打开 AI 辅助，请在检查 DOM 节点时右键点击该节点，然后选择 "Ask AI" 选项。
检查 DOM 节点
https://developer.chrome.google.cn/docs/devtools/dom?hl=zh-cn#inspect
当您以这种方式打开 AI 辅助时，系统会预先选择被检查的 DOM 元素作为与 AI 助理展开对话的上下文元素。
或者，您也可以点击悬停在 DOM 节点上的浮动按钮进入对话。
通过命令菜单
如需从命令菜单中打开 AI 辅助，请输入 "AI"，然后运行 "显示 AI 辅助" 命令 (旁边带有 Drawer 标记)。
通过 "更多工具" 菜单
点击元素面板右上角的齿轮图标，依次选择更多选项 > 更多工具 > AI 辅助。
请确保与 AI 助理聊天的内容始终与当前检查的元素相关，即 "元素" 面板 DOM 树中最后一个被选中的元素。此元素的引用将显示在面板的左下角。
您可以使用元素选择器更改上下文，也可以从 "元素" 面板的 DOM 树中进行选择。
"元素" 面板的 DOM 树
https://developer.chrome.google.cn/docs/devtools/dom?hl=zh-cn#inspect
选择上下文后，您可以截取视窗的屏幕截图，并点击聊天输入框旁边的相机按钮，将其提交到聊天中。
您可以使用屏幕截图提供更多视觉背景信息，例如检查所有可见按钮的间距是否相同。
虽然当前检查的元素是对话的基础，但 AI 助理可以访问所有 Web API，以便从所检查的网页中收集更多信息。这包括使用 document.querySelector 查询其他元素或评估计算样式。
在开始新对话时，用于设置样式的 AI 辅助会提供示例提示，帮助您快速上手。
点击任意提示，即可预填面板底部的提示输入框。或者在输入框中输入您自己的提示或问题，按 Enter 键或点击输入字段右侧的箭头即可发送提示。
发送提示即可与样式 AI 助理开始对话。为了获取回答此问题所需的信息，AI 助理会生成并执行调用 Web API 的 JavaScript。进度会分步显示，初始步骤状态为 Investigating…。
随着更多具体操作建议的生成，步骤标签也会更新。最终答案会显示在步骤下方，包括后续问题的建议。点击任何建议的提示可以继续对话。
您可以点击任何进度条状标签后方的向下箭头，以展开具体步骤，更好地了解 AI 助理在后台执行了哪些操作。
展开进度条状标签后，您会看到已执行的代码及其返回值，复制已执行的代码以供进一步使用。
暂停的对话
AI 助理会生成的代码并不一定完全适合当前的情境。在这种情况下，系统会在执行代码之前暂停对话。
对话暂停时，您可以查看提供的建议代码，点击 Continue 即可继续执行，或点击 Cancel 阻止执行。
保存对工作区所做的更改
通过关联的工作区文件夹，您可以将 AI 助理建议的样式更改保存到计算机上的 CSS 源文件。
具体操作步骤如下:
首先，生成元数据文件并关联工作区文件夹，或者您也可以手动添加文件夹。
在 "元素" 面板中发起聊天。
提示 AI 助理修改 CSS。
AI 助理可能会生成代码并暂停执行。查看代码，然后点击继续以在线测试更改。
展开未保存的更改部分，然后点击应用到工作区。需要注意的是，如果您没有关联的 Workspace 文件夹，此时 AI 助理会提示您手动添加。
在 diff 中查看所做更改，然后点击全部保存。
保存对工作区所做更改的工作流程
关联的工作区文件夹
https://developer.chrome.google.cn/docs/devtools/workspaces?hl=zh-cn
生成元数据文件
https://developer.chrome.google.cn/docs/devtools/workspaces?hl=zh-cn#generate-json
手动添加文件夹
https://developer.chrome.google.cn/docs/devtools/workspaces?hl=zh-cn#manual-connection
未给出回答
AI 助理可能因各种原因而无法提供答案。如果您认为未能解决您的问题，可以向我们提交 bug。
提交 bug
https://issues.chromium.org/issues/new?component=1457055&template=1923529&pli=1
对话记录
对话开始后，系统的后续回答将基于您与 AI 之间的过往互动展开。
AI 辅助功能会在会话之间保存对话记录，因此即使您重新加载开发者工具或 Chrome，仍然可以访问之前的对话，并通过使用面板左上角的控件来控制对话记录。
蓝色方框中的按钮从左至右分别代表 "发起新对话"、"继续之前的对话"、"删除对话"
想了解更多 Chrome 开发者工具的实用技巧吗？请持续关注我们的系列文章，以及使用 AI 辅助功能的提示建议，助您快速上手。敬请期待更多精彩内容！
