Chrome DevTools Protocol（CDP）分享-Day36

📌 一句话定义

CDP 是 Chrome 浏览器内置的远程调试协议，通过 WebSocket + JSON-RPC 实现外部程序对浏览器的完全控制------它就是按下 F12 后，DevTools 与浏览器之间"对话"的那套语言。

基本信息	内容
全称	Chrome DevTools Protocol
协议版本	1.3（当前稳定版）
通信方式	WebSocket（全双工）
数据格式	JSON-RPC 2.0
命令域数量	120+ 个 Domain
原始命令数	133+ 条
适用浏览器	Chrome、Edge、Opera、Brave 等所有 Chromium 内核
官方文档	https://chromedevtools.github.io/devtools-protocol/

一、CDP 是什么？为什么重要？

1.1 一个直觉类比

当你按下 F12 打开 Chrome DevTools 时：

你在 Elements 面板查看 DOM 树 → 底层调用的是 DOM.getDocument
你在 Network 面板看请求瀑布图 → 底层监听的是 Network.requestWillBeSent
你在 Console 面板执行 JS → 底层调用的是 Runtime.evaluate
你在 Performance 面板录制性能 → 底层调用的是 Tracing.start

DevTools 本身就是 CDP 的第一个客户端。 你通过 CDP，可以做到 DevTools 能做的一切，甚至更多。

1.2 为什么重要？

复制代码

传统方式：你的代码 → HTTP → chromedriver → 浏览器（多中间层，能力有限）
CDP 方式：你的代码 → WebSocket → 浏览器（直连内核，全能力暴露）

传统 WebDriver	CDP
只能模拟用户可见行为（点击、输入）	贯穿浏览器所有层级
需要 chromedriver 中间层	无需任何驱动
HTTP 请求-响应（单向）	WebSocket 全双工（双向）
版本必须严格匹配	兼容性更好
功能受 W3C 标准限制	120+ 域，几乎无限制

二、历史演进：从 DevTools 到通用协议

复制代码

2011  Chrome 发布，DevTools 使用内部 IPC 通信
  │
2012  引入 WebSocket 远程调试（--remote-debugging-port）
  │
2015  协议文档化，开放为公共协议
  │
2017  Puppeteer 发布（Google 官方），CDP 生态爆发
  │
2019  Playwright 发布（Microsoft），支持 CDP + 多浏览器
  │
2020  Selenium 4 引入 CDP 支持（devtools 包）
  │
2023  WebDriver BiDi 标准化推进（CDP 的"标准化继承者"）
  │
2025  Chrome DevTools MCP Server 发布，AI Agent 接入
  │
2026  CDP 成为 AI 浏览器自动化的事实底层协议

关键转折点：CDP 从"Chrome 团队内部使用的调试接口"，演变为"整个浏览器自动化行业的基石协议"。

三、通信架构详解

3.1 整体架构图

复制代码

