无需登录 数据私有 本地保存

Chrome DevTools Protocol 命令构建器 - 生成调试命令

开发工具 调试 CDP DevTools 协议 调试
38
0
0
0

Chrome DevTools Protocol 命令构建器

快速构建和生成 CDP (Chrome DevTools Protocol) 调试命令。 选择域和方法，填写参数，即可生成标准 JSON 命令，适用于 Puppeteer、Playwright、Selenium 等工具。

JSON 格式无效，请检查
输入有效的 JSON 对象作为命令参数。留空则使用 {} 
"id": 1,
"method": "Page.navigate",
"params": {
  "url": "https://example.com"
}
Puppeteer 调用示例： await client.send('Page.navigate', { url: 'https://example.com' });
提示：CDP 命令通过 WebSocket 发送到 Chrome 调试端口（默认 localhost:9222）。在 Puppeteer 中使用 page.target().createCDPSession() 获取会话。
常见问题与知识点

Chrome DevTools Protocol (CDP) 是 Chrome 浏览器提供的一套底层调试接口协议。它允许外部工具（如 Puppeteer、Playwright、Selenium）通过 WebSocket 与 Chrome 通信，实现对浏览器的深度控制——包括页面导航、JavaScript 执行、DOM 操作、网络监控、性能分析、断点调试等。CDP 是 DevTools 面板背后使用的同一套协议，功能极其强大。

每条 CDP 命令都是一个 JSON 对象，包含三个必要字段：
id — 整数，用于匹配请求与响应（同一连接中 ID 应唯一）；
method — 字符串，格式为 Domain.methodName，如 Page.navigate；
params — 对象，包含该方法所需的参数（可为空对象 {}）。
示例：{"id":1,"method":"Page.navigate","params":{"url":"https://example.com"}}

Puppeteer 和 Playwright 都是基于 CDP 构建的高级自动化库。它们封装了 CDP 的底层细节，提供了更友好的 API。同时，它们也暴露了原始 CDP 会话（Puppeteer 中通过 page.target().createCDPSession()，Playwright 中通过 page.context().newCDPSession()），让开发者可以在需要时直接发送原始 CDP 命令，实现官方 API 未覆盖的高级功能。

最常用的 CDP 域包括：
Page — 页面导航、截图、PDF 生成；
Network — 网络请求拦截、缓存控制、User-Agent 设置；
Runtime — JavaScript 执行、对象属性获取；
DOM — DOM 树查询与操作；
Debugger — 断点设置、单步调试；
Input — 模拟鼠标、键盘、触摸事件；
Emulation — 设备模拟、CPU 节流、地理位置覆盖；
Target — 标签页/目标的创建与管理。

使用 Page.captureScreenshot 命令。参数中可指定截图格式（png/jpeg）、质量（仅 jpeg）、裁剪区域等。命令返回 base64 编码的图片数据。在 Puppeteer 中直接使用 page.screenshot() 即可，底层调用的正是该 CDP 命令。通过本工具选择 Page → captureScreenshot 即可生成对应的 CDP 命令。

启动 Chrome 时添加 --remote-debugging-port=9222 参数，然后访问 http://localhost:9222/json 获取 WebSocket URL。使用 WebSocket 客户端连接到该 URL 后，即可发送本工具生成的 JSON 命令。每条命令会返回一个带有相同 id 的响应。注意在生产环境中，直接使用 Puppeteer/Playwright 等库更为安全和便捷。

id 字段用于将响应与请求进行匹配。CDP 支持异步通信，可以同时发送多条命令，每条的 id 应唯一。响应中会包含对应的 id，方便调用方识别。通常从 1 开始递增即可。在 Puppeteer 中，CDP 会话会自动管理 ID，开发者无需手动处理。本工具默认使用 ID=1，您可以根据需要自行修改。

使用 Emulation.setDeviceMetricsOverride 命令，配合 Emulation.setUserAgentOverride 可完整模拟移动端环境。需要设置的参数包括：屏幕宽高、设备缩放比例（deviceScaleFactor）、是否移动端（mobile）、屏幕方向等。本工具已提供"模拟移动端"快捷预设，可一键生成相关命令。
🔧 相关工具