前言
在前端开发中，调试是一个必不可少的环节。然而，开发人员常常会遇到一些困难，例如前端代码无法在本地环境下运行、无法重现服务端问题等等。针对这些问题，Chrome 浏览器提供了强大的开发者工具，但需要建立与服务端的连接。devtools-proxy 就是一个 npm 包，可以帮助我们轻松地与服务端建立连接，本文将对其进行详细的介绍和使用教程。
devtools-proxy 是什么？
devtools-proxy 简单来说是一个 Chrome DevTools Protocol（CDP）代理，让我们可以通过 CDP 连接服务端，从而进行调试等操作。它有以下特点：
- 支持 Chrome DevTools Protocol（CDP） 的所有功能。
- 可以运行在 Node.js 环境中，也可以运行在浏览器环境中。
- 支持多路复用，可以在同一个连接上进行多个会话。
- 支持自定义传输协议，包括 WebSocket 和 TCP。
安装
使用 npm 安装：
npm install devtools-proxy
快速入门
以下例子展示了如何使用 devtools-proxy 建立连接，并发送一条简单的 CDP 请求。
-- -------------------- ---- -------
----- - -------- - - --------------------------
------ -- -- -
----- -------- - --- ----------
------ ----------------------------------------
---
----- -------------------
----- - ------- - - ----- -----------------------------------
----- ------ - ----- ------------------
----------- -------- ---------
---
--------------------------------- -- -- ------ ------
-----运行该脚本后，控制台将输出 hello, world!，这意味着与浏览器建立连接成功，并可以通过 CDP 进行调试了。
使用教程
1. 启动 Chrome 浏览器
如果我们要想使用 devtools-proxy，我们首先需要启动 Chrome 浏览器，并启动 remote debugging，方法如下：
- 在运行 Chrome 浏览器时，加上
--remote-debugging-port=9222参数，使其启动 remote debugging，其中9222是一个端口号，可以根据需要进行调整。
例如，在 Windows 操作系统中，我们可以打开命令行窗口，并输入以下内容来启动 Chrome 浏览器：
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222
- 在浏览器的地址栏中输入
chrome://inspect/#devices，然后点击「Open dedicated DevTools for Node」，即可打开 Chrome DevTools。
2. 安装 devtools-proxy
根据前面提到的方式，使用 npm 安装 devtools-proxy。
npm install devtools-proxy
3. 建立连接
在使用 devtools-proxy 前，我们需要知道浏览器的 remote debugging 地址，该地址常常为 ws://127.0.0.1:9222/devtools/page/123，其中 9222 是 remote debugging 的端口号，123 是一个唯一的页面 ID，可以通过访问 http://localhost:9222/json 获取。
以下是建立连接的示例代码：
-- -------------------- ---- -------
----- - -------- - - --------------------------
------ -- -- -
-- ---------
----- -------- - --- ----------
------ ----------------------------------------
---
----- -------------------
-- -- --- ------
----- - ---- - - ----- --------------------------------
----- --------------
----- ------ - ----- ------------------------------
----------------------------
-- ---------
----- ----------------------
-----以上代码将获取页面的导航历史，并输出到控制台。
4. CDP 协议
CDP（Chrome DevTools Protocol）是一种在 Chrome 和其他浏览器中交换调试数据的协议。DevTools 使用它来与浏览器通信。
devtools-proxy 通过 attachProtocol(protocolName) 方法，可以轻松地扩展 CDP 协议。例如，以下代码使用 DOM 协议来获取页面的 body 元素。
-- -------------------- ---- -------
----- - -------- - - --------------------------
------ -- -- -
-- ---------
----- -------- - --- ----------
------ ----------------------------------------
---
----- -------------------
-- -- --- --------
----- - --- - - ----- -------------------------------
----- - ---- - - ----- --------------------
----- - ------ - - ----- ------------------- ------- ------------ --------- ------ ---
-- ---------
----- ----------------------
-----5. WebSocket 和 TCP
devtools-proxy 除了支持 WebSocket 外，还支持 TCP 协议，可以轻松地进行自定义传输协议。
以下示例代码展示了如何使用 TCP 协议来和浏览器建立连接。
-- -------------------- ---- -------
----- - -------- - - --------------------------
----- --- - ---------------
------ -- -- -
-- -- --- ------ ------
----- ------ - -------------------------- -------------
----- -------- - --- ----------
-------
---
----- -------------------
-- -- --- ------
----- - ---- - - ----- --------------------------------
----- --------------
----- ------ - ----- ------------------------------
----------------------------
-- ---------
----- ----------------------
-----6. 多路复用
devtools-proxy 支持多路复用，可以在同一个连接上进行多个会话。以下示例代码展示了如何同时进行多个 CDP 请求。
-- -------------------- ---- -------
----- - -------- - - --------------------------
------ -- -- -
-- ---------
----- -------- - --- ----------
------ ----------------------------------------
---
----- -------------------
-- -- ------- ------
----- - ------- - - ----- -----------------------------------
-------------------------- -- -
-----------------
---
-- ------ --- --
----- - ------- - - ----- -----------------------------------
----- - ------- - - ----- -----------------------------------
----- -------------
----------------------- ----------- ----------------------- ---
-----------------
------------------ ----------- ----------------------- ---
---
-- ---------
----- ----------------------
-----7. 错误处理
在使用 devtools-proxy 进行调试时，有可能会遇到错误，我们可以使用 try...catch 来进行异常处理。
以下是一个示例代码：
-- -------------------- ---- -------
----- - -------- - - --------------------------
------ -- -- -
--- -
-- ---------
----- -------- - --- ----------
------ ----------------------------------------
---
----- -------------------
-- -- --- ------
----- - ---- - - ----- --------------------------------
----- --------------- ---- ----------------------- ---
-- ---------
----- ----------------------
- ----- ------- -
---------------------
-
-----8. WebSocket、TCP 等配置
除了以上的示例代码外，devtools-proxy 还提供了一些配置选项，例如基于 HTTPS 的 WebSocket、自定义请求头、TCP 等等。可以根据实际需求从中进行选择。
小结
本文详细介绍了 devtools-proxy 的使用教程，包括建立连接、CDP 扩展、WebSocket 和 TCP 等方面的内容。通过本文所讲述的知识点，相信读者能更好地开展前端开发中的调试工作，提高对浏览器行为的理解和把握。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562f781e8991b448e0c40