为了帮助开发者更高效地解决这些问题，谷歌在
Chrome 开发者工具中推出了一系列的 AI 功能，这一创新举措无疑为开发者带来了巨大的福音。
AI 功能的引入
Console Insights 的推出
在
Chrome 132
中谷歌首次推出了
Console Insights
，这是
Chrome 开发者工具
中的第一项
AI
功能。
该功能通过将与日志消息相关的网络数据、源代码和堆栈轨迹发送到
Google
的大语言模型 (LLM)
Gemini
，帮助开发者更好地理解记录到控制台的错误和警告。
这一功能的推出，标志着
Chrome
开发者工具在
AI
领域迈出了重要的一步。
AI 助手的扩展
最近谷歌又进一步扩展了这一功能，推出了
AI 助手
。
AI 助手通过交互式方式查询网页以获取更多上下文数据，从而帮助开发者调查样式问题。
这一功能的引入，使得开发者能够更高效地调试网页代码，提升开发效率。
AI 功能的使用方法
启用 AI 功能
启用 Chrome 开发者工具中的 AI 功能非常简单。开发者只需按照以下步骤操作：
-
-
-
转到
“AI Innovations”
选项，开启
“Console Insights”
和
“AI Assistance”
两项功能。
提问和获取帮助
一旦
AI
功能启用，开发者可以选择任意一段代码，点击
“Ask AI”
按钮提出问题。
AI 会自动读取源代码，并根据开发者的提问及上下文进行分析，给出相关的回答和解决方案。
这一过程不仅简单快捷，而且能够提供有针对性的帮助，支持多种语言的提问和回答。
AI 功能的特点
动态数据收集
AI 助手使用
ReAct
策略，使 LLM 能够自主推理并根据推理结果确定后续操作。通过这一策略，AI 助手可以在思考、行动和观察的循环中运作，直到确定出适合用户询问的回答。这一动态数据收集过程，确保了 AI 助手能够提供最准确和最有用的信息。
交互式查询
开发者可以随时在工作窗口内利用 AI 进行提问，而无需离开当前页面。这种交互式查询方式，不仅提高了开发效率，还减少了开发者在不同工具之间切换的时间成本。
多语言支持
AI 功能支持多种语言的提问和回答，开发者还可以指定希望 AI 使用的语言。这一多语言支持功能，使得全球各地的开发者都能够方便地使用 AI 助手，无论他们的母语是什么。
安全性和隐私
副作用检查
为了确保 AI 生成的代码不会对网页造成破坏性更改，谷歌采用了
Chrome
的
JavaScript
引擎
V8
通过
Chrome DevTools
协议公开的副作用检查。
这些检查会在 V8 执行代码时执行，并且基于已知没有副作用的
JavaScript
内置函数的许可名单。
如果检查检测到生成的代码正在修改被检查的页面，则会暂停执行，并要求用户检查代码并确认可以运行。
隔离运行
生成的
JavaScript
代码在所谓的隔离“世界”中运行。
这与扩展程序运行沙盒脚本的方式类似：生成的代码可以访问
DOM
和
Web API
，但无法访问被检查网页定义的
JavaScript
代码或状态。
这种隔离运行机制，确保了 AI 功能的安全性和稳定性。
跟踪和管理更改
setElementStyles 绑定
为了以开发者可跟踪的方式修复网页上的样式，谷歌实现了一个名为
setElementStyles
的绑定，并将其公开给代理的执行上下文。通过这一绑定，AI 助手可以记录元素选择器的更改，并将这些更改显示在“更改”面板中，便于开发者跟踪和管理。
用户反馈
