ChromeDevTools/chrome-devtools-mcp
chrome-devtools-mcp 学习卡
一、一句话定位
让编码 Agent 通过 MCP 控制并检查真实 Chrome，复用 DevTools 做自动化、调试与性能分析。
二、核心技术/架构亮点
1. MCP Server：Claude、Cursor、Copilot 等可直接调用；另提供 CLI。
2. Puppeteer 驱动：可靠浏览器自动化，自动等待动作结果。
3. DevTools 能力：录制性能 trace、网络分析、截图、控制台 source-mapped 堆栈。
4. 性能增强：可拉取 CrUX 真实用户数据，支持 `--no-performance-crux` 关闭。
5. 灵活运行：支持 `--slim`、`--headless`、隔离模式，可连已有 Chrome/Android；统计默认开启可 opt-out。
三、适用场景与目标用户
AI 编码助手用户、Web 开发者、性能/QA 工程师：网页自动化、深度调试、性能诊断。Agent 工具开发者可将其作为浏览器子代理底座。注意：浏览器数据会暴露给 MCP 客户端，官方仅保证 Chrome/Chrome for Testing。
四、可动手动作
1. MCP 客户端配置：`command: npx`，`args: ["-y","chrome-devtools-mcp@latest"]`。
2. 试用极简模式：追加 `--slim --headless`。
3. 发提示：检查 `https://developers.chrome.com` 性能，观察自动开浏览器并录 trace。
4. clone `github.com/ChromeDevTools/chrome-devtools-mcp`，读 `docs/tool-reference`、`design-principles`，借鉴 MCP 工具编排。
五、学习优先级
P0（本周动手）。理由：仅需 npx 配置即可验证 MCP+DevTools 在 Agent 浏览器自动化中的关键范式，成本低、收益高。⌂