AI 助理
将 Gemini 直接集成到 Chrome 开发者工具中，从而提升开发工作流的效率。借助 AI 技术的辅助，简化样式、性能、网络和来源的调试。
修复了样式 bug
样式问题可能很难调试。详细了解元素的样式，并获取有关修复布局和样式 bug 的帮助：
Can you center this element?
分析网络请求
请求和响应标头通常包含一目了然的重要信息。使用 AI 辅助功能深入了解：
Why does this request fail?
了解源文件
您很少会编写网站上的所有代码，不确定某个脚本的用途？AI 辅助功能可以帮助您：
What is this file used for?
调查网页性能
核心 Web 指标不佳？找出网站运行缓慢的根本原因可能很难。AI 辅助功能可以为您调查问题并提出解决方案：
Help me optimize my LCP score
随时随地获取 AI 助理
找到询问 AI 按钮，让 Gemini 帮助您完成当前任务。
不确定如何着手？
探索开发者工具中 AI 协助功能的问题提示建议。试用我们的演示版，或在您自己的网站上试用。
修正图片的宽高比
Make all teaser images always be 16:9
其中一个图片的剪裁方式与其他图片不同？
- 打开 chrome.dev/cinemai/devtools/ 页面，然后打开开发者工具。
- 找到并选择通过观看视频了解详情部分。
- 点击 AI 辅助图标。
- 提示：
Make all teaser images always be 16:9。 - 点击
Apply the suggested change并继续。 - 按钮应居中显示。
修复了溢出问题
How can I make this element visible?
元素不可见？
- 打开 chrome.dev/cinemai/devtools/ 页面，然后打开开发者工具。
- 找到潜水员 img 元素。
- 点击 AI 辅助图标。
- 提示：
How can I make this element visible without scrollbars?。 - 点击
Apply the suggested change并继续。 - 屏幕上应该会显示潜水员。
解读标头
Are there any security headers present?
如需详细了解给定资源的安全标头，请执行以下操作：
- 打开 chrome.dev/cinemai/devtools/ 页面，然后打开开发者工具。
- 在“网络”面板中，选择
v4-chrome.dev.js请求。 - 点击 AI 辅助图标。
- 提示：
Are there any security headers present? - LLM 会说明资源的安全相关标头。
深入探究
观看视频，了解如何在 DevTools 中使用 AI 辅助功能来解决常见的 Web 开发问题。
Chrome 133-135 中的永久性 AI 聊天记录
探索 Chrome 133-135 中的永久性 AI 聊天记录
开发者工具 130-132 版的新变化
观看 Jecelyn、Oliver 和 Matthias 介绍 Chrome 130-132 中的 AI 辅助功能
帮助我们改进！
此功能目前处于实验阶段，将来可能会有调整。它可能会生成不准确或冒犯性信息，这些信息不代表 Google 的观点。请对回答进行投票，以帮助我们改进，并继续提供反馈！