Web 开发指向标 | Chrome 开发者工具学习资源 (六)

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 技术发挥作用。观看下方视频也可以帮助您更生动地理解 AI 辅助功能的使用。

注: AI 辅助面板目前处于实验阶段，可在 Chrome Canary 131 及更高版本中使用。开始使用之前，请务必了解下方的 "已知问题" 和 "我们如何使用您的数据" 部分。

概览

借助 AI 辅助面板，您可以直接在开发者工具中与 Gemini 聊天，在此面板发起的对话会自动包含有关您正在检查的网页的技术详细信息。

使用 AI 辅助面板时，您可以使用提供的示例提示或自己的问题开始对话，并根据需要继续提出尽可能多的后续问题来解决任务。

AI 辅助面板中的聊天功能可帮助您详细了解以下内容:

样式: 询问 DOM 树中的元素，了解它们以特定方式显示的原因、它们如何交互，并使用提供的修复程序解决样式方面的问题。
网络请求: 询问在您的网页中发送的请求。了解这些问题的来源、所需时间或失败原因。
来源: 询问与网页加载的文件相关的问题。详细了解其内容和用途。
效果: 询问 "性能" 面板中记录的性能配置文件中的活动，并获取改进建议。

DOM 树

https://developer.chrome.google.cn/docs/devtools/dom?hl=zh-cn
"性能" 面板

https://developer.chrome.google.cn/docs/devtools/performance/overview?hl=zh-cn

要求

如需使用 AI 辅助面板，请确保您:

年满 18 周岁，且位于受支持的国家/地区。
使用的是最新版 Chrome。
已使用您的 Google 账号登录 Chrome。
在开发者工具中，依次选择 Settings (设置) > Preferences (偏好设置) > Appearance (外观) > Language (语言)，然后选择 English (US) (英语 [美国])。
在开发者工具中启用了设置 > AI 创新。

AI 创新

https://developer.chrome.google.cn/docs/devtools/settings/ai-innovations?hl=zh-cn

我们如何使用您的数据

本声明和我们的隐私权声明说明了 Chrome 开发者工具中的 AI 创新功能如何处理您的数据。请仔细阅读。

隐私权声明

https://policies.google.com/privacy?hl=zh-cn

Chrome 开发者工具的 AI 辅助功能会使用被检查网页通过 Web API 公开的所有数据。

Google 会收集这些输入数据、生成的输出、相关功能使用情况信息以及您的反馈，并利用这些数据提供、改进和开发 Google 产品、服务和机器学习技术，包括 Google 的企业产品，如 Google Cloud。

为了帮助我们提升质量并改进产品，人工审核员可能会查看、处理上述输入数据、生成的输出、相关功能使用情况信息以及您的反馈，并添加注释。请勿在提示或反馈中添加可用于识别您或他人身份的敏感信息 (例如机密信息) 或个人信息。我们将按以下方式存储您的数据: Google 无法判断数据提供者的身份，并且无法再满足任何删除要求。数据保留时间最长可达 18 个月。如果您的 Google 账号由组织管理，我们可能无法收集数据来改进产品。

在您试用 AI 辅助功能时，请注意以下要点:

AI 辅助使用的是实验性技术，可能会生成不准确或令人不适的信息，这些信息并不代表 Google 的观点。对回答进行投票有助于我们改进此功能。
此功能目前处于实验阶段，将来可能会有调整。
请谨慎使用生成的代码段:

https://support.google.com/legal/answer/13505487?hl=zh-Hans

如需使用此功能，您需要在使用 AI 辅助时遵守 Google 服务条款。

Google 服务条款

https://policies.google.com/terms?hl=zh-cn

已知问题

AI 辅助功能会使用 Google 的大语言模型生成解释。大语言模型 (LLM) 是一项新兴且活跃的研究领域，而现代 Web 开发和调试同样是一项高度复杂且极具挑战性的工作，虽然我们会尽最大努力不断提高生成回答的质量和准确度，但您仍需要甄别 LLM 生成的回答。

说明

以下是可能生成的错误答案或说明的示例:

"幻觉" 中的 CSS 功能、属性或语法
不存在的元素或类名称

如果您遇到错误的解释，可以提交反馈来帮助我们改进。

提示注入

许多 LLM 应用都容易受到一种名为 "提示注入" 的滥用行为的侵害，攻击者可能会引导 LLM 接受非开发者意愿的操作指令。

请参阅以下无害示例:

控制功能的适用范围

在受管理的 Chrome 环境中，AI 辅助和控制台数据分析的可用性由 DevToolsGenAiSettings 企业政策控制。

控制台数据分析

https://developer.chrome.google.cn/docs/devtools/console/understand-messages?hl=zh-cn
DevToolsGenAiSettings

https://chromeenterprise.google/intl/en_us/policies/?hl=zh-cn#DevToolsGenAiSettings
政策

https://support.google.com/chrome/a/answer/9037717?hl=zh-Hans

不受管理的用户可以使用相同的政策在其计算机上停用 AI 创新功能并移除 Ask AI 上下文菜单项。

停止所有 Chrome 实例
设置建议的政策

macOS:

运行 $ defaults write com.google.Chrome DevToolsGenAiSettings -integer 2
Linux:

在 /etc/opt/chrome/policies/recommended 中创建 policies.json 并添加 {"DevToolsGenAiSettings": 2}
Windows:

在 regedit.exe 中，前往 HKEY_LOCAL_MACHINE\Software\Policies\Google\Chrome。将键 DevToolsGenAiSettings 设置为 dword:00000002

启动 Chrome，然后前往 chrome://policy 以验证 DevToolsGenAiSettings 的政策值为 2。

注意: 以上步骤用于设置建议的 Chrome 政策。推荐的政策可由机器管理员覆盖，并且可能会启用或停用 AI 创新功能，而不会参考您的偏好设置。

想了解更多 Chrome 开发者工具的实用技巧吗？请持续关注我们的系列文章，敬请期待更多精彩内容！