┌─────────────────────────────────────────────────────┐
│                   外部程序 / 客户端                   │
│  （Puppeteer / Playwright / 自定义脚本 / AI Agent）   │
└──────────────────────┬──────────────────────────────┘
                       │  WebSocket (ws://localhost:9222/devtools/...)
                       │  JSON-RPC 2.0 消息
                       ▼
┌─────────────────────────────────────────────────────┐
│              Chrome 浏览器进程                        │
│                                                     │
│  ┌───────────┐  ┌───────────┐  ┌───────────┐        │
│  │  Browser  │  │   Page    │  │  Worker   │        │
│  │  Target   │  │  Target   │  │  Target   │        │
│  └───────────┘  └───────────┘  └───────────┘        │
│                                                     │
│  ┌─────────────────────────────────────────────┐    │
│  │           DevTools Backend (C++)            │    │
│  │     解析 JSON 命令 → 调用浏览器内部模块         │    │
│  └─────────────────────────────────────────────┘    │
└─────────────────────────────────────────────────────┘

3.2 通信流程（四步）

复制代码

Step 1: 启动 Chrome，开启调试端口
        chrome --remote-debugging-port=9222

Step 2: 获取目标列表
        GET http://localhost:9222/json/list
        → 返回所有 Tab/Page 的 webSocketDebuggerUrl

Step 3: 建立 WebSocket 连接
        ws://localhost:9222/devtools/page/ABCDEF123456

Step 4: 发送 JSON 命令，接收响应/事件
        → {"id":1, "method":"Page.navigate", "params":{"url":"https://..."}}
        ← {"id":1, "result":{"frameId":"..."}}
        ← {"method":"Page.loadEventFired", "params":{...}}  // 事件推送

3.3 消息格式

请求（客户端 → 浏览器）：

json 复制代码

{
  "id": 1,
  "method": "Page.navigate",
  "params": {
    "url": "https://example.com"
  }
}

响应（浏览器 → 客户端）：

json 复制代码

{
  "id": 1,
  "result": {
    "frameId": "ABC123",
    "loaderId": "DEF456"
  }
}

事件（浏览器主动推送）：

json 复制代码

{
  "method": "Network.requestWillBeSent",
  "params": {
    "requestId": "REQ001",
    "request": {
      "url": "https://api.example.com/data",
      "method": "GET"
    }
  }
}

四、协议结构：Domain / Method / Event / Types

4.1 四层结构

复制代码

CDP Protocol
├── Domain（域）------ 功能模块划分
│   ├── Method（方法）------ 请求/响应模式
│   ├── Event（事件）------ 发布/订阅模式
│   └── Types（类型）------ 数据结构定义

4.2 协议分类

协议文件	适用场景
`browser_protocol.json`	浏览器后端（Chrome/Chromium）
`js_protocol.json`	Node.js 后端（V8 引擎调试）

4.3 版本说明

版本	说明
1.0	早期版本，已废弃
1.1	过渡版本
1.2	稳定版
1.3	当前推荐版本（Puppeteer/Playwright 默认使用）

五、核心命令域详解

CDP 提供 120+ 个 Domain，以下是最核心的 12 个：

5.1 页面控制

Domain	核心能力	典型方法
Page	页面导航、截图、生命周期	`Page.navigate`、`Page.captureScreenshot`、`Page.reload`
DOM	DOM 树查询、修改、监听	`DOM.getDocument`、`DOM.querySelector`、`DOM.setOuterHTML`
CSS	样式计算、修改	`CSS.getComputedStyleForNode`、`CSS.setStyleTexts`
Emulation	设备模拟、地理位置	`Emulation.setDeviceMetricsOverride`、`Emulation.setGeolocationOverride`

5.2 网络与资源

Domain	核心能力	典型方法
Network	请求监听、拦截、修改	`Network.enable`、`Network.setExtraHTTPHeaders`、`Network.interceptRequest`
Fetch	请求/响应拦截（更细粒度）	`Fetch.enable`、`Fetch.continueRequest`、`Fetch.fulfillRequest`
CacheStorage	缓存管理	`CacheStorage.requestCacheNames`、`CacheStorage.deleteCache`

5.3 执行与调试

Domain	核心能力	典型方法
Runtime	JS 执行、对象操作	`Runtime.evaluate`、`Runtime.callFunctionOn`
Debugger	断点调试、单步执行	`Debugger.setBreakpoint`、`Debugger.stepOver`
Console	控制台日志	`Console.enable`、`Console.clearMessages`
Log	浏览器日志	`Log.enable`、`Log.startViolationsReport`

5.4 性能与追踪

Domain	核心能力	典型方法
Performance	性能指标采集	`Performance.enable`、`Performance.getMetrics`
Tracing	性能追踪（Trace）	`Tracing.start`、`Tracing.end`
Profiler	CPU 性能分析	`Profiler.start`、`Profiler.stop`

5.5 浏览器与输入

Domain	核心能力	典型方法
Browser	浏览器级操作	`Browser.getVersion`、`Browser.close`、`Browser.createTarget`
Input	模拟键盘/鼠标/触摸	`Input.dispatchMouseEvent`、`Input.dispatchKeyEvent`
Target	多标签页/多目标管理	`Target.getTargets`、`Target.attachToTarget`

5.6 其他常用域

Domain	说明
Security	SSL 证书、安全状态
ServiceWorker	SW 生命周期管理
Storage	Cookie、LocalStorage、IndexedDB
Accessibility	无障碍树
Animation	CSS 动画控制
Audits	最佳实践审计
Memory	内存分析
HeapProfiler	堆快照
LayerTree	图层分析
Overlay	页面高亮覆盖层

六、从零开始：手把手使用 CDP

6.1 环境准备

bash 复制代码

# 确认 Chrome 已安装
google-chrome --version   # Linux
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --version  # macOS

6.2 启动 Chrome（开启调试端口）

bash 复制代码

# Linux
google-chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug

# macOS
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
  --remote-debugging-port=9222 \
  --user-data-dir=/tmp/chrome-debug

# Windows
chrome.exe --remote-debugging-port=9222 --user-data-dir=C:\tmp\chrome-debug

# 无头模式（服务器/CI 环境）
google-chrome --headless --disable-gpu --remote-debugging-port=9222

⚠️ --user-data-dir 参数用于指定独立的用户数据目录，避免与正在使用的 Chrome 冲突。

6.3 验证调试端口

bash 复制代码

# 查看所有可调试目标
curl http://localhost:9222/json/list

# 查看浏览器版本信息
curl http://localhost:9222/json/version

返回示例：

json 复制代码

[
  {
    "description": "",
    "devtoolsFrontendUrl": "/devtools/inspector.html?ws=localhost:9222/devtools/page/ABC123",
    "id": "ABC123",
    "title": "New Tab",
    "type": "page",
    "url": "chrome://newtab/",
    "webSocketDebuggerUrl": "ws://localhost:9222/devtools/page/ABC123"
  }
]

6.4 建立 WebSocket 连接

Python 示例：

python 复制代码

import websocket
import json

# 连接目标页面
ws = websocket.create_connection("ws://localhost:9222/devtools/page/ABC123")

# 发送命令：导航到指定 URL
ws.send(json.dumps({
    "id": 1,
    "method": "Page.navigate",
    "params": {"url": "https://example.com"}
}))

# 接收响应
response = json.loads(ws.recv())
print(response)

ws.close()

Node.js 示例：

javascript 复制代码

const WebSocket = require('ws');

const ws = new WebSocket('ws://localhost:9222/devtools/page/ABC123');

ws.on('open', () => {
  ws.send(JSON.stringify({
    id: 1,
    method: 'Page.navigate',
    params: { url: 'https://example.com' }
  }));
});

ws.on('message', (data) => {
  const msg = JSON.parse(data);
  console.log(msg);
});

七、代码实战示例

7.1 网页截图

python 复制代码

import websocket, json, base64

ws = websocket.create_connection("ws://localhost:9222/devtools/page/ABC123")

# 启用 Page 域
ws.send(json.dumps({"id": 1, "method": "Page.enable"}))
ws.recv()

# 导航
ws.send(json.dumps({
    "id": 2,
    "method": "Page.navigate",
    "params": {"url": "https://github.com"}
}))
ws.recv()

import time
time.sleep(3)  # 等待页面加载

# 截图
ws.send(json.dumps({
    "id": 3,
    "method": "Page.captureScreenshot",
    "params": {"format": "png", "quality": 100}
}))

result = json.loads(ws.recv())
if "result" in result and "data" in result["result"]:
    img_data = base64.b64decode(result["result"]["data"])
    with open("screenshot.png", "wb") as f:
        f.write(img_data)
    print("截图已保存: screenshot.png")

ws.close()

7.2 网络请求监听

python 复制代码

import websocket, json

ws = websocket.create_connection("ws://localhost:9222/devtools/page/ABC123")

# 启用 Network 域
ws.send(json.dumps({"id": 1, "method": "Network.enable"}))
ws.recv()

# 导航
ws.send(json.dumps({
    "id": 2,
    "method": "Page.navigate",
    "params": {"url": "https://example.com"}
}))

# 持续监听事件
while True:
    msg = json.loads(ws.recv())
    if msg.get("method") == "Network.requestWillBeSent":
        req = msg["params"]["request"]
        print(f"[请求] {req['method']} {req['url']}")
    elif msg.get("method") == "Network.responseReceived":
        resp = msg["params"]["response"]
        print(f"[响应] {resp['status']} {resp['url']}")

7.3 执行 JavaScript 并获取结果

python 复制代码

import websocket, json

ws = websocket.create_connection("ws://localhost:9222/devtools/page/ABC123")

ws.send(json.dumps({
    "id": 1,
    "method": "Runtime.evaluate",
    "params": {
        "expression": "document.title",
        "returnByValue": True
    }
}))

result = json.loads(ws.recv())
print("页面标题:", result["result"]["result"]["value"])

# 执行更复杂的 JS
ws.send(json.dumps({
    "id": 2,
    "method": "Runtime.evaluate",
    "params": {
        "expression": """
            Array.from(document.querySelectorAll('a'))
                .map(a => ({text: a.textContent.trim(), href: a.href}))
                .filter(a => a.text)
        """,
        "returnByValue": True
    }
}))

result = json.loads(ws.recv())
links = result["result"]["result"]["value"]
for link in links[:5]:
    print(f"  {link['text'][:30]} → {link['href']}")

ws.close()

7.4 模拟用户输入

python 复制代码

import websocket, json

ws = websocket.create_connection("ws://localhost:9222/devtools/page/ABC123")

# 模拟键盘输入 "Hello CDP"
text = "Hello CDP"
for char in text:
    ws.send(json.dumps({
        "id": 1,
        "method": "Input.dispatchKeyEvent",
        "params": {"type": "keyDown", "text": char}
    }))
    ws.recv()
    ws.send(json.dumps({
        "id": 2,
        "method": "Input.dispatchKeyEvent",
        "params": {"type": "keyUp"}
    }))
    ws.recv()

# 模拟鼠标点击 (坐标 100, 200)
ws.send(json.dumps({
    "id": 3,
    "method": "Input.dispatchMouseEvent",
    "params": {"type": "mousePressed", "x": 100, "y": 200, "button": "left", "clickCount": 1}
}))
ws.recv()

ws.close()

7.5 使用 Puppeteer（推荐的高层封装）

javascript 复制代码

const puppeteer = require('puppeteer');

(async () => {
  // 方式一：Puppeteer 自动启动 Chrome
  const browser = await puppeteer.launch({ headless: false });
  
  // 方式二：连接已运行的 Chrome（复用登录态）
  // const browser = await puppeteer.connect({
  //   browserURL: 'http://localhost:9222'
  // });

  const page = await browser.newPage();
  
  // 导航
  await page.goto('https://example.com', { waitUntil: 'networkidle2' });
  
  // 截图
  await page.screenshot({ path: 'page.png', fullPage: true });
  
  // 执行 JS
  const title = await page.evaluate(() => document.title);
  console.log('Title:', title);
  
  // 网络拦截
  await page.setRequestInterception(true);
  page.on('request', (req) => {
    if (req.resourceType() === 'image') {
      req.abort();  // 拦截图片加载
    } else {
      req.continue();
    }
  });
  
  await browser.close();
})();

7.6 使用 Playwright

javascript 复制代码

const { chromium } = require('playwright');

(async () => {
  // 连接已运行的 Chrome（CDP）
  const browser = await chromium.connectOverCDP('http://localhost:9222');
  
  const contexts = browser.contexts();
  const page = contexts[0].pages()[0];
  
  // 监听网络
  page.on('response', async (response) => {
    if (response.url().includes('/api/')) {
      const body = await response.json();
      console.log('API Response:', body);
    }
  });
  
  // 操作页面
  await page.goto('https://github.com');
  await page.fill('#search-input', 'playwright');
  await page.press('#search-input', 'Enter');
  
  await browser.close();
})();

八、生态系统：谁在用 CDP？

8.1 主流框架对比

框架	与 CDP 的关系	语言	特点
Puppeteer	直接基于 CDP（Google 官方）	Node.js	轻量、Chrome 专用
Playwright	CDP + 私有协议（Microsoft）	JS/Python/Java/C#	多浏览器、自动等待
Selenium 4	WebDriver + CDP 混合	多语言	企业级、跨浏览器
chromedp	直接基于 CDP	Go	高性能、无外部依赖
PyChrome	直接基于 CDP	Python	轻量 Python 封装
CDP4J	直接基于 CDP	Java	Java 生态
chrome-remote-interface	CDP 原始客户端	Node.js	最底层、最灵活

8.2 工具链

复制代码

                    ┌─── Puppeteer（Node.js）
                    │
CDP Protocol ──────┼─── Playwright（多语言）
                    │
                    ├─── Selenium 4 DevTools（Java/Python）
                    │
                    ├─── chromedp（Go）
                    │
                    ├─── Chrome DevTools MCP（AI Agent）
                    │
                    └─── 自定义 WebSocket 客户端

九、实际应用场景

9.1 自动化测试

复制代码

场景：E2E 测试中需要模拟弱网环境

实现：
  Network.emulateNetworkConditions → 模拟 3G/离线
  Emulation.setDeviceMetricsOverride → 模拟移动端
  Emulation.setGeolocationOverride → 模拟地理位置

9.2 性能分析与监控

复制代码

场景：自动化采集页面性能指标

实现：
  Performance.enable → 开启性能采集
  Performance.getMetrics → 获取 FCP、LCP、CLS 等
  Tracing.start/end → 录制完整 Trace 文件
  → 导入 chrome://tracing 或 Lighthouse 分析

9.3 网页爬虫 / 数据采集

复制代码

场景：抓取 SPA 动态渲染内容

实现：
  Page.navigate → 打开页面
  Runtime.evaluate → 等待数据加载完成
  DOM.getDocument + DOM.querySelectorAll → 提取结构化数据
  Network.getResponseBody → 直接获取 API 响应（绕过 DOM 解析）

9.4 网页截图与 PDF 生成

复制代码

场景：批量生成报表截图

实现：
  Page.captureScreenshot → PNG/JPEG 截图
  Page.printToPDF → 生成 PDF
  Emulation.setDeviceMetricsOverride → 控制视口尺寸

9.5 网络调试与 Mock

复制代码

场景：前端开发中 Mock 后端接口

实现：
  Fetch.enable → 开启请求拦截
  Fetch.requestPaused 事件 → 匹配目标请求
  Fetch.fulfillRequest → 返回自定义响应体

9.6 安全测试

复制代码

场景：检测页面 XSS / 混合内容

实现：
  Security.enable → 监听安全状态
  Log.enable → 捕获混合内容警告
  Runtime.evaluate → 注入检测脚本

9.7 浏览器扩展开发调试

复制代码

场景：自动化测试 Chrome 扩展

实现：
  Browser.createTarget → 打开扩展页面
  Runtime.evaluate → 在扩展上下文执行代码
  Target.attachToTarget → 附加到 Service Worker

9.8 无障碍审计

复制代码

场景：自动化检测网页可访问性

实现：
  Accessibility.enable → 获取无障碍树
  Accessibility.getFullAXTree → 完整 AX 树
  → 检查 aria 属性、角色、名称是否完整

十、CDP vs WebDriver vs BiDi：三代协议对比

10.1 演进关系

复制代码

第一代：WebDriver Classic（Selenium）
    HTTP 单向请求 → chromedriver → 浏览器
    ↓ 痛点：慢、功能有限、需要驱动
第二代：CDP（Chrome DevTools Protocol）
    WebSocket 全双工 → 浏览器内核
    ↓ 痛点：仅 Chromium、非标准化
第三代：WebDriver BiDi（W3C 标准）
    WebSocket 全双工 → 跨浏览器标准化
    （CDP 的"标准化继承者"，目前仍在推进中）

10.2 详细对比

维度	WebDriver Classic	CDP	WebDriver BiDi
通信方式	HTTP（单向）	WebSocket（双向）	WebSocket（双向）
中间层	需要 chromedriver	无需	无需
浏览器支持	所有主流浏览器	仅 Chromium	所有主流浏览器（目标）
标准化	W3C 标准	非标准（Chrome 团队维护）	W3C 标准（推进中）
事件推送	❌ 不支持	✅ 支持	✅ 支持
网络拦截	❌	✅	✅（规划中）
性能追踪	❌	✅	部分
生态成熟度	非常成熟	成熟	早期
反检测难度	容易检测	较难检测	待定
适用场景	跨浏览器测试	Chrome 深度控制	未来标准方案

10.3 选型建议

复制代码

需要跨浏览器（Firefox/Safari）？ → Selenium / Playwright
只需 Chrome/Edge 且需要深度控制？ → CDP（Puppeteer / Playwright CDP 模式）
企业级测试、多语言团队？ → Selenium 4 + CDP 增强
AI Agent 浏览器操作？ → CDP + MCP
面向未来、提前布局？ → 关注 WebDriver BiDi

十一、CDP 与 AI Agent 的结合（2026 前沿）

11.1 Chrome DevTools MCP Server

2025 年底，Google 官方发布了 Chrome DevTools MCP Server，将 CDP 能力封装为 MCP（Model Context Protocol）工具，让 AI Agent 直接操控浏览器。

复制代码

AI Agent（Claude Code / Cursor / Copilot / Codex）
    │
    │  MCP 协议（自然语言 → 工具调用）
    ▼
Chrome DevTools MCP Server（v1.7.0，2026年8月）
    │
    │  CDP（WebSocket + JSON-RPC）
    ▼
Chrome 浏览器（真实运行中的页面）

11.2 AI Agent 通过 CDP 能做什么？

能力	说明
🔍 查看控制台错误	自动读取 Console 报错，定位问题
📊 分析性能	录制 Trace，识别渲染瓶颈
🖱️ 操作页面	点击、填表、导航
📸 截图对比	视觉回归测试
🌐 网络监控	查看请求/响应，Mock 接口
🐛 断点调试	设置断点，查看变量状态

11.3 配置示例（Claude Code）

json 复制代码

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["chrome-devtools-mcp@latest"],
      "env": {}
    }
  }
}

