CDP(Chrome DevTools Protocol)
Chrome 浏览器在启动时可以开放一个 WebSocket 调试端口,外部程序连接后即可通过 JSON 消息控制浏览器——这套协议就是 CDP。Chrome DevTools 面板本身也是基于 CDP 实现的。
启用方式
chrome --remote-debugging-port=9222连接后通过 ws://localhost:9222 发送 JSON 消息与浏览器交互。
核心能力域
| 域 | 能力 |
|---|---|
| Network | 拦截请求、mock 响应、查看 HAR 流量 |
| DOM | 读写页面结构、监听 DOM 变化 |
| Runtime | 在页面上下文中执行任意 JavaScript |
| Page | 截图、导出 PDF、页面导航、生命周期事件 |
| Debugger | 断点、调用栈、单步执行 |
| Performance | CPU/内存 profiling、火焰图 |
| Target | 管理多 tab、多 iframe、多 worker |
生态关系
CDP(底层协议)
├── Chrome DevTools(浏览器内置调试面板)
├── Playwright / Puppeteer(封装 CDP 的自动化库)
├── Lighthouse(性能审计)
└── chrome-devtools-mcp(将 CDP 包装为 MCP 工具供 LLM 使用)
Playwright 和 Puppeteer 本质上都是对 CDP 的高层封装。