发布时间：2025 年 9 月 23 日
我们今天发布了新的 Chrome 开发者工具 Model Context Protocol (MCP) 服务器的公开预览版，将 Chrome 开发者工具的强大功能引入 AI 编码助手。
编码智能体面临一个基本问题：它们无法看到自己生成的代码在浏览器中运行时实际执行的操作。它们实际上是在蒙着眼睛编程。
Chrome 开发者工具 MCP 服务器改变了这一点。AI 编码助手可以直接在 Chrome 中调试网页，并受益于开发者工具的调试功能和性能洞见。这提高了它们在识别和修复问题时的准确性。
请亲自了解其工作原理：
什么是 Model Context Protocol (MCP)？
Model Context Protocol (MCP) 是一种开放源代码 标准，用于将大语言模型 (LLM) 连接到外部工具和数据 源。Chrome 开发者工具 MCP 服务器为您的 AI 智能体添加了调试功能。
例如，Chrome 开发者工具 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 上提交问题。