CDP 是什么：前端人应该知道的浏览器远程控制协议

点击上方 前端Q关注公众号回复加群加入前端Q技术交流群你每天按 F12 打开 Chrome DevTools看 Network、查 DOM、调样式——但你有没有想过一个问题DevTools 这个面板是怎么拿到浏览器内部数据的它跟浏览器是两个独立进程凭什么能读到 DOM 树、拦截网络请求、甚至执行 JS答案就是今天要讲的CDPChrome DevTools Protocol。先搞清楚一个问题为什么需要 CDP我们先不讲 CDP 是什么先讲没有它会怎样。假设你想写一个程序自动打开浏览器、访问某个页面、填个表单、点个按钮、截个图。没有 CDP 的时代你的选择很有限方案问题模拟鼠标键盘AutoIt、xdotool不稳定分辨率变了就废了拿不到页面内部数据注入 JS 脚本油猴、Chrome 扩展只能读页面内容没法控制浏览器本身开标签页、截图、抓网络请求用 Selenium WebDriver要装 Driver、启动慢、中间隔了一层 HTTP 转发延迟高核心矛盾是浏览器是一个封闭的黑盒外部程序没有一个标准化的方式去操控它。CDP 就是 Chrome 提供的那个标准化操控接口。CDP 到底是什么一句话CDP 是 Chrome 暴露出来的一套远程控制 API让外部程序可以通过网络协议操控浏览器的一切。打个比方Chrome 就像一台车。你坐在车里可以踩油门、打方向盘就像你手动操作浏览器。CDP 就是给这台车装了一套远程遥控系统——你不在车里也能通过遥控器让车启动、转弯、停车、拍照。具体来说CDP 提供了这些能力你想做什么CDP 对应的能力打开一个网页Page.navigate读取页面 DOMDOM.getDocument在页面上执行一段 JSRuntime.evaluate截取页面截图Page.captureScreenshot拦截/修改网络请求Fetch.enableFetch.requestPaused模拟用户点击Input.dispatchMouseEvent模拟键盘输入Input.dispatchKeyEvent获取性能指标Performance.getMetrics模拟手机屏幕Emulation.setDeviceMetricsOverride监听 console.log 输出Runtime.consoleAPICalled事件设置断点调试Debugger.setBreakpoint注意这不是调用浏览器的某个功能而是几乎可以控制浏览器做任何事——你在 DevTools 里能做的CDP 都能做而且可以用代码自动化。CDP、Puppeteer、无头浏览器到底什么关系很多人会把 CDP、Puppeteer、无头浏览器搞混觉得它们是同一类东西在竞争。其实它们是三个不同层次的概念概念是什么类比CDP通信协议——定义了浏览器和外部程序之间怎么说话相当于 HTTP 协议PuppeteerNode.js SDK——把 CDP 命令封装成好用的 API相当于 axios基于 HTTP 封装Headless ChromeChrome 的一种运行模式——没有可见窗口但功能完全一样相当于没有显示器的电脑它们的层级关系是这样的你写的代码↓ 调用Puppeteer / PlaywrightSDK 层封装了友好的 API↓ 翻译成CDP 命令协议层JSON over WebSocket↓ 发送给Chrome运行层可以有头也可以无头同一件事用 Puppeteer 和 Raw CDP 写出来差距很大javascript// 用 Puppeteer三行搞定const page await browser.newPage();await page.goto(https://example.com);await page.screenshot({ path: screenshot.png });javascript// 用 Raw CDP自己拼 JSON、管 WebSocket、处理异步ws.send(JSON.stringify({id: 1, method: Page.navigate,params: { url: https://example.com }}));// 等 Page.loadEventFired 事件回来...ws.send(JSON.stringify({id: 2, method: Page.captureScreenshot,params: { format: png }}));// 拿到 base64 再自己写文件...Puppeteer 做的事情就是帮你把 CDP 命令的拼装、发送、等待、错误处理全包了。所以不存在CDP 和 Puppeteer 选哪个的问题。Puppeteer 底层就是 CDP你用 Puppeteer 就是在用 CDP只是不用自己拼 JSON。同理Playwright 在操控 Chromium 时底层也走 CDP只是它额外支持了 Firefox 和 WebKit。对比维度Raw CDPPuppeteerPlaywright本质协议本身CDP 的 Node.js 封装多浏览器自动化框架Chromium 部分走 CDP灵活性最高能做任何事高覆盖了 90% 场景高且跨浏览器上手成本高要自己管 WebSocket 和 JSON低API 友好低API 友好浏览器支持仅 Chromium 系仅 Chromium 系Chromium Firefox WebKit典型用户底层工具开发者、AI Agent 框架爬虫、自动化脚本、截图服务E2E 测试、CI/CD 流水线CDP 是怎么工作的CDP 的通信机制很简单两步就能理解。▎第一步建立连接启动 Chrome 时加一个参数告诉它开放远程控制端口bash# macOS/Applications/Google Chrome.app/Contents/MacOS/Google Chrome --remote-debugging-port9222# Windowschrome.exe --remote-debugging-port9222这时候 Chrome 会在localhost:9222监听。你可以用 HTTP 请求查看当前打开的标签页bashcurl http://localhost:9222/json返回的 JSON 里每个标签页都有一个webSocketDebuggerUrl——这就是你跟这个标签页对话的 WebSocket 地址。▎第二步发命令、收结果通过 WebSocket 连上标签页后通信格式就是 JSON你发一条命令json{id: 1,method: Page.navigate,params: { url: https://example.com }}浏览器返回结果json{id: 1,result: { frameId: ABC123 }}浏览器还会主动推事件给你json{method: Page.loadEventFired,params: { timestamp: 1234567.89 }}就这样——HTTP 查标签页 → WebSocket 发命令收结果整个 CDP 的通信机制就这两步。▎CDP 的能力按域分组CDP 把几百个命令和事件按功能分成了不同的域Domain域管什么典型场景Page页面导航、生命周期、截图打开页面、截图、监听加载完成DOMDOM 树读写获取节点、查询选择器Network网络请求拦截和监控抓包、Mock 接口、分析请求耗时RuntimeJS 执行环境在页面上下文里执行任意 JSInput键盘和鼠标模拟自动填表单、点按钮Debugger断点和调试设置断点、单步执行Performance性能数据采集获取 FPS、内存、渲染耗时Emulation设备和环境模拟模拟手机屏幕、地理位置、网络限速每个域需要先enable才能收到事件。比如你想监听网络请求必须先发Network.enable。谁在用 CDP你知道的工具基本都在用CDP 不是一个小众协议。你日常用的大部分浏览器相关工具底层都在走 CDP。▎开发调试类工具怎么用 CDPChrome DevToolsF12CDP 的原生客户端你在 DevTools 里的每一次操作都是 CDP 命令VS Code 调试 Node.js走 V8 Inspector ProtocolCDP 的 V8 子集Chrome Remote Debugging手机连 USB 调试页面走的就是 CDPLighthouse通过 CDP 采集性能指标、跑审计规则▎自动化测试类工具和 CDP 的关系PuppeteerGoogle 官方出品直接封装 CDP是最薄的一层 SDKPlaywright微软出品Chromium 部分走 CDPFirefox/WebKit 走各自的协议Cypress部分功能通过 CDP 实现网络拦截、截图等Selenium 4新增了 CDP 支持可以直接发 CDP 命令▎AI Agent 类2025-2026 爆发工具Stars怎么用 CDPBrowser-Use78,000AI Agent 通过 CDP 读取 DOM、点击、输入2025 年从 Playwright 切换到 Raw CDPChrome DevTools MCP30,000Google 官方 MCP 服务让 Cursor/Claude 通过 CDP 调试网页Playwright MCP29,000微软出品让 AI 编辑器通过 CDP 操控浏览器做测试agent-browser23,500Vercel 出品108 命令的浏览器自动化 CLI底层走 CDP▎其他工具怎么用 CDPElectron 应用VS Code、Slack、Discord本身基于 Chromium可以开 CDP 端口被外部控制Chrome Headless无头模式 CDP 服务器端的浏览器自动化各种网页截图服务后端启动 Headless Chrome通过 CDP 截图生成 PDF看到了吧——从你每天用的 DevTools到 CI 里跑的 E2E 测试到现在最火的 AI 浏览器自动化CDP 是它们共同的底层协议。为什么 CDP 突然变得更重要了CDP 存在很多年了但 2025-2026 年它被推到了聚光灯下。原因只有一个AI Agent 需要一个标准接口来看到和操控浏览器。以前CDP 的用户主要是 DevTools 和自动化测试工具。现在AI Agent 成了最大的新用户群。对比一下就很清楚维度以前人操控浏览器现在AI 操控浏览器操作方式手动点击、手动输入通过 CDP 发命令读取页面眼睛看通过 CDP 获取 DOM / 截图调试手动开 DevTools 看AI 通过 CDP 自动检查 Console、Network验证结果人看一遍确认没问题AI 截图 DOM 比对自动验证三个标志性事件Browser-Use从 Playwright 切换到 Raw CDP——因为直连 CDP 更快、更灵活Google 推出 Chrome DevTools MCP Server——官方认可 AI Agent 通过 CDP 操控浏览器Chrome 146 内置 AI Agent 支持——在 DevTools 设置里直接开启 MCP不需要命令行参数实战用 Node.js 直连 CDP不用任何框架几十行代码就能操控浏览器javascriptconst WebSocket require(ws);asyncfunctionmain() {const res await fetch(http://localhost:9222/json);const tabs await res.json();const ws newWebSocket(tabs[0].webSocketDebuggerUrl);let id 0;functionsend(method, params {}) {returnnewPromise(resolve {const msgId id;ws.send(JSON.stringify({ id: msgId, method, params }));ws.on(message, function handler(data) {const msg JSON.parse(data);if (msg.id msgId) {ws.removeListener(message, handler);resolve(msg.result);}});});}ws.on(open, async () {// 打开页面awaitsend(Page.navigate, { url: https://example.com });await new Promise(r setTimeout(r, 2000));// 执行 JS 获取标题const { result } awaitsend(Runtime.evaluate, {expression: document.title});console.log(页面标题:, result.value);// 截图保存const { data } awaitsend(Page.captureScreenshot, { format: png });require(fs).writeFileSync(screenshot.png, Buffer.from(data, base64));console.log(截图已保存);ws.close();});}main();这段代码做了三件事打开页面 → 读取标题 → 截图保存。没有任何额外依赖就是 HTTP WebSocket JSON。理解了这段代码你就理解了 Puppeteer 和 Playwright 的核心原理——它们只是在这个基础上加了更友好的 API 和错误处理。CDP 工具选型指南基于 CDP 的工具已经形成了清晰的分层从底层到上层层工具适合谁什么时候用底层协议Raw CDP需要最大灵活性的开发者自定义集成、需要登录态、拦截网络SDK 封装Puppeteer只做 Chrome 自动化的场景爬虫、截图服务、Chrome-only 测试跨浏览器 SDKPlaywright需要跨浏览器的团队E2E 测试、CI/CD 流水线AI Agent 接口Chrome DevTools MCP / Playwright MCPAI 编辑器和 Agent 框架Cursor/Claude 调试、AI 自动测试AI Agent 框架Browser-Use / agent-browser做 AI 浏览器自动化产品AI 自动操控网页完成复杂任务▎一个关键区别Session 隔离连接方式能访问你的登录态吗原因Raw CDP 直连能用的是 Chrome 真实的 Cookieagent-browser --cdp 9222能连到 Chrome 默认上下文Playwright / Puppeteer 默认模式不能自动创建隔离的 browserContext如果你想让 AI Agent 访问已登录的后台必须用 Raw CDP 或--cdp模式。如果你想要安全隔离用 Playwright/Puppeteer 默认模式就行。在 DevTools 里亲手体验 CDP最后推荐你打开 Chrome 自带的 Protocol Monitor亲眼看看 CDP 命令长什么样打开 DevToolsF12Cmd Shift PMac或Ctrl Shift PWin打开命令面板输入Protocol Monitor并回车随便操作页面——你会看到 CDP 命令在面板里不断滚动你还可以在 Protocol Monitor 底部的输入框直接发命令比如输入Page.captureScreenshot就能给当前页面截图。这个体验能让你直观感受到你在 DevTools 里的每一次点击背后都是一条 CDP 命令。小结问题答案CDP 是什么Chrome 内置的远程控制协议外部程序通过 HTTP WebSocket JSON 操控浏览器为什么需要它浏览器是封闭黑盒CDP 提供了标准化的操控入口怎么工作的HTTP 管标签页、WebSocket 发命令收结果、能力按域分组谁在用DevTools、Puppeteer、Playwright、Lighthouse、Browser-Use、Chrome DevTools MCP...为什么现在更重要AI Agent 需要看到和操控浏览器CDP 是唯一的标准接口一句话总结CDP 就是浏览器的 API。以前只有 DevTools 在用现在 AI Agent 也在用。作为前端开发者理解 CDP 能帮你看懂 Puppeteer/Playwright 的设计也能帮你在 AI 时代更好地做浏览器自动化。可进一步阅读▸Chrome DevTools Protocol 官方文档▸Chrome DevTools MCP for AI Agent▸Protocol Monitor 使用指南▸Browser-Use: AI 操控浏览器往期推荐Multi-Agent Teams让多个专家 Agent 像团队一样协作AI Agent 是怎么想一步做一步的拆解 ReAct 模式从零开始用 LangChain.js 构建你的第一个 Tool-Calling Agent最后点个在看支持我吧