Chrome DevTools MCP — AI代理的浏览器调试工具

AI 编码代理擅长编写代码，但它们对代码在浏览器中运行时的实际情况是”盲”的。控制台错误、布局偏移、网络超时、内存泄漏——这些运行时问题对于只能看到源文件的代理来说是不可见的。

Chrome DevTools MCP 服务器改变了这一点。由 Chrome DevTools 官方团队创建，这个开源的 MCP 服务器为 AI 代理提供了 Chrome DevTools 的全部功能——直接从你的 AI 编码助手中使用。

Chrome DevTools MCP 是什么？#

Chrome DevTools MCP 是一个 Model Context Protocol 服务器，用于桥接 AI 编码代理与真实的 Google Chrome 浏览器实例。它将整个 Chrome DevTools 功能集作为 MCP 工具暴露给代理调用：

• 浏览页面并检查 DOM 可访问性树
• 捕获带有源映射堆栈跟踪的控制台日志
• 监控网络请求和响应
• 记录和分析性能跟踪
• 获取堆快照并调试内存泄漏
• 运行 Lighthouse 审计
• 模拟设备、网络条件和地理位置

在底层，它使用 Puppeteer 和 Chrome DevTools Protocol (CDP) 来控制 Chrome 实例。

安装#

# 通过 npx（无需安装）
npx -y chrome-devtools-mcp@latest

添加到 MCP 客户端配置：

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

可用工具#

该服务器提供 50 多个 MCP 工具，分布在 7 个类别：

导航（6个工具）#

navigate_page, new_page, close_page, list_pages, select_page, wait_for

输入自动化（10个工具）#

click, drag, fill, fill_form, handle_dialog, hover, press_key, type_text, upload_file, click_at

模拟（2个工具）#

emulate, resize_page — 模拟设备、视口、网络条件、CPU、地理位置

调试与分析（8个工具）#

evaluate_script, get_console_message, list_console_messages, lighthouse_audit, take_screenshot, take_snapshot, screencast_start, screencast_stop

网络（2个工具）#

list_network_requests, get_network_request

性能（3个工具）#

performance_start_trace, performance_stop_trace, performance_analyze_insight

内存/堆（12个工具）#

take_heapsnapshot, compare_heapsnapshots, get_heapsnapshot_retaining_paths 等 — 完整的堆分析

代理集成#

Claude Code#

claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest

Cursor#

Cursor 设置 → MCP → 新建 MCP 服务器，粘贴 JSON 配置。

Gemini CLI#

gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest

为什么这很重要#

在 Chrome DevTools MCP 之前，AI 编码代理在前端工作中仅限于静态代码分析。它们可以审查源代码，但看不到浏览器实际渲染的内容，无法捕获运行时控制台错误，无法测量真实性能，也无法验证 UI 修复是否真的有效。

现在，AI 代理可以：

• 编写代码、构建、打开浏览器并验证结果 — 完全自主完成
• 调试运行时问题 — 通过读取控制台输出、网络时序和堆快照
• 审计性能 — 使用 Lighthouse 和跟踪分析
• 跨设备测试 — 使用模拟功能

这闭环了编写代码和在浏览器中验证代码之间的循环——以前每一步都需要人类开发者的能力。

参考资料#

• Chrome DevTools MCP GitHub ↗
• Model Context Protocol ↗