一个基于 chrome devtools 的 web 远程调试工具

1. 前言

关于 web 远程调试，最近看到货拉拉的前端团队在这个领域上持续发力，开源了 PageSpy 项目，同时也发表了文章阐述了远程调试的使用场景，解决了很多痛点问题。

那这里我将介绍另外一种 web 远程调试的实现方案：devtools-remote-debugger

项目地址：https://github.com/Nice-PLQ/devtools-remote-debugger

先来看下远程调试的效果

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

2. 介绍

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

目前来说，已实现的功能如下，基本上能够覆盖常用的调试能力，同时也扩展了调试协议，实现了页面实时预览能力。

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、ScreenPreview（扩展协议）

• 页面实时预览

更多信息请参阅项目说明，https://github.com/Nice-PLQ/devtools-remote-debugger