playwright mcp 和 chrome devtools mcp 区别？
Playwright MCP 和 Chrome DevTools MCP 不是竞品——一个负责"开"，一个负责"修"。
- Playwright 做浏览器自动化（干活），DevTools 做性能诊断（找问题）
- Playwright 基于 Accessibility Tree，Token 仅为原始 DOM 的 20-30%
- DevTools 基于 CDP，能拿到网络瀑布、Lighthouse、堆快照等完整运行时数据
- Playwright 支持全平台浏览器；DevTools 仅 Chromium
- DevTools 独有 Trace 自动分析、Lighthouse 审计、V8 堆内存快照
- Playwright 独有 Auto-wait、跨浏览器测试、结构化定位
一句话：日常交互用 Playwright，需要性能/网络排查时切 DevTools。
核心区别：开车 vs 修车
Steve Kinney 有个很精准的比喻：Playwright 负责"开车"（driving），Chrome DevTools 负责"修车"（debugging）。
Playwright MCP 由微软维护，定位是浏览器自动化引擎。它的设计目标是稳定、可靠地完成页面交互——导航、点击、填表、截图。你告诉它"去哪个页 面、点哪个按钮、填什么内容"，它执行，就这么简单。
Chrome DevTools MCP 由 Google 维护，定位是浏览器诊断工具。它暴露的是 Chrome DevTools Protocol（CDP），让你拿到性能 Trace、网络瀑布、V8 堆快照这些开发者才关心的底层数据。它的目标不是"帮你操作页面"，而是"告诉你页面出了什么问题"。
两者不是竞品。买车和买修车工具不冲突。
交互模型的差异，决定 Token 消耗
Playwright 不传截图也不传完整 DOM，它基于页面的 Accessibility Tree（无障碍树）来理解页面结构。
无障碍树只包含语义化元素——按钮、链接、输入框、标题——不包含布局 div、样式信息、脚本逻辑。通常只占原始 DOM 的 20-30%。Agent 拿到的是结构化 ref（如 button "提交"），不是像素坐标，定位是确定性的，同一个元素每次都是同一个 ref。
Chrome DevTools MCP 走 CDP，拿的是完整浏览器运行时状态。一个页面加载下来，网络日志加 DOM 加 Console 输出，轻松几 MB。对 Agent 来说，Token 大量消耗在解析原始数据上。
说白了：Playwright 给 Agent 看"要点"，DevTools 给 Agent 看"全部"。
但这不是 DevTools 设计有问题——当你需要排查"为什么这个请求返回 403"或者"首页 LCP 为什么 5 秒"，只看"要点"找不到根因，必须看"全部"。
独门绝技
两边各有一堆对方做不到的事：
| 能力 | Playwright MCP | Chrome DevTools MCP |
|---|---|---|
| 跨浏览器（Firefox/WebKit/Edge） | ✅ | ❌ |
| Auto-wait 智能等待 | ✅ | ❌ |
| Accessibility Tree 结构化交互 | ✅ | ❌ |
| Performance Trace 自动分析 | ❌ | ✅ |
| Lighthouse 审计（a11y/SEO） | ❌ | ✅ |
| V8 堆内存快照 | ❌ | ✅ |
跨浏览器是 Playwright 的绝对壁垒——如果你需要测 Firefox 或 WebKit，这是唯一选择。Auto-wait 机制也是实际使用中最能提升稳定性的特性：自动等待元素加载、可见、稳定后再操作，几乎杜绝"flaky test"。
性能诊断是 DevTools 的护城河。performance_analyze_insight 能自动分析 Trace 数据输出结构化诊断，相当于把 DevTools Performance 面板的洞察引擎直接暴露给了 Agent。再加上 Lighthouse 审计和 V8 堆快照，这三样东西 Playwright 都没有等价物。
怎么选
如果只能装一个，装 Playwright。 它能覆盖 95% 的日常需求——页面交互、表单填写、数据抓取、E2E 测试。Token 效率高，稳定性好，跨浏览器。
但在以下场景，DevTools 是唯一解：
- 性能排查：页面为什么慢？Trace → Insight 分析 → 定位瓶颈
- 网络调试：哪个请求挂了？请求体、响应体、Timing 一目了然
- 内存泄漏：V8 堆快照前后对比
- Lighthouse：SEO + 无障碍一键审计
最佳实践是两个都装，分清主次。 Steve Kinney 的 Agent "默认用 Playwright，只在需要 Trace 或 Lighthouse 时才切到 DevTools"。这也符合直觉——你不会天天修车，但修的时候得有趁手工具。
References
- Driving vs. Debugging the Browser —— Steve Kinney, 2025