编程代理面临一个根本性问题：它们无法看到自己生成的代码在浏览器中实际运行的效果。它们实际上是在蒙着眼睛编程。
Chrome DevTools MCP 服务器改变了这一现状。AI编程助手现在能够直接在 Chrome 中调试网页，并从 DevTools 的调试功能和性能洞察中获益。这提高了它们在识别和修复问题时的准确性。
亲自体验它是如何工作的：
模型上下文协议（MCP）是一个开源标准，用于连接大型语言模型（LLM）与外部工具和数据源。Chrome DevTools MCP 服务器为你的AI代理添加了调试能力。
performance_start_trace 的工具。当被要求调查你的网站性能时，LLM 可以使用这个工具来启动 Chrome，打开你的网站，并使用 Chrome DevTools 记录性能跟踪。然后 LLM 可以分析性能跟踪来建议潜在的改进方案。通过 MCP 协议，Chrome DevTools MCP 服务器可以为你的编程代理带来新的调试功能，使其在构建网站方面表现更出色。
如果你想了解更多关于 MCP 工作原理的信息，请查看 MCP 文档。
以下是一些示例提示，你可以在你选择的AI助手（如 Gemini CLI）中尝试。
使用你的AI代理生成修复方案，然后通过 Chrome DevTools MCP 自动验证解决方案是否按预期工作。
让你的代理分析网络请求以发现CORS问题，或检查控制台日志来理解功能为什么不能按预期工作。
导航、填写表单和点击按钮来重现bug并测试复杂的用户流程——同时检查运行时环境。
要求你的AI代理连接到实时页面，检查DOM和CSS，并基于浏览器的实时数据获得修复复杂布局问题（如元素溢出）的具体建议。
指导你的AI代理运行性能跟踪，分析结果，并调查特定的性能问题，如高LCP数值。
查看我们的工具参考文档，获取所有可用工具的列表。
要尝试这个功能，请将以下配置条目添加到你的MCP客户端：
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["chrome-devtools-mcp@latest"]
}
}
}要检查是否工作正常，在你的编程代理中运行以下提示：
更多详情，请查看 GitHub 上的 Chrome DevTools MCP 文档。
我们正在逐步构建 Chrome DevTools MCP，从今天发布的公开预览版开始。我们积极寻求你和社区的反馈，了解我们接下来应该添加哪些功能。无论你是使用AI编程助手的开发者，还是构建下一代AI开发工具的供应商，你的见解都将非常宝贵。如果有什么缺失或不工作的地方，请在 GitHub 上提交问题。