Chrome DevTools MCP

一、什么是 Chrome DevTools MCP?

Chrome DevTools MCP 是 Google Chrome 官方推出的 Model Context Protocol (MCP) 服务器,它让 AI 编程助手(如 Claude、Cursor、Copilot 等)能够控制和检查实时运行的 Chrome 浏览器。通过这个工具,AI 可以获得 Chrome DevTools 的全部能力,实现可靠的自动化测试、深度调试和性能分析。

简单来说，Chrome DevTools MCP 是一个连接 AI IDE 和 Chrome 浏览器的桥梁。它通过 Model Context Protocol（MCP）标准，让我们可以在 IDE 中直接控制浏览器的各种操作，像使用 DevTools 一样。

核心优势

• 性能洞察:使用 Chrome DevTools 录制性能追踪,提取可操作的性能优化建议
• 高级浏览器调试:分析网络请求、截图、检查浏览器控制台
• 可靠的自动化:基于 Puppeteer 实现 Chrome 自动化操作,自动等待操作结果

二、配置

node要求20.19以上

// window
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "c:\\Windows\\System32\\cmd.exe",
      "args": ["cmd /c npx -y chrome-devtools-mcp@latest"],
      "enabled": true
    }
  }
}

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

安装

三、核心功能

• 打开网页
• 点击按钮和元素
• 读取 DOM/CSS 结构
• 捕获性能指标
• 读取控制台日志
• 分析网络请求
• 截取页面截图
• 等等更多功能

功能列表

1.打开页面

打开页面

2.性能分析

image.png