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 录制性能追踪，提取可操作的性能优化建议
• 高级浏览器调试: 分析网络请求、截图、检查浏览器控制台
• 可靠的自动化: 基于 Puppeteer 实现 Chrome 自动化操作，自动等待操作结果

工作原理

Chrome DevTools MCP 充当 AI 助手和 Chrome 浏览器之间的桥梁。通过这个桥梁，AI 可以自主完成以下操作：

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

安装与配置

基本安装

Chrome DevTools MCP 已发布到 npm，可以通过以下方式使用：

# 直接使用 npx 运行 (推荐)
npx chrome-devtools-mcp@latest

配置说明

具体配置请参考官方文档。MCP 服务器会在 MCP 客户端首次使用需要浏览器的工具时自动启动浏览器，仅仅连接到 Chrome DevTools MCP 服务器不会自动启动浏览器。

核心功能详解

本质是 Tool Call 能力，以下是部分常用指令示例：

1. 列出页面

   • 命令：chrome-devtools - list_pages()
   • 描述：获取当前打开的所有页面列表

2. 截图

   • 命令：chrome-devtools - take_screenshot(fullPage: true)
   • 描述：截取完整页面截图

3. 其他操作

   • 支持点击元素、读取控制台日志、分析网络请求等更多功能