发布时间：2025 年 9 月 23 日
我们今天推出了新的 Chrome 开发者工具模型上下文协议 (MCP) 服务器的公开预览版，将 Chrome 开发者工具的强大功能带给 AI 编码助理。
编码代理面临一个根本性问题：它们无法看到自己生成的代码在浏览器中运行时实际执行的操作。他们实际上是在蒙着眼睛编程。
Chrome 开发者工具 MCP 服务器改变了这种情况。AI 编码助理可以直接在 Chrome 中调试网页，并受益于开发者工具的调试功能和性能洞见。这有助于他们更准确地识别和修复问题。
亲自体验其运作方式：
什么是 Model Context Protocol (MCP)？
Model Context Protocol (MCP) 是一种开放源代码标准，用于将大语言模型 (LLM) 连接到外部工具和数据源。Chrome 开发者工具 MCP 服务器可为 AI 代理添加调试功能。
例如，Chrome DevTools MCP 服务器提供了一种名为 performance_start_trace 的工具。当需要调查网站的性能时，LLM 可以使用此工具启动 Chrome、打开您的网站，并使用 Chrome 开发者工具记录性能轨迹。然后，LLM 可以分析性能轨迹，以提出潜在的改进建议。借助 MCP 协议，Chrome 开发者工具 MCP 服务器可以为您的编码代理带来新的调试功能，使其能够更好地构建网站。
如果您想详细了解 MCP 的运作方式，请参阅 MCP 文档。
您可以使用它做什么？
以下是一些示例提示，您可以在自己选择的 AI 助理（例如 Gemini CLI）中试用。
实时验证代码变更
使用 AI 代理生成修复，然后使用 Chrome 开发者工具 MCP 自动验证解决方案是否按预期运行。
建议尝试的提示：
Verify in the browser that your change works as expected.
诊断网络和控制台错误
让您的代理能够分析网络请求以发现 CORS 问题，或检查控制台日志以了解某项功能未按预期运行的原因。
建议尝试的提示：
A few images on localhost:8080 are not loading. What's happening?
模拟用户行为
导航、填写表单和点击按钮，以重现 bug 并测试复杂的用户流程，同时检查运行时环境。
建议尝试的提示：
Why does submitting the form fail after entering an email address?
调试实时样式和布局问题
让 AI 代理连接到实时网页，检查 DOM 和 CSS，并根据浏览器中的实时数据获取具体建议，以解决复杂的布局问题，例如元素溢出。
建议尝试的提示：
The page on localhost:8080 looks strange and off. Check what's happening there.
自动执行性能审核
指示 AI 代理运行性能轨迹，分析结果，并调查特定的性能问题，例如 LCP 数值过高。
建议尝试的提示：
Localhost:8080 is loading slowly. Make it load faster.
如需查看所有可用工具的列表，请参阅我们的工具参考文档。
开始使用
如需试用此功能，请将以下配置条目添加到您的 MCP 客户端：
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["chrome-devtools-mcp@latest"]
}
}
}
如需检查其是否正常运行，请在编码代理中运行以下提示：
Please check the LCP of web.dev.
如需了解详情，请查看 GitHub 上的 Chrome 开发者工具 MCP 文档。
参与其中
我们正在逐步构建 Chrome 开发者工具 MCP，首先推出的是我们今天发布的公开预览版。我们正在积极征求您和社区的反馈，以便确定接下来应添加哪些功能。无论您是使用 AI 编码助理的开发者，还是构建下一代 AI 开发工具的供应商，您的真知灼见都将非常宝贵。如果发现任何缺失或无法正常运行的内容，请在 GitHub 上提交问题。