简述
Chii 是一个基于 Node.js 的远程调试工具，用于移动端页面的调试。它的源码主要使用 TypeScript 编写，并依赖于 Node.js 和 Koa。Chii 的核心特点是将 Web Inspector 替换为最新的 Chrome DevTools Frontend，从而提供更加高效和现代化的远程调试体验。
工作原理
- Chii 基于 DevTools Protocol 在目标页面和调试控制台中展示调试效果的实现原理，涉及到 Chrome DevTools Protocol（CDP）的使用。CDP 是一种允许检查、调试和监听网络流量的协议，它支持 Chrome、Chromium 等基于 Blink 的浏览器。通过 CDP，Chii 可以实现与 Chrome 浏览器相同的调试功能。
- 具体来说，Chii 在目标页面注入特定的 JavaScript 脚本，这个脚本创建一个 WebSocket 连接到 Chii 服务器。通过这个连接，Chii 服务器可以发送命令和事件到目标页面，同时也可以接收页面传来的数据。这些数据包括页面的 DOM 结构、CSS 样式、布局信息等。
- 在 Chii 的调试控制台中，开发者可以看到目标页面的详细状态，包括 DOM 结构。这得益于 Chii 服务器对从目标页面接收到的数据进行处理和格式化，使得这些数据能够以易于理解的方式在控制台中显示。控制台通常提供了一个用户界面，允许开发者查看和操作页面的元素，以及发送和接收调试命令。
- 例如，当在调试控制台页面选中某个 DOM 元素时，Chii 可以通过 CDP 向目标页面发送命令，要求页面同步圈中相同的 DOM 元素。同样，当在目标页面中修改了 DOM 结构时，Chii 可以通过 CDP 通知调试控制台，使得控制台中的 DOM 结构视图同步更新。
- 总结来说，Chii 在目标页面和调试控制台中展示调试效果的原理是通过注入 JavaScript 脚本，在目标页面与 Chii 服务器之间建立 WebSocket 连接，实现双向通信。通过发送和接收特定的命令和事件，Chii 控制台和目标页面可以进行同步和交互，实现调试操作和展示。具体的实现细节可能因实际情况而有所不同，请根据需求进行相应的调整。
组成部分
在 Chii 的源码中，主要包括以下几个关键部分：
-
服务器端代码：这部分代码负责启动一个 Node.js 服务，并处理 WebSocket 通信。服务器端的代码位于 Server 文件夹中，它使用 Koa 框架来处理 HTTP 请求和 WebSocket 通信。
-
前端调试工具代码：这部分代码是 Chrome DevTools Frontend 的定制版本，用于实现远程调试功能。它位于 devtools-frontend 文件夹中，包含了调试工具的用户界面和交互逻辑。
-
target.js：这是一个关键的 JavaScript 文件，它会被注入到待调试的页面中。target.js 的主要逻辑包括创建一个 WebSocket 连接，将页面信息传递到 Chii 服务器，并接收服务器的指令来修改页面状态。这个文件最后会被打包成一个 JavaScript 文件，并被注入到待调试的页面中。
集成
将 Chii 集成到您的开发工作流中可以提高您在移动端页面调试的效率。 以下是集成 Chii 的基本步骤：
- 安装 Chii：
- 确保您的开发环境已经安装了 Node.js 和 npm。
- 使用 npm 命令安装 Chii。通常，您可以通过运行 npm install -g chii 来全局安装 Chii。
- 启动 Chii 服务器：
- 在您的开发机器上启动 Chii 服务器。您可以使用命令 chii start -p [端口号] 来启动服务器，其中 [端口号] 是您希望 Chii 服务器监听的端口号。
- 配置目标页面：
- 在移动设备上打开您想要调试的网页。
- 在页面 HTML 中通过 ，确保替换 [端口号] 为您的实际地址和端口号。
- 访问 Chii 控制台：
- 在您的开发机器上打开 Chrome 浏览器。
- 访问 http://localhost:[端口号] 来打开 Chii 的控制台界面。
- 在 Chii 控制台中，您应该能够看到连接到服务器的移动设备页面。
- 开始调试：
- 使用 Chii 控制台中的 Chrome DevTools 功能进行调试。您可以检查元素、查看控制台日志、设置断点、监控网络请求等。
- 集成到工作流：
- 如果您使用版本控制系统（如 Git），可以将 Chii 集成到您的 CI/CD 流程中。
- 您也可以将 Chii 集成到您的开发工具链中，例如与您的 IDE（集成开发环境）或代码编辑器配合使用。
- 注意事项：
- 确保移动设备和开发机器连接到同一个局域网。
- 如果您在外部网络中使用 Chii，可能需要配置网络设置，以便移动设备可以访问开发机器上的 Chii 服务器。
- 调试 HTTPS 页面时，可能需要在 Chii 服务器上配置 SSL 证书。
