CDP 远程调试方案

最新推荐文章于 2025-04-04 11:05:11 发布

蚂蚁二娘

最新推荐文章于 2025-04-04 11:05:11 发布

阅读量4.2k

点赞数 2

文章标签： websocket 前端 http

本文链接：https://blog.csdn.net/web2022050901/article/details/124925705

版权

本文详细介绍了Chrome DevTools Protocol（CDP），包括其协议结构、调试系统组件和远程调试步骤。通过启动CDP服务端和客户端，创建WebSocket链接实现Chrome的远程调试。此外，还探讨了手动实现CDP协议调用调试的方法，以及社区提供的devtools-remote插件和chobitsu库等解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是 cdp 协议

cdp 协议简称 chrome 调试协议，是基于 scoket（websocket、usb、adb ）消息的 json rpc 协议。用来调用 chrome 内部的方法实现 js，css ，dom 的开发调试。可以将实现了 cdp 协议的应用看做 rpc 调用的服务端（ chrome ，puppeteer），将调试面板看做 rpc 调用的客户端（devtools）。

devtools 调试系统

完整的调试系统分别由前端，后端，协议，通道四部分组成

Frontend：调试器前端，如 chrome-devtools-frontend 一个 web 应用，接收 cdp 事件&发送 cdp 命令，实现 dom，network，debugger 的执行调试。
Backend: 实现了 cdp 协议的应用，会接收 cdp 命令&发送 cdp 事件。Chromium、V8 或 Node.js
Protocol：cdp 调试协议，调试器前端和后端使用此协议通信。它分为代表被检查实体的语义方面的域。每个域定义类型、命令（从前端发送到后端的消息）和事件（从后端发送到前端的消息）。该协议基于 json rpc 2.0 运行；
Channels：消息通道，后端和前端之间发送协议消息的一种方式。包括：Embedder Channel、WebSocket Channel、Chrome Extensions Channel、USB/ADB Channel。

chrome 远程调试

如上，所有能够消费发送 cdp 消息的应用都可以被 chrome-devtools-frontend 调试。chrome 集成了cdp协议，所以只需要通过消息通道与 chrome-devtools-frontend 应用建立 socket 链接就可以被调试端调试。调试启动分为三步：

启动 cdp 服务端
启动 cdp 客户端
创建链接

启动 cdp 服务端

以 Chrome，puppetter 为例启动 backend 应用，设置调试端口 9222。

chrome

 /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=./test

puppetter

 const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    args: ['--remote-debugging-port=9222', '--remote-debugging-address=0.0.0.0'],
  });
  const page = await browser.newPage();
 // let res= await page.goto('https://www.baidu.com');

  console.log(browser.wsEndpoint());
  // output -> ws://127.0.0.1:57724/devtools/browser/705082a5-19e6-4e9a-b8a6-477b7b6e1bd6
})();

此时访问