Update from Sync Service
This commit is contained in:
FNS Service
425
AI工程/ChromeDevTools与CDP协议完全指南.md
Executable file
425
AI工程/ChromeDevTools与CDP协议完全指南.md
Executable file
@@ -0,0 +1,425 @@
|
|||||||
|
# Chrome DevTools 与 CDP 协议完全指南
|
||||||
|
|
||||||
|
> Chrome DevTools 开发者工具 + Chrome DevTools Protocol (CDP) 协议深度研究
|
||||||
|
>
|
||||||
|
> 归档：2026-04-25
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📊 生态概览
|
||||||
|
|
||||||
|
| 项目 | Stars | 定位 |
|
||||||
|
|------|-------|------|
|
||||||
|
| **Puppeteer** | 94,185 | Google 官方 Node.js CDP 库 |
|
||||||
|
| **Playwright** | 87,219 | 微软多浏览器自动化框架 |
|
||||||
|
| **go-rod/rod** | 6,881 | Go 语言 CDP 驱动 |
|
||||||
|
| **CDP 协议仓库** | 1,476 | 官方协议定义 |
|
||||||
|
| **cdpnetool** | 336 | CDP 网络调试工具 |
|
||||||
|
| **ichrome** | 259 | Python CDP 控制器 |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎯 Chrome DevTools 是什么
|
||||||
|
|
||||||
|
**Chrome DevTools** 是 Chrome/Chromium 浏览器内置的**开发者调试工具集**，提供：
|
||||||
|
- DOM/CSS 检查与编辑
|
||||||
|
- JavaScript 调试与性能分析
|
||||||
|
- 网络请求监控与拦截
|
||||||
|
- 内存泄漏检测
|
||||||
|
- 移动端模拟
|
||||||
|
|
||||||
|
**底层协议：CDP（Chrome DevTools Protocol）**
|
||||||
|
|
||||||
|
CDP 是 DevTools 的**通信协议**，允许外部工具通过 WebSocket 与浏览器交互，实现：
|
||||||
|
- 自动化测试
|
||||||
|
- 网页爬取
|
||||||
|
- 性能监控
|
||||||
|
- 安全审计
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🔌 CDP 协议架构
|
||||||
|
|
||||||
|
### 核心概念
|
||||||
|
|
||||||
|
```
|
||||||
|
外部工具（Puppeteer/Playwright/自定义）
|
||||||
|
↓ WebSocket
|
||||||
|
Chrome DevTools Protocol (CDP)
|
||||||
|
↓
|
||||||
|
Chromium 浏览器内核
|
||||||
|
```
|
||||||
|
|
||||||
|
- **Domain（域）**：功能分类（Network、DOM、Page 等）
|
||||||
|
- **Command（命令）**：工具→浏览器的请求
|
||||||
|
- **Event（事件）**：浏览器→工具的通知
|
||||||
|
- **Type（类型）**：数据结构定义
|
||||||
|
|
||||||
|
### 协议版本
|
||||||
|
|
||||||
|
| 版本 | 说明 | 适用场景 |
|
||||||
|
|------|------|---------|
|
||||||
|
| **latest (tot)** | 最新版本，频繁变更 | 最新功能探索 |
|
||||||
|
| **v8-inspector** | Node.js 调试专用 | Node.js 调试 |
|
||||||
|
| **stable 1.3** | Chrome 64 锁定，向后兼容 | 生产环境 |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📦 45+ 核心 Domain 分类
|
||||||
|
|
||||||
|
### 🔍 页面与 DOM
|
||||||
|
|
||||||
|
| Domain | 核心能力 |
|
||||||
|
|--------|---------|
|
||||||
|
| **Page** | 页面导航、截图、打印、生命周期管理 |
|
||||||
|
| **DOM** | DOM 树查询、修改、监听变化 |
|
||||||
|
| **DOMSnapshot** | 获取完整 DOM 快照 |
|
||||||
|
| **DOMDebugger** | DOM 事件断点 |
|
||||||
|
| **DOMStorage** | localStorage/sessionStorage 操作 |
|
||||||
|
|
||||||
|
### 🌐 网络
|
||||||
|
|
||||||
|
| Domain | 核心能力 |
|
||||||
|
|--------|---------|
|
||||||
|
| **Network** | 请求/响应拦截、修改、性能分析 |
|
||||||
|
| **Fetch** | 请求级拦截与修改（Mock API） |
|
||||||
|
| **Security** | 证书、HTTPS、安全状态 |
|
||||||
|
| **ServiceWorker** | SW 注册/注销/调试 |
|
||||||
|
|
||||||
|
### ⚡ 调试与性能
|
||||||
|
|
||||||
|
| Domain | 核心能力 |
|
||||||
|
|--------|---------|
|
||||||
|
| **Runtime** | JS 执行、对象检查、异常捕获 |
|
||||||
|
| **Debugger** | 断点、单步执行、调用栈 |
|
||||||
|
| **Profiler** | CPU 性能分析 |
|
||||||
|
| **HeapProfiler** | 内存堆分析、泄漏检测 |
|
||||||
|
| **Performance** | 性能指标采集 |
|
||||||
|
| **Tracing** | 底层追踪数据 |
|
||||||
|
|
||||||
|
### 📱 模拟与仿真
|
||||||
|
|
||||||
|
| Domain | 核心能力 |
|
||||||
|
|--------|---------|
|
||||||
|
| **Emulation** | 设备模拟、屏幕尺寸、地理位置 |
|
||||||
|
| **Input** | 模拟鼠标/键盘/触摸输入 |
|
||||||
|
| **DeviceOrientation** | 模拟设备方向 |
|
||||||
|
|
||||||
|
### 🎨 样式与渲染
|
||||||
|
|
||||||
|
| Domain | 核心能力 |
|
||||||
|
|--------|---------|
|
||||||
|
| **CSS** | 样式表查询、修改、计算样式 |
|
||||||
|
| **Overlay** | 高亮元素、网格线、滚动条 |
|
||||||
|
| **LayerTree** | 渲染层分析 |
|
||||||
|
| **Animation** | 动画检查与控制 |
|
||||||
|
|
||||||
|
### 🔧 其他
|
||||||
|
|
||||||
|
| Domain | 核心能力 |
|
||||||
|
|--------|---------|
|
||||||
|
| **Browser** | 浏览器级操作（版本、窗口管理） |
|
||||||
|
| **Target** | Tab/Worker 管理 |
|
||||||
|
| **Log** | 控制台日志捕获 |
|
||||||
|
| **Console** | 控制台消息 |
|
||||||
|
| **IO** | 流式数据读写 |
|
||||||
|
| **Storage** | Cookie、IndexedDB、Cache |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 💻 常用 CDP 命令速查
|
||||||
|
|
||||||
|
### 页面操作
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// 导航到页面
|
||||||
|
Page.navigate({ url: 'https://example.com' })
|
||||||
|
|
||||||
|
// 截图
|
||||||
|
Page.captureScreenshot({ format: 'png' })
|
||||||
|
|
||||||
|
// 打印为 PDF
|
||||||
|
Page.printToPDF({
|
||||||
|
landscape: false,
|
||||||
|
displayHeaderFooter: true
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
### 网络拦截
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// 启用网络域
|
||||||
|
Network.enable()
|
||||||
|
|
||||||
|
// 拦截并修改请求
|
||||||
|
Fetch.enable({
|
||||||
|
patterns: [{ urlPattern: '*', requestStage: 'Request' }]
|
||||||
|
})
|
||||||
|
|
||||||
|
// 修改请求头
|
||||||
|
Fetch.continueRequest({
|
||||||
|
requestId,
|
||||||
|
headers: [{ name: 'User-Agent', value: 'Custom' }]
|
||||||
|
})
|
||||||
|
|
||||||
|
// Mock 响应
|
||||||
|
Fetch.fulfillRequest({
|
||||||
|
requestId,
|
||||||
|
responseCode: 200,
|
||||||
|
body: btoa(JSON.stringify({ mock: true }))
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
### JS 执行
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// 执行 JS
|
||||||
|
Runtime.evaluate({
|
||||||
|
expression: 'document.title'
|
||||||
|
})
|
||||||
|
|
||||||
|
// 设置断点
|
||||||
|
Debugger.enable()
|
||||||
|
Debugger.setBreakpoint({
|
||||||
|
location: {
|
||||||
|
scriptId: '1',
|
||||||
|
lineNumber: 10
|
||||||
|
}
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
### 设备模拟
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// 模拟 iPhone
|
||||||
|
Emulation.setDeviceMetricsOverride({
|
||||||
|
width: 375,
|
||||||
|
height: 812,
|
||||||
|
deviceScaleFactor: 3,
|
||||||
|
mobile: true
|
||||||
|
})
|
||||||
|
|
||||||
|
// 模拟地理位置
|
||||||
|
Emulation.setGeolocationOverride({
|
||||||
|
latitude: 39.9042,
|
||||||
|
longitude: 116.4074
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
### DOM 操作
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// 获取 DOM 树
|
||||||
|
DOM.getDocument({ depth: 2 })
|
||||||
|
|
||||||
|
// 查询元素
|
||||||
|
DOM.querySelector({
|
||||||
|
nodeId: 1,
|
||||||
|
selector: '.my-class'
|
||||||
|
})
|
||||||
|
|
||||||
|
// 修改属性
|
||||||
|
DOM.setAttributeValue({
|
||||||
|
nodeId: 42,
|
||||||
|
name: 'class',
|
||||||
|
value: 'new-class'
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🛠️ 主流 CDP 库对比
|
||||||
|
|
||||||
|
### Puppeteer（官方推荐）
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const puppeteer = require('puppeteer');
|
||||||
|
|
||||||
|
const browser = await puppeteer.launch();
|
||||||
|
const page = await browser.newPage();
|
||||||
|
await page.goto('https://example.com');
|
||||||
|
await page.screenshot({ path: 'example.png' });
|
||||||
|
await browser.close();
|
||||||
|
```
|
||||||
|
|
||||||
|
| 特性 | 说明 |
|
||||||
|
|------|------|
|
||||||
|
| **语言** | Node.js |
|
||||||
|
| **维护** | Google 官方 |
|
||||||
|
| **Stars** | 94k+ |
|
||||||
|
| **适合** | 爬虫、截图、自动化测试 |
|
||||||
|
|
||||||
|
### Playwright（多浏览器）
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const { chromium } = require('playwright');
|
||||||
|
|
||||||
|
const browser = await chromium.launch();
|
||||||
|
const page = await browser.newPage();
|
||||||
|
await page.goto('https://example.com');
|
||||||
|
// 同时支持 Chromium / Firefox / WebKit
|
||||||
|
```
|
||||||
|
|
||||||
|
| 特性 | 说明 |
|
||||||
|
|------|------|
|
||||||
|
| **语言** | JS/Python/Java/.NET |
|
||||||
|
| **维护** | 微软 |
|
||||||
|
| **Stars** | 87k+ |
|
||||||
|
| **适合** | 跨浏览器 E2E 测试 |
|
||||||
|
|
||||||
|
### go-rod（Go 语言）
|
||||||
|
|
||||||
|
```go
|
||||||
|
package main
|
||||||
|
|
||||||
|
import "github.com/go-rod/rod"
|
||||||
|
|
||||||
|
func main() {
|
||||||
|
page := rod.New().MustConnect().MustPage("https://example.com")
|
||||||
|
page.MustElement("input").MustInput("hello")
|
||||||
|
page.MustScreenshot("example.png")
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
| 特性 | 说明 |
|
||||||
|
|------|------|
|
||||||
|
| **语言** | Go |
|
||||||
|
| **Stars** | 6.8k |
|
||||||
|
| **适合** | Go 生态、高性能爬虫 |
|
||||||
|
|
||||||
|
### ichrome（Python）
|
||||||
|
|
||||||
|
```python
|
||||||
|
import asyncio
|
||||||
|
from ichrome import AsyncChrome
|
||||||
|
|
||||||
|
async def main():
|
||||||
|
async with AsyncChrome() as chrome:
|
||||||
|
tab = await chrome.connect_tab(0)
|
||||||
|
await tab.goto('https://example.com')
|
||||||
|
await tab.screenshot(path='example.png')
|
||||||
|
|
||||||
|
asyncio.run(main())
|
||||||
|
```
|
||||||
|
|
||||||
|
| 特性 | 说明 |
|
||||||
|
|------|------|
|
||||||
|
| **语言** | Python |
|
||||||
|
| **Stars** | 259 |
|
||||||
|
| **适合** | Python 爬虫、自动化 |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎯 典型应用场景
|
||||||
|
|
||||||
|
### 1. 网页自动化
|
||||||
|
|
||||||
|
```
|
||||||
|
场景：自动填写表单、点击按钮、爬取数据
|
||||||
|
方案：Puppeteer / Playwright
|
||||||
|
关键 API：Page.navigate, Page.click, Page.type
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. 网络请求拦截
|
||||||
|
|
||||||
|
```
|
||||||
|
场景：Mock API 响应、修改请求头
|
||||||
|
方案：Fetch Domain
|
||||||
|
关键 API：Fetch.enable, Fetch.fulfillRequest
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3. 性能分析
|
||||||
|
|
||||||
|
```
|
||||||
|
场景：检测页面加载性能、内存泄漏
|
||||||
|
方案：Performance + HeapProfiler Domain
|
||||||
|
关键 API：Performance.getMetrics, HeapProfiler.takeHeapSnapshot
|
||||||
|
```
|
||||||
|
|
||||||
|
### 4. 移动端测试
|
||||||
|
|
||||||
|
```
|
||||||
|
场景：模拟手机设备访问
|
||||||
|
方案：Emulation Domain
|
||||||
|
关键 API：Emulation.setDeviceMetricsOverride
|
||||||
|
```
|
||||||
|
|
||||||
|
### 5. 安全审计
|
||||||
|
|
||||||
|
```
|
||||||
|
场景：检测 XSS、检查 HTTPS
|
||||||
|
方案：Security + DOMDebugger Domain
|
||||||
|
关键 API：Security.getSecurityState, DOMDebugger.setDOMBreakpoint
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🔧 开发调试技巧
|
||||||
|
|
||||||
|
### 启用 Protocol Monitor
|
||||||
|
|
||||||
|
1. 打开 DevTools → 设置 ⚙️
|
||||||
|
2. Experiments → 启用 "Protocol Monitor"
|
||||||
|
3. More Tools → Protocol monitor
|
||||||
|
4. 查看所有 CDP 命令和响应
|
||||||
|
|
||||||
|
### 直接发送 CDP 命令
|
||||||
|
|
||||||
|
```
|
||||||
|
# 截图
|
||||||
|
Page.captureScreenshot
|
||||||
|
|
||||||
|
# 带参数
|
||||||
|
{"cmd":"Page.captureScreenshot","args":{"format":"jpeg"}}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 远程调试
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# 启动 Chrome 远程调试
|
||||||
|
chrome --remote-debugging-port=9222
|
||||||
|
|
||||||
|
# 连接 WebSocket
|
||||||
|
ws://localhost:9222/devtools/page/<pageId>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📊 CDP 在 AI 编程中的应用
|
||||||
|
|
||||||
|
| 场景 | CDP 的作用 |
|
||||||
|
|------|-----------|
|
||||||
|
| **Superpowers 代码审查** | 通过 CDP 检查页面实际渲染效果 |
|
||||||
|
| **AI 自动化测试** | 控制浏览器执行 E2E 测试 |
|
||||||
|
| **网页爬取** | 动态渲染页面的内容提取 |
|
||||||
|
| **性能优化建议** | CDP 采集真实性能数据 |
|
||||||
|
| **安全扫描** | 自动检测前端安全问题 |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🔗 资源
|
||||||
|
|
||||||
|
| 资源 | 链接 |
|
||||||
|
|------|------|
|
||||||
|
| **CDP 官方文档** | https://chromedevtools.github.io/devtools-protocol/ |
|
||||||
|
| **Getting Started with CDP** | https://github.com/aslushnikov/getting-started-with-cdp |
|
||||||
|
| **awesome-chrome-devtools** | https://github.com/ChromeDevTools/awesome-chrome-devtools |
|
||||||
|
| **Puppeteer** | https://github.com/puppeteer/puppeteer |
|
||||||
|
| **Playwright** | https://github.com/microsoft/playwright |
|
||||||
|
| **go-rod** | https://github.com/go-rod/rod |
|
||||||
|
| **cdpnetool** | https://github.com/241x/cdpnetool |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 💡 与 OpenClaw 的结合点
|
||||||
|
|
||||||
|
| 结合方式 | 说明 |
|
||||||
|
|---------|------|
|
||||||
|
| **Browser 工具** | OpenClaw 已通过 Playwright 集成 CDP |
|
||||||
|
| **网页自动化** | 可通过 CDP 控制浏览器完成任务 |
|
||||||
|
| **性能监控** | CDP 采集数据 → AI 分析建议 |
|
||||||
|
| **安全审计** | CDP 检测 → AI 生成报告 |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
*整理：知识库管理员 | 归档：2026-04-25*
|
||||||
Reference in New Issue
Block a user