关于 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 的能力。
简单来说，实现远程调试需要具备三个条件：
[ol]
[/ol]
Chrome Devtools 与目标页面之间的协议交互是用 websocket 来通信的。通过实现一个 websocket 转发的中间服务层，其作用是将 devtools 的协议消息转发给目标页面处理，或将目标页面的协议消息转发给 devtools 处理。大概的示意图如下
如何使用远程调试
[ol]
[/ol]
目前来说，已实现的功能如下，基本上能够覆盖常用的调试能力，同时也扩展了调试协议，实现了页面实时预览能力。
1 、调试管理端
2 、Element
3 、Console
4 、Source
5 、Network
6 、Application
7 、ScreenPreview （扩展协议）
更多信息请参阅项目说明，https://github.com/Nice-PLQ/devtools-remote-debugger