11.4 典型工作流

复制代码

用户: "帮我看看为什么这个页面加载很慢"

AI Agent:
  1. → Performance.enable（开启性能采集）
  2. → Page.navigate（打开目标页面）
  3. → Performance.getMetrics（获取指标）
  4. → Tracing.start/end（录制 Trace）
  5. → 分析结果，输出：
     "FCP 3.2s，主要瓶颈是 main.js（850KB 未压缩）
      建议：开启代码分割 + 预加载关键资源"

11.5 auto-connect 模式（2026 新特性）

Chrome 144+ 支持 --autoConnect 参数，AI Agent 可以直接接管你已登录的浏览器，无需重新认证：

json 复制代码

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["chrome-devtools-mcp@latest", "--autoConnect"]
    }
  }
}

十二、安全与注意事项

12.1 安全风险

风险	说明	缓解措施
调试端口暴露	9222 端口若暴露在公网，任何人可控制你的浏览器	仅绑定 `127.0.0.1`，不暴露到外网
任意 JS 执行	`Runtime.evaluate` 可执行任意代码	限制可信来源
Cookie 泄露	CDP 可读取所有 Cookie	不要在共享环境使用
中间人攻击	WebSocket 未加密	生产环境使用 TLS

12.2 安全最佳实践

bash 复制代码

