博客摘要：适用于您 AI 代理的 Chrome DevTools (MCP)

Chrome DevTools 模型上下文协议 (MCP) 服务器的公开预览版现已发布。

此举旨在将 Chrome DevTools 的强大功能赋予 AI 编码助手，从而提升其开发能力。

编码代理（AI）面临一个根本问题：它们无法看到自己生成的代码在浏览器中实际运行的效果。

这相当于让它们“蒙着眼睛”编程，极大地限制了其效能。

MCP 是一种开源标准，用于将大语言模型 (LLMs) 与外部工具和数据源连接。

新发布的 Chrome DevTools MCP 服务器，为 AI 代理增加了直接的网页调试能力。

它通过赋予 AI 调试和性能洞察力，显著提高了识别和修复问题的准确性。

工作原理示例：

当要求 AI 调查网站性能时，LLM 可以使用名为 performance_start_trace 的工具来启动 Chrome、打开网站并记录性能跟踪数据。随后，LLM 会分析这些数据以提出改进建议。

1. 实时验证代码变更：

   AI 代理生成修复方案后，可自动使用 DevTools MCP 验证解决方案是否按预期工作。

2. 诊断网络和控制台错误：

   授权代理分析网络请求以发现 CORS 问题，或检查控制台日志以理解功能为何异常。

3. 模拟用户行为：

   通过导航、填写表单和点击按钮来复现错误，同时检查运行时环境，以测试复杂的用户流程。

4. 调试实时样式和布局问题：

   AI 代理可连接到实时页面，检查 DOM 和 CSS，并根据浏览器的实时数据为复杂的布局问题（如元素溢出）提供具体修复建议。

5. 自动化性能审计：

   指示 AI 代理运行性能跟踪，分析结果，并调查特定的性能问题，例如过高的 LCP (最大内容绘制) 指标。

要尝试此功能，请将以下配置条目添加到您的 MCP 客户端中：

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["chrome-devtools-mcp@latest"]
    }
  }
}

之后，可以在您的编码代理（如 Gemini CLI）中运行以下指令进行测试：

Please check the LCP of web.dev.

Chrome DevTools MCP 目前正处于增量构建阶段，从今天发布的公开预览版开始。

开发团队正积极寻求开发者和社区的反馈，以确定下一步要添加的功能。 如果遇到任何问题，可以在其 GitHub 仓库中提交 issue。