V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
plqqlp123
V2EX  ›  分享创造

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

  •  
  •   plqqlp123 · 137 天前 · 1456 次点击
    这是一个创建于 137 天前的主题,其中的信息可能已经有所发展或是发生改变。

    1. 前言

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

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

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

    先来看下远程调试的效果

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

    237612275-93c5cbb4-c13d-4f93-866c-9b97ffc327e9.gif

    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 处理。大概的示意图如下

    image.png

    如何使用远程调试

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

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

    1 、调试管理端

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

    iShot_2023-07-19_10.15.16.png

    2 、Element

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

    element.gif

    screencast.gif

    3 、Console

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

    console.gif

    4 、Source

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

    source.gif

    5 、Network

    • 异步请求抓包( Fetch 、XHR )
    • HTML 、JS 、CSS 、图片等静态资源请求抓包

    network.gif

    6 、Application

    • Local Storage
    • Session Storage
    • Cookies

    application.gif

    7 、ScreenPreview (扩展协议)

    • 页面实时预览

    screen_preview.gif

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

    6 条回复    2024-03-11 07:42:00 +08:00
    musi
        1
    musi  
       136 天前 via iPhone
    支持 Chrome 插件吗
    plqqlp123
        2
    plqqlp123  
    OP
       136 天前
    @musi 暂时没支持插件哈,不过可以考虑下在什么场景下会需要用到 chrome 插件的场景
    musi
        3
    musi  
       136 天前 via iPhone
    @plqqlp123 前端的各种开发者工具,vue-devtools 场景不应该很多嘛
    plqqlp123
        4
    plqqlp123  
    OP
       136 天前
    @musi 这个主要是远程调试的场景
    yafoo
        5
    yafoo  
       136 天前 via Android
    看起来不错,明天试试。有一个 bug 存在好长时间了,年前用货拉拉那个试了试,最后没找到原因,明天用你这个再试试。
    musi
        6
    musi  
       135 天前 via iPhone
    @plqqlp123 #4 远程调试场景为什么就不会存在 vue 开发者工具呢?官方还出了一个 electron 版本用于远程调试
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   979 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 20:31 · PVG 04:31 · LAX 13:31 · JFK 16:31
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.