Chrome DevTools MCP 使用指南

Chrome DevTools MCP（全称 Chrome DevTools Model Context Protocol）是 Google 推出的一个开源工具，它允许 AI 编码助手（如 Gemini、Claude、Cursor、Copilot 等）直接控制和检查真实的 Chrome 浏览器实例。通过 MCP 协议，AI 可以像人类开发者一样使用 Chrome DevTools 的强大功能，包括自动化操作网页、调试错误、分析性能等。这解决了传统 AI “盲编”代码的问题，让 AI 能“看到”代码在浏览器中的实际运行效果。

官方项目地址：https://github.com/ChromeDevTools/chrome-devtools-mcp
官方博客介绍：https://developer.chrome.com/blog/chrome-devtools-mcp

主要功能

Chrome DevTools MCP 提供了约 26 个工具，分为几大类：

浏览器自动化：导航页面（navigate_page）、点击元素（click）、填写表单（fill_form）、截图（take_screenshot）、悬停（hover）等。
调试工具：查看控制台消息（list_console_messages）、网络请求（list_network_requests）、执行 JavaScript（evaluate_script）。
性能分析：启动性能追踪（performance_start_trace），获取 Core Web Vitals（如 LCP、CLS、INP）指标，并生成优化建议。
其他：模拟 CPU/网络限速、检查 DOM/CSS 等。

这些工具基于 Puppeteer 实现，确保操作可靠（如自动等待页面加载）。

安装与配置

安装非常简单，使用 npm 包，无需复杂依赖（前提：已安装 Node.js 和 Chrome 浏览器）。

通用安装命令（推荐使用 npx 始终拉取最新版）：

   npx chrome-devtools-mcp@latest

这会启动 MCP 服务器。

在不同 AI 工具中配置：

Gemini CLI：
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest
Claude Code / Cursor / VS Code Copilot：
在配置文件（如 mcp.json 或 settings.json）中添加：
json { "mcpServers": { "chrome-devtools": { "command": "npx", "args": ["chrome-devtools-mcp@latest"] } } }
或者使用命令：
code --add-mcp '{"name":"chrome-devtools","command":"npx","args":["chrome-devtools-mcp@latest"]}'
其他工具（如 Codex、Amp 等）：参考官方 GitHub 的具体客户端配置。配置后，AI 助手即可调用这些工具。首次使用需要浏览器权限确认（Chrome 会弹出对话框允许远程调试）。

可选参数：

--headless：无头模式（后台运行）。
--isolated：使用临时用户数据目录（每次清理）。
--browserUrl：连接已运行的 Chrome 实例。
查看所有选项：npx chrome-devtools-mcp@latest --help

使用示例

在支持 MCP 的 AI 聊天界面中，直接用自然语言描述任务，AI 会自动调用工具。

性能分析：
提示：“分析 https://example.com 的加载性能，并给出优化建议。”
AI 会：导航页面 → 启动性能追踪 → 分析 trace 数据 → 返回 LCP 等指标和建议（如压缩图片、延迟加载脚本）。
调试错误：
提示：“打开 https://example.com，检查控制台错误并修复。”
AI 会：加载页面 → 查看 console → 分析网络请求 → 建议代码修复。
自动化交互：
提示：“去 booking.com 搜索伦敦今晚的酒店。”
AI 会：导航 → 填写表单 → 点击搜索 → 截图结果。
验证代码修复：
生成代码后，提示：“应用这个修复并在浏览器中验证是否生效。”

注意事项与故障排除

权限：首次连接时，Chrome 会提示允许远程调试，点击“允许”。
浏览器启动：服务器会在需要时自动启动 Chrome（显示“Chrome 正在被自动化测试软件控制”）。
常见问题：
Windows 用户：确保 Node.js 版本 ≥ 22。
沙箱/虚拟机问题：参考官方 troubleshooting.md。
无头模式下截图/性能追踪正常工作。
安全：工具仅本地运行，避免恶意使用。
更新：使用 @latest 始终获取最新功能（当前版本持续迭代中）。

Chrome DevTools MCP 标志着 AI 辅助前端开发的重大进步，让 AI 从“猜代码”转向“实测调试”。建议结合 Cursor 或 Claude 等工具体验，效率提升显著！如果有具体使用场景问题，欢迎补充细节。

Chrome DevTools MCP 使用指南