devtools-remote-debugger 使用教程

1. 项目介绍

devtools-remote-debugger 是一个基于 Google 开源项目 devtools-frontend 的远程调试工具。通过在网页上简单加载一段 JavaScript 代码，您可以使用熟悉的 Chrome DevTools 来远程调试该网页。被调试的网页通过 WebSocket 连接到一个中间的 Node 层，而 DevTools 也通过 WebSocket 连接到这个 Node 层。Node 层的主要作用是转发网页和 DevTools 之间的套接字协议，实现它们之间的全双工通信。

该项目已被收录在 awesome-chrome-devtools 集合中，提供了丰富的调试功能，包括元素显示、HTML 标签编辑、样式规则显示、节点高亮、控制台 JavaScript 代码执行、错误堆栈显示、网络请求显示、本地存储和会话存储预览等。

2. 项目快速启动

2.1 环境准备

确保您已经安装了 Node.js 和 npm。

2.2 安装依赖

git clone https://github.com/Nice-PLQ/devtools-remote-debugger.git
cd devtools-remote-debugger
npm install

2.3 启动服务

在终端中启动以下两个命令：

1. 启动 Node 服务

npm run serve

2. 启动客户端

npm run client

2.4 打开调试页面

在浏览器中打开两个页面：

• 调试 DEMO 页面：http://localhost:8080/remote/debug/example/index.html
• 调试后台页面：http://localhost:8899/page/index.html

3. 应用案例和最佳实践

3.1 远程调试网页

假设您有一个需要远程调试的网页，您可以在该网页中加载 cdp.js 代码，然后通过 devtools-remote-debugger 提供的调试后台页面进行调试。

3.2 调试跨域问题

由于同源策略的限制，您可能需要对跨域的 CSS 和 JavaScript 文件进行特殊处理。例如，在加载外部样式时，添加 crossorigin="anonymous" 属性。

<link rel="stylesheet" href="https://example.com/styles.css" crossorigin="anonymous">

对于 JavaScript 文件，同样需要添加 crossorigin="anonymous" 属性：

<script src="https://example.com/script.js" crossorigin="anonymous"></script>

4. 典型生态项目

4.1 devtools-frontend

devtools-frontend 是 Google 开源的 Chrome DevTools 前端项目，提供了丰富的调试功能和接口，devtools-remote-debugger 正是基于此项目实现的。

4.2 awesome-chrome-devtools

awesome-chrome-devtools 是一个收集了与 Chrome DevTools 相关工具和资源的集合，devtools-remote-debugger 已被收录其中，展示了其在远程调试领域的应用。

通过以上步骤，您可以快速上手并使用 devtools-remote-debugger 进行网页的远程调试。希望本教程对您有所帮助！