AI 协助进行样式设置

Matthias Rohmer
Matthias Rohmer

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

打开“AI 辅助”面板

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

AI 辅助面板以默认状态打开。

通过“元素”面板

如需从“元素”面板打开 AI 协助,请在检查 DOM 节点时,右键点击该节点,然后选择 Ask AI 选项。

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

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

或者,点击悬停在 DOM 节点上的浮动按钮。

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

通过命令菜单

如需从命令菜单中打开 AI 辅助,请输入 AI,然后运行显示 AI 辅助命令(旁边带有抽屉标记)。

打开的命令菜单,其中突出显示了“显示 AI 协助”。

通过“更多工具”菜单

或者,选择右上角的 更多选项 > 更多工具 > AI 协助

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

对话上下文

AI 助手聊天的内容始终与当前检查的元素相关,即 Elements 面板 DOM 树中最后一个被选中的元素。此面板的左下角会显示对此元素的引用。

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

您可以使用当前元素旁边的元素选择器按钮更改上下文,也可以从“元素”面板 DOM 树中进行选择。

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

提示

开始新对话时,用于样式设置的 AI 辅助会提供示例提示,以帮助您快速入门。

突出显示示例提示的 AI 辅助面板。

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

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

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

对话流程

发送提示即可与造型顾问开始对话。为了获取回答你问题所需的信息,客服人员会生成并执行调用 Web API 的 JavaScript。客服人员的进度会分步显示。初始步骤状态为 Investigating…

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

当代理执行更具体的操作来解决您的问题时,步骤标签会更新。

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

包含 AI 答案的 AI 辅助面板。

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

,以便更好地了解 AI 辅助的幕后工作。

展开的对话步骤的 AI 助理面板。

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

暂停的对话

AI 协助可能会生成具有副作用的代码。在这种情况下,系统会在执行代码之前暂停对话。

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

对话暂停后,查看客服人员建议的代码。点击 Continue 以继续。

未给出回答

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

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

如果您认为您的提示是 AI 助手应该能够讨论的内容,请提交 bug

对话记录

在您发起对话后,下一个答案都将基于您之前与 AI 的互动。

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

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

开始新的测量

如需使用当前所选的对话情境发起新对话,请点击按钮。

继续

要继续之前的对话,请点击按钮,然后从上下文菜单中选择相应对话。

删除

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

为答案评分并提供反馈

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

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

对回答进行投票

使用答案下方的 拇指朝上 拇指朝下按钮为答案评分。

举报答案

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