AI 助理
将 Gemini 直接集成到 Chrome 开发者工具中，从而提升开发工作流的效率。借助 AI 技术的辅助，简化样式、性能、网络和来源的调试。
运行首次提示
运行下方互动教程中的示例提示，体验 Chrome 开发者工具中的 Gemini。
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 协助功能的问题提示建议。试用我们的演示版，或在您自己的网站上试用。
修正图片的宽高比
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 会说明资源的安全相关标头。
创建 bug 报告
Write a detailed bug report for this network error, include title, summary, steps to reproduce and expected vs. actual results.
出了什么问题吗？快速创建详细的 bug 报告。
- 为出现网络错误的网页打开开发者工具。
- 在“网络”面板中，选择失败的请求。
- 点击 AI 辅助图标。
- 提示：
Write a detailed bug report for this network error, include title, summary, steps to reproduce and expected vs. actual results. - LLM 将生成一份 bug 报告，您可以直接将其复制到问题跟踪器中。
深入探究
观看视频，了解如何在 DevTools 中使用 AI 辅助功能来解决常见的 Web 开发问题。
AI 辅助调试 - DevToolTips
探索 Chrome 开发者工具的 AI 辅助调试功能！
开发者工具 130-132 版的新变化
与 Matthias 一起探索 Chrome 139-141 中的“网络”面板功能、基准和 CSS 更新以及 AI 创新！
帮助我们改进！
此功能目前处于实验阶段，将来可能会有调整。它可能会生成不准确或冒犯性信息，这些信息不代表 Google 的观点。请对回答进行投票，以帮助我们改进，并继续提供反馈！