Google 近日发布了 Chrome v137开发者工具（Chrome DevTools）的重大更新，集成了 Gemini AI 智能助手，为开发者带来前所未有的性能分析和调试体验。从智能标注性能追踪到 CSS 修改保存，Chrome v137的新功能极大提升了开发效率。AIbase 综合整理最新信息，为您详细解析此次更新的亮点与应用前景。
Gemini 智能标注:性能分析更直观
Chrome v137DevTools 引入了 Gemini 智能标注功能，开发者可通过双击性能追踪中的主轨道（Main Track）事件，点击“生成标签”按钮，让 Gemini 根据堆栈跟踪和上下文自动生成事件标签。这一功能极大简化了性能分析流程，帮助开发者快速理解复杂性能数据的含义。此外，开发者还可以在“Annotations”选项卡中为时间范围添加标签、连接事件，甚至分享标注结果，提升团队协作效率。
AI 驱动 CSS 调试:一键修改与保存
新版本的 DevTools 允许开发者通过 Gemini 智能助手直接修改和修复 CSS。只需在“Elements”面板中点击“Ask AI”，输入 CSS 修改需求，Gemini 即可生成代码并支持实时预览。结合实验性的自动工作区功能，开发者可将修改后的 CSS、JavaScript 或 HTML 直接保存至本地源文件，极大提升调试效率。AIbase 认为，这一功能将显著缩短前端开发的工作流程。
性能面板新洞察:发现隐藏问题
Chrome v137的性能面板新增了两项关键洞察:重复 JavaScript 和 传统 JavaScript。这些洞察帮助开发者识别代码中的冗余和过时部分，从而优化网站加载速度和运行时性能。此外，开发者可通过一键启动与 Gemini 的对话，深入分析性能瓶颈，获得针对性优化建议。
视觉辅助与截图:调试更具上下文
为增强调试的直观性，Chrome v137在 AI 辅助面板中新增了截图功能。开发者可通过点击“拍照”按钮捕捉页面截图，并将其作为上下文提交给 Gemini，用于分析页面布局或样式问题，例如检查按钮间距是否一致。这一功能为视觉调试提供了更丰富的上下文支持。
Gemini 赋能开发者生态
Chrome v137DevTools 的更新标志着 AI 在开发者工具中的深度融合。Gemini 不仅通过智能标注和 CSS 修改简化了复杂任务，还通过性能洞察和截图功能为开发者提供了更全面的调试支持。AIbase 认为，随着 Gemini Nano 等本地 AI 模型的进一步集成，Chrome DevTools 有望成为前端开发者的“超级助手”，推动 Web 开发效率迈上新台阶。
结语
Chrome v137开发者工具的更新以 Gemini AI 为核心，带来了智能标注、CSS 自动修改和性能优化洞察等一系列创新功能，为开发者提供了更高效、直观的调试体验。
本文由「aiuc」编辑整理，文章链接：https://www.aiuc.net/63620
该文观点仅代表作者本人，平台仅提供信息存储空间服务。
