Chrome DevTools MCP - 配置指南

简介

Chrome DevTools MCP 是 Google 官方推出的浏览器自动化工具,基于 Model Context Protocol (MCP) 标准。相比传统的 Playwright 等工具,它在 Token 消耗、执行效率和用户体验上都有显著优势。

💡 核心优势
  • Token 消耗优化:通过强制 JSON 格式返回,Token 消耗减少 95% (25000 → 1500)
  • 执行速度提升:平均速度提升 10 倍 (30秒 → 3秒)
  • 成本降低:整体成本降低约 90%
  • 更好的错误处理:将错误信息返回给 AI 处理,而非直接报错给用户
  • 登录状态持久化:默认保存登录状态,一次登录永久有效

安装配置

根据你使用的开发环境选择对应的安装方式。整个安装过程仅需 1 分钟。

📦 Claude Code 用户

在终端执行以下命令:

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

📦 Codex Code 用户

在终端执行以下命令:

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

📦 Cursor 等 IDE 用户

在 settings.json 文件中添加以下配置:

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

登录配置

💡 重要说明

Chrome DevTools MCP 默认保存登录状态,一次配置后即可长期使用,无需重复登录。这是相比 Playwright 的一个重要优势。