Chrome DevTools MCP 项目介绍

Chrome DevTools MCP 项目介绍

项目定位

Google 官方出品的 MCP（Model Context Protocol）服务器，让 AI 编码 Agent（如 Claude Code、Cursor、Copilot、Codex）能够直接控制与检测运行中的 Chrome 浏览器——从页面操作到性能分析，从网络请求检查到内存泄漏检测。

核心能力

• 浏览器自动化：导航、点击、填写表单、键盘输入、文件上传、拖拽、对话处理
• 性能分析：Chrome DevTools Trace 录制、Lighthouse 审计、Core Web Vitals（LCP/INP/CLS）提取、CrUX 真实用户数据对比
• 网络调试：请求列表、请求详情、请求体/响应体保存
• 调试工具：截图、无障碍快照（Accessibility Tree）、JavaScript 执行、控制台消息检查
• 设备模拟：CPU 节流、网络节流、地理位置、User-Agent、颜色方案、视口与设备像素比
• 内存检测（实验性）：堆快照采集、类节点聚合、保留链分析
• 扩展调试（实验性）：Chrome 扩展安装、卸载、重载、触发动作
• Slim 模式：仅暴露 3 个核心工具（导航、截图、脚本执行），适用于轻量场景
• 并发会话：通过 --experimentalPageIdRouting 支持多 Agent 并发操作不同标签页

技术栈

类别	技术
语言	TypeScript (ESM)
运行时	Node.js LTS (20.19+ / 22.12+ / 23+)
浏览器自动化	Puppeteer-core + Chrome DevTools Protocol (CDP)
MCP 协议	@modelcontextprotocol/sdk v1.29.0
性能审计	Lighthouse（内嵌打包，与 DevTools 前端集成）
打包工具	Rollup（带许可证校验、第三方依赖隔离）
DevTools 前端	chrome-devtools-frontend npm 包
CLI	yargs（自动生成 CLI 参数解析）
测试	Node.js node:test 内置测试框架

架构概览

快速体验

最简安装（MCP 方式）

# 在 Claude Code 中直接添加
claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest

最简安装（Plugin 方式）

# Claude Code 插件安装（MCP + Skills）
/plugin install chrome-devtools-mcp@chrome-devtools-plugins

验证安装

在 MCP Client 中发送：

Check the performance of https://developers.chrome.com

MCP Client 将打开浏览器并录制性能 Trace，返回 Core Web Vitals 报告。

教程导读

本教程分为 AI 应用通用知识 和 编程核心技术 两大系列：

AI 系列（/ai/ 章节）

从 Chrome DevTools MCP 的实践出发，学习如何为 AI Agent 设计 MCP 工具、优化 Token 消耗、实现自修复错误与渐进式复杂度。

章节	主题	引用 Common
01	MCP 工具设计原则	MCP 协议
02	Token 优化与响应策略	首次覆盖（新建 common）
03	无障碍树驱动的 UI 自动化	首次覆盖（新建 common）
04	Agent 浏览器集成模式	首次覆盖（新建 common）

Dev 系列（/dev/ 章节）

聚焦 Chrome DevTools MCP 的工程实践：架构设计、工具系统、并发安全、打包策略等。

章节	主题
01	三层架构：Server → Handler → Context → Page
02	工具系统设计：ToolDefinition + ToolHandler + McpResponse
03	Mutex FIFO 顺序执行模型
04	分类 Feature Flag 与按需启用
05	Slim 模式：最小工具集设计
06	安全：Root-Based 路径验证与遥测设计
07	Rollup 打包与许可证管理