关于 web 远程调试,最近看到货拉拉的前端团队在这个领域上持续发力,开源了 PageSpy 项目,同时也发表了文章阐述了远程调试的使用场景,解决了很多痛点问题。
那这里我将介绍另外一种 web 远程调试的实现方案:devtools-remote-debugger
项目地址:https://github.com/Nice-PLQ/devtools-remote-debugger
为了方便演示,用单独窗口来模拟,动态图片比较大,可能需要点加载时间
Chrome Devtools 是前端几乎每天都需要用到的开发调试工具,其功能强大,易用,使用场景多种多样,包括但不限于 node 、小程序开发等。devtools 本身是开源的前端项目,很容易构建并集成,并与 Chrome DevTools Protocol(简称 CDP
)协议进行对接。然后再通过 Javascript 按 CDP 的规范实现其协议,就可以实现远程调试 Web 的能力。
简单来说,实现远程调试需要具备三个条件:
CDP
的协议规范,构建出 sdk.js(文件名称任意),并在被调试页面中加载该 jsweb
页面websocket
协议转发Chrome Devtools 与目标页面之间的协议交互是用 websocket
来通信的。通过实现一个 websocket
转发的中间服务层,其作用是将 devtools 的协议消息转发给目标页面处理,或将目标页面的协议消息转发给 devtools 处理。大概的示意图如下
sdk.js
代码,该 SDK 是CDP
的协议实现。然后在需要调试的 Web 项目 HTML 中加载该文件npm run start
部署远程调试后端 Node 服务目前来说,已实现的功能如下,基本上能够覆盖常用的调试能力,同时也扩展了调试协议,实现了页面实时预览能力。
更多信息请参阅项目说明,https://github.com/Nice-PLQ/devtools-remote-debugger
1
musi 288 天前 via iPhone
支持 Chrome 插件吗
|
5
yafoo 287 天前 via Android
看起来不错,明天试试。有一个 bug 存在好长时间了,年前用货拉拉那个试了试,最后没找到原因,明天用你这个再试试。
|