devtools-remote-debugger 项目教程

1. 项目目录结构及介绍

devtools-remote-debugger/
├── devtools-frontend/
├── example/
├── images/
├── src/
├── .editorconfig
├── .env
├── .env.dev
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── LICENSE
├── README.md
├── README_CN.md
├── babel.config.js
├── package.json
├── yarn.lock
└── dist/
    ├── page/
    │   ├── index.css
    │   ├── index.html
    │   ├── index.js
    ├── cdp.js

目录结构介绍

• devtools-frontend/: 基于 Google 开源的 devtools-frontend 项目，用于实现 Chrome DevTools Protocol。
• example/: 示例文件夹，包含用于调试的示例页面。
• images/: 项目中使用的图片资源。
• src/: 项目的主要源代码文件夹。
• dist/: 构建后的项目文件夹，包含调试后端和 CDP 代码。
• .editorconfig: 编辑器配置文件，用于统一代码风格。
• .env: 环境变量配置文件，包含调试端口和域名等信息。
• .env.dev: 开发环境下的环境变量配置文件。
• .eslintignore: ESLint 忽略文件配置。
• .eslintrc.js: ESLint 配置文件。
• .gitignore: Git 忽略文件配置。
• LICENSE: 项目许可证文件。
• README.md: 项目英文介绍文档。
• README_CN.md: 项目中文介绍文档。
• babel.config.js: Babel 配置文件，用于转换 JavaScript 代码。
• package.json: 项目依赖和脚本配置文件。
• yarn.lock: Yarn 依赖锁定文件。

2. 项目启动文件介绍

启动命令

1. 启动 Node 服务

   npm run serve
   

2. 启动客户端

   npm run client
   

启动文件介绍

• npm run serve: 启动 Node 服务，该服务作为中间层，通过 WebSocket 与调试页面和 DevTools 进行通信。
• npm run client: 启动客户端，用于打开调试页面和调试后端页面。

3. 项目配置文件介绍

.env 文件

DEBUG_PORT=8080
DEBUG_HOST='http://localhost:8080'

配置文件介绍

• DEBUG_PORT: 调试服务的端口号，例如 8080。
• DEBUG_HOST: 调试服务的域名，例如 http://localhost:8080。

其他配置文件

• .editorconfig: 编辑器配置文件，用于统一代码风格。
• .eslintrc.js: ESLint 配置文件，用于代码检查和格式化。
• babel.config.js: Babel 配置文件，用于转换 JavaScript 代码。
• package.json: 项目依赖和脚本配置文件，包含项目的启动命令和依赖包信息。

通过以上配置文件和启动命令，您可以轻松启动和配置 devtools-remote-debugger 项目，实现远程调试网页的功能。