Chrome DevTools Protocol 入门：快速开始

Chrome DevTools Protocol（CDP） 是一套开放协议，允许外部程序通过 Chrome 浏览器提供的接口与其进行交互。CDP 提供了丰富的功能，使开发者可以远程控制 Chrome 浏览器，包括操作 DOM、监控网络请求、调试代码、截取屏幕快照等。

在这篇文章中，我们将介绍 CDP 的基本概念，并展示如何使用 CDP 与浏览器交互，从而帮助你快速上手这个强大的工具。

什么是 Chrome DevTools Protocol?

Chrome DevTools Protocol 是 Chrome 浏览器提供的一种低级 API，开发者可以通过它与浏览器的内部机制进行交互。它支持浏览器调试、性能分析、DOM 操作、网络管理等多种功能，几乎覆盖了开发者需要的所有调试和自动化场景。

通过 WebSocket 与浏览器建立连接，客户端程序可以向浏览器发送命令，并通过监听事件获取浏览器的状态反馈。CDP 提供了多个域（Domains），每个域负责不同的功能，例如：

• Page 域：管理页面的加载、导航和截屏。
• DOM 域：操作 DOM 树结构，获取页面元素的信息。
• Network 域：拦截和监控网络请求。
• Runtime 域：执行 JavaScript 代码，获取运行时的状态。
• Debugger 域：设置断点，调试脚本。

如何启动 Chrome DevTools Protocol

开启端口

要开始使用 CDP，首先需要启动 Chrome 浏览器并开启远程调试模式。可以通过命令行启动 Chrome，并指定调试端口：

chrome --remote-debugging-port=9222

启动后，浏览器会在 localhost:9222 上监听 WebSocket 连接。此时，你可以通过 WebSocket 客户端连接到这个端口并发送 CDP 命令。

获取webSocketDebuggerUrl的两种途径