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

[Chrome 插件] 写了一个针对 React 项目本地开发时,点击页面上对应元素即可跳转到编辑器对应组件位置的 Chrome 插件

  •  2
     
  •   you222 · 2023-01-11 12:29:21 +08:00 · 2390 次点击
    这是一个创建于 707 天前的主题,其中的信息可能已经有所发展或是发生改变。

    安装地址:react1s

    github 地址:react1s

    Option+Click 页面上对应元素即可跳转到编辑器对应组件行列

    预览图如下: demo

    17 条回复    2023-01-12 08:52:51 +08:00
    no13bus
        1
    no13bus  
       2023-01-11 12:33:53 +08:00
    好神奇,这是啥原理
    djs
        2
    djs  
       2023-01-11 12:36:00 +08:00
    这个好呀,先 mark 下
    you222
        3
    you222  
    OP
       2023-01-11 12:40:19 +08:00
    随着 React 项目越来越大,在本地开发时经常会遇到这样一个场景,想改页面上的一个功能,但是比较难去找到这个功能在编辑器中对应的页面 & 组件的位置。这时候使用本插件可以支持一键点击页面元素跳转到编辑器对应文件的行数。
    cation
        4
    cation  
       2023-01-11 13:27:16 +08:00
    赞一个, 有些是动态展示的 dom 不知道能不能支持。
    you222
        5
    you222  
    OP
       2023-01-11 13:30:33 +08:00   ❤️ 1
    @no13bus 主要是通过 babel-plugin-transform-react-jsx-source 这个 babel 插件去拿到 dom 节点的文件信息来实现跳转打开到对应的位置
    you222
        6
    you222  
    OP
       2023-01-11 13:31:16 +08:00
    @cation 可以定位到动态展示的 dom 的父节点那一行的位置
    shuxge1223
        7
    shuxge1223  
       2023-01-11 14:40:04 +08:00
    好像在 producthunt 看到类似的项目 是你吗
    sunjourney
        8
    sunjourney  
       2023-01-11 14:42:10 +08:00   ❤️ 1
    LocatorJS 专门做这个的
    looppppp
        9
    looppppp  
       2023-01-11 14:42:22 +08:00
    太强了,赞赞赞
    chenzhe
        10
    chenzhe  
       2023-01-11 14:50:55 +08:00
    很好用,赞赞赞。
    rookiebulls
        11
    rookiebulls  
       2023-01-11 15:29:31 +08:00 via iPhone
    刚好能解决我现在老项目碰到的问题,试用一下
    zhuangpipi
        12
    zhuangpipi  
       2023-01-11 15:50:23 +08:00
    确实好用
    bury
        13
    bury  
       2023-01-11 15:54:17 +08:00
    看起来很不错!
    angith
        14
    angith  
       2023-01-11 15:59:36 +08:00
    牛皮
    randomstream
        15
    randomstream  
       2023-01-11 16:18:45 +08:00
    记得好像 Vue 那边也有人做过了?
    zthxxx
        16
    zthxxx  
       2023-01-11 17:34:12 +08:00
    楼主做的挺好的,比这个的实现简洁 https://github.com/zthxxx/react-dev-inspector
    sechi
        17
    sechi  
       2023-01-12 08:52:51 +08:00
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   7 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 21:56 · PVG 05:56 · LAX 13:56 · JFK 16:56
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.