介绍
chrome-debugging-protocol 是一个基于 Chrome 开发者工具协议的 npm 包，提供了一组 API，可以让我们通过 JavaScript 控制 Chrome 浏览器，从而实现各种自动化操作，例如爬虫、自动化测试、性能分析等。本文将介绍如何安装和使用该包。
安装
使用 npm 安装：
npm install chrome-debugging-protocol
使用
连接到 Chrome
要连接到 Chrome 浏览器，我们需要首先运行 Chrome 并启用远程调试模式。启动 Chrome 时可以加上以下命令行选项：
chrome --remote-debugging-port=9222
这会在 Chrome 进程启动时启用一个 WebSocket debugger 协议服务，负责接收和处理客户端的命令。
然后我们可以使用以下代码连接到 Chrome：
const CDP = require('chrome-debugging-protocol');
const client = await CDP();
const { Page, Runtime } = client;
await Promise.all([Page.enable(), Runtime.enable()]);这里使用了 ECMAScript 2017 的 async/await 和 Promise.all 等新特性。所谓 async/await，就是把异步调用看作协程，使用同步的语法进行编写。Promise.all 则是用于并行执行多个 Promise 对象，并等待它们全部完成。
上述代码中，CDP() 函数返回了一个 Promise 对象，表示连接到远程 Chrome，并返回一个客户端对象 client。我们可以使用该对象来对 Chrome 进行各种操作。Page 和 Runtime 对象都是客户端定义的 API，表示 Chrome 的页面和执行环境。
执行 JavaScript 代码
执行 JavaScript 代码需要用到 Runtime.evaluate API，例如：
const result = await Runtime.evaluate({
expression: '1 + 1',
});
console.log(result.result.value); // 输出 2这里我们将 JavaScript 表达式 "1 + 1" 传递给 Runtime.evaluate API，并通过 result.result.value 获取到结果值。
操作浏览器页面
要操作浏览器页面，需要使用 Page.navigate 和 Page.navigateBack API 进行页面跳转，使用 Page.captureScreenshot API 进行截图，以及使用 Page.click 和 Page.type 等 API 进行页面交互。例如：
await Page.navigate({ url: 'https://www.baidu.com' });
await Page.waitForNavigation();
const screenshot = await Page.captureScreenshot();
console.log(screenshot.toString('base64'));
await Page.click('input[type="submit"]');
await Page.type('input[type="text"]', 'hello world');这里使用 Page.navigate API 进行跳转，并使用 Page.waitForNavigation 等待页面加载完成；使用 Page.captureScreenshot API 进行截图，并使用 toString('base64') 把截图转换为 BASE64 编码；使用 Page.click 和 Page.type 等 API 进行页面交互。
断开连接
使用完之后需要断开连接，可以使用以下代码：
await client.close();
指导意义
chrome-debugging-protocol 可以让我们通过 JavaScript 控制 Chrome 浏览器，非常适合用于自动化测试、爬虫、性能分析等领域。同时也是一种非常有趣的学习方式，让我们更深入地了解浏览器的内部实现。
示例代码
完整的示例代码如下：
-- -------------------- ---- -------
----- --- - -------------------------------------
------ ---------- -
----- ------ - ----- ------
----- - ----- ------- - - -------
----- --------------------------- -------------------
--- -
-- -------- -- --- ------ ----
----- --------------- ---- ----------------------- ---
----- -------------------------
-- -------- ---------- ----
----- ------ - ----- ------------------
----------- -- - ---
---
---------------------------------
-- ---- - ----------
----- ---------- - ----- -------------------------
-------------------------------------------
-- -------- ---- --- ----
----- -----------------------------------
----- ------------------------------- ------ --------
- ------- -
-- ----- --- ----------
----- ---------------
-
-----来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601481e8991b448de250