# ✅ 正确：仅本地监听
chrome --remote-debugging-port=9222 --remote-debugging-address=127.0.0.1

# ❌ 危险：暴露到所有网卡
chrome --remote-debugging-port=9222 --remote-debugging-address=0.0.0.0

# ✅ 使用完毕后关闭调试端口
# 不要长期保持调试模式运行

12.3 生产环境建议

使用 --headless 模式
使用独立的 --user-data-dir
配合防火墙规则限制端口访问
使用完毕后立即关闭调试端口
不要在调试端口上运行敏感账号

十三、最佳实践与踩坑指南

13.1 常见问题

问题	原因	解决方案
连接被拒绝	Chrome 未开启调试端口	确认 `--remote-debugging-port` 参数
多个 Chrome 实例冲突	默认用户目录被占用	使用 `--user-data-dir` 指定独立目录
页面未加载完就操作	异步渲染	使用 `Page.loadEventFired` 事件或 `Page.navigate` 的等待
WebSocket 断开	页面关闭/导航	监听 `Target.targetDestroyed` 事件
macOS IPv6 问题	默认解析到 ::1	显式指定 `127.0.0.1`
命令无响应	未先 `enable` 对应域	先调用 `Network.enable`、`Page.enable` 等

13.2 性能优化

复制代码

1. 批量操作：合并多个命令，减少 WebSocket 往返
2. 选择性监听：只 enable 需要的域，避免不必要的事件推送
3. 截图优化：使用 JPEG 格式 + 降低 quality 减少传输量
4. 网络过滤：用 Network.setRequestInterception 过滤无关资源
5. 连接复用：一个 WebSocket 连接可操作同一 Target 的所有命令

13.3 调试技巧

bash 复制代码

# 在 Chrome 地址栏查看 CDP 状态
chrome://inspect/#devices

# 查看 CDP 协议版本
curl http://localhost:9222/json/protocol | jq '.domains | length'

# 列出所有可用域
curl http://localhost:9222/json/protocol | jq '.domains[].domain'

十四、未来趋势

14.1 WebDriver BiDi 的推进

W3C 正在将 CDP 的核心理念标准化为 WebDriver BiDi：

Firefox 已部分实现
Chrome 正在逐步迁移
目标：统一的跨浏览器双向通信标准

14.2 AI Agent 时代

复制代码

2024: CDP 用于自动化测试
2025: CDP + MCP 让 AI 看见浏览器
2026: AI Agent 自主调试、自主修复前端问题
未来: CDP 成为 AI 与 Web 交互的标准通道

14.3 关键趋势

趋势	说明
AI 原生调试	AI 通过 CDP 直接读控制台、看网络、分析性能
无头化 + 云端	CDP 在云浏览器（Browserless、LambdaTest）中大规模使用
WebMCP	Chrome 149 引入 WebMCP 源试用，网页可主动暴露 MCP 工具
安全增强	更细粒度的权限控制，防止 CDP 被滥用
跨浏览器标准化	BiDi 逐步统一，CDP 作为 Chromium 专属可能逐步收敛

总结

复制代码

┌─────────────────────────────────────────────────────┐
│                                                     │
│   CDP = 浏览器的"万能遥控器"                           │
│                                                     │
│   • 它让 DevTools 的每一个功能都可以编程调用             │
│   • 它是 Puppeteer/Playwright/Selenium4 的底层引擎    │
│   • 它是 AI Agent 操控浏览器的唯一通道                  │
│   • 它是前端工程化、自动化测试、数据采集的基石             │
│                                                     │
│   掌握 CDP = 掌握浏览器自动化的"第一性原理"              │
│                                                     │
└─────────────────────────────────────────────────────┘

参考资源

资源	链接
CDP 官方文档	https://chromedevtools.github.io/devtools-protocol/
CDP Viewer（交互式）	https://chromedevtools.github.io/devtools-protocol/1-3/
Puppeteer 文档	https://pptr.dev/
Playwright 文档	https://playwright.dev/
Chrome DevTools MCP	https://github.com/ChromeDevTools/chrome-devtools-mcp
DevTools 更新日志	https://developer.chrome.com/docs/devtools/news
WebDriver BiDi	https://w3c.github.io/webdriver-bidi/