Chrome DevTools MCP教程：让AI编程助手直接调试浏览器

📅 2026-08-29 · 🏷️ MCP · 浏览器自动化 · AI编程

chrome-devtools-mcp是什么？

这是 Chrome DevTools 团队官方推出的 MCP 服务器，把 DevTools 的能力（页面导航、点击、截图、性能追踪、网络请求、控制台日志）暴露给 AI 编码代理。简单说：你的 Claude Code、Cursor 不再只能"盲改代码"，而是能真正打开浏览器、看到页面、验证改动效果。

50k+ star 的热度说明一件事——"AI 写完代码自己验证"已经从愿景变成了标配工作流。

标准 MCP 配置（通用）

任何支持 MCP 的客户端都能用这份配置：

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

不想上传使用统计的话，在 args 里加 --no-usage-statistics：

"args": ["-y", "chrome-devtools-mcp@latest", "--no-usage-statistics"]

各客户端安装命令

Claude Code

# MCP 方式
claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest

# 插件方式（MCP + Skills 一起装，推荐）
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
/plugin install chrome-devtools-mcp@chrome-devtools-plugins

装完重启 Claude Code，用 /skills 确认技能加载成功。

Codex

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

Windows 11 用户注意：在 .codex/config.toml 里配置 Chrome 安装路径并调大 startup_timeout_ms，避免启动超时。

Cursor

打开 Cursor Settings → MCP → New MCP Server，粘贴上面的标准配置即可。

Gemini CLI

# 项目级
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest
# 全局
gemini mcp add -s user chrome-devtools npx chrome-devtools-mcp@latest
# 或以扩展形式安装（MCP+Skills）
gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp

VS Code / Copilot

命令面板（Ctrl+Shift+P）运行 Chat: Install Plugin From Source，粘贴仓库名 ChromeDevTools/chrome-devtools-mcp 即可，MCP 和技能一次装齐。

能干什么：典型工作流

能力	对AI代理的意义
页面导航与点击	自己打开开发环境验证 UI 改动
性能追踪（trace）	定位慢加载、长任务，给出优化建议
网络请求检查	发现 404/500 接口、CORS 错误
控制台日志读取	直接看到 JS 报错并修复
截图对比	改版前后视觉验证

举例，你可以直接对 Claude Code 说："用 chrome-devtools 打开 localhost:5173，点击登录按钮，把控制台报错修掉。"代理会自己完成整条链路。

想系统了解 MCP 协议本身，看MCP协议入门教程。如果需要更复杂的网页爬取与自动化编排，Browser-Use浏览器自动化教程是很好的补充。