基于Chrome Devtools的远程调试实现

Devtools-Remote-Debugger 正如其名，是一个基于最新版Chrome Devtools开发者工具构建的Web远程调试工具。它能够让Web开发者使用最熟悉的devtools调试工具来远程调试Web项目。

GitHub项目地址：github.com/Nice-PLQ/de…

先来看下远程调试的效果

为了方便演示，用单独窗口来模拟，动态图片比较大，可能需要点加载时间

Chrome Devtools 是前端几乎每天都需要用到的开发调试工具，其功能强大，易用，使用场景多种多样，包括但不限于 node、小程序开发等。devtools 本身是开源的前端项目，很容易构建并集成，并与 Chrome DevTools Protocol(简称CDP)协议进行对接。然后再通过Javascript按CDP的规范实现其协议，就可以实现远程调试Web的能力。

简单来说，实现远程调试需要具备三个条件：

1. 通过原生Javascript实现CDP的协议规范，构建出sdk.js(文件名称任意)，并在被调试页面中加载该js
2. 构建出Chrome Devtools前端产物，并部署为web页面
3. 实现websocket协议转发

Chrome Devtools 与目标页面之间的协议交互是用 websocket 来通信的。通过实现一个 websocket 转发的中间服务层，其作用是将 devtools 的协议消息转发给目标页面处理，或将目标页面的协议消息转发给 devtools 处理。大概的示意图如下

为什么需要远程调试

1. 外网用户反馈一些页面异常，比如某些操作没响应（大概率JS报错）,上报日志不一定能排除问题
2. 本地开发时没有问题，但在某些真机上表现不对
3. 测试同学反馈web在某个机型某个系统版本上有bug，然而我们没有同等条件下的机器来复现（测试团队与开发团队在不同地域）

如何使用远程调试

1. 根据项目README说明构建出sdk.js代码，该SDK是CDP的协议实现。然后在需要调试的Web项目HTML中加载该文件
2. npm run start部署远程调试后端Node服务
3. 建立连接后，在调试管理端打开Chrome Devtools开发者工具来调试目标页面

不管是从调试能力、调试效果还是调试体验来说，都远比常规的VConsole或其他调试工具要好。目前，已实现的功能如下，基本上能够覆盖常用的调试能力，同时也扩展了调试协议，实现了页面实时预览能力。

1、调试管理端

• 展示当前可调试的页面信息

2、Element

• HTML实时查看、属性编辑
• Style、Computed样式预览
• hover元素高亮
• 元素审查
• Screencast

3、Console

• JS代码执行
• JS运行时错误堆栈预览
• DOM元素片段
• 查看console.log/warn调用堆栈

4、Source

• JS运行时错误代码文件定位及索引
• 查看HTML、JS、CSS源文件代码
• 源代码格式化预览

5、Network

• 异步请求抓包（Fetch、XHR）
• HTML、JS、CSS静态资源请求抓包

6、Application

• Local Storage
• Session Storage
• Cookies

7、Screenshot（扩展协议）

• 页面实时预览

引用连接

• Chrome DevTools Protocol
• ChromeDevTools/devtools-frontend