看来远程调试是一大痛点。介绍了一个基于 Chrome Devtools 的远程调试工具,可以让前端开发者更好地调试远程 web 页面。今日文章由腾讯前端工程师 @Linkpan 分享。
Devtools-Remote-Debugger 正如其名,是一个基于最新版 Chrome Devtools 开发者工具构建的 Web 远程调试工具。它能够让 Web 开发者使用最熟悉的 devtools 调试工具来远程调试 Web 项目。
GitHub 项目地址:https://github.com/Nice-PLQ/devtools-remote-debugger
视频:http://mpvideo.qpic.cn/0bc3haaa6aaajmac675xvvsfaogdb44aadya.f10002.mp4?
Chrome Devtools 是前端几乎每天都需要用到的开发调试工具,其功能强大,易用,使用场景多种多样,包括但不限于 node、小程序开发等。devtools 本身是开源的前端项目,很容易构建并集成,并与 Chrome DevTools Protocol (简称 CDP) 协议进行对接。然后再通过 Javascript 按 CDP 的规范实现其协议,就可以实现远程调试 Web 的能力。
简单来说,实现远程调试需要具备三个条件:
Chrome Devtools 与目标页面之间的协议交互是用 websocket 来通信的。通过实现一个 websocket 转发的中间服务层,其作用是将 devtools 的协议消息转发给目标页面处理,或将目标页面的协议消息转发给 devtools 处理。大概的示意图如下
npm run start
部署远程调试后端 Node 服务不管是从调试能力、调试效果还是调试体验来说,都远比常规的 VConsole 或其他调试工具要好。目前,已实现的功能如下,基本上能够覆盖常用的调试能力,同时也扩展了调试协议,实现了页面实时预览能力。
展示当前可调试的页面信息
console.log/warn
调用堆栈页面实时预览
GitHub 项目地址:https://github.com/Nice-PLQ/devtools-remote-debugger