V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
yetrun
V2EX  ›  Vue.js

如何从页面元素跳转到项目源代码?

  •  
  •   yetrun · 2023-07-12 14:28:49 +08:00 · 1674 次点击
    这是一个创建于 481 天前的主题,其中的信息可能已经有所发展或是发生改变。

    今天我遇到要改一个很小的地方,但是第一下不知道源代码在哪个文件。我记得之前论坛里有人开发了一个工具,可以直接从页面元素跳转到源代码的,有人记得吗可以把那个帖子找出来再发我一下吗?

    还有,devtools 是否有右键 inspect vue component 的功能,我发现我的 Mac 下的 Chrome 没有,我用的是 Vue 3.

    第 1 条附言  ·  2023-07-12 17:33:27 +08:00
    统一补充一下:我不是要从 devtools 的 Component 到组件的源码,而是从页面的元素到组件的源码。请大家帮助我。比如 Chrome 里可以右键 “查看元素” 到 HTML 的源码,有没有类似的右键 “查看 Vue Component” 的方案。

    如果我都在 devtools 内看到 Component 了,就没这个需求了,找到源码是很简单的。
    13 条回复    2023-07-21 15:19:03 +08:00
    hymxm
        1
    hymxm  
       2023-07-12 15:11:53 +08:00
    yetrun
        2
    yetrun  
    OP
       2023-07-12 15:18:27 +08:00
    @hymxm 我要的效果是反过来的,知道页面的元素,不知道对应的组件。
    retanoj
        3
    retanoj  
       2023-07-12 16:15:13 +08:00
    @yetrun 你看 1L 的图,右上角第一排倒数第三个,像个准星一样的按钮
    wednesdayco
        4
    wednesdayco  
       2023-07-12 16:23:52 +08:00
    一般说来看看这个元素上有没有挂个啥特殊的 class 然后去工程里全局搜一下完事儿;要是没有 就看父级👀
    polarbearn
        5
    polarbearn  
       2023-07-12 17:03:29 +08:00
    vue devtool 自带跳转代码功能的
    ![https://s1.locimg.com/2023/07/12/930541f67e672.png]
    you222
        6
    you222  
       2023-07-12 17:13:25 +08:00
    https://www.v2ex.com/t/908112
    这个帖子么,不过这个帖子里面的只支持 React
    harrozze
        7
    harrozze  
       2023-07-12 17:17:33 +08:00
    @polarbearn #5 同。最新版是 Vue.js devtools
    6.5.0
    yetrun
        9
    yetrun  
    OP
       2023-07-12 17:29:54 +08:00
    @retanoj 再怎么按钮也没用,这是在 devtools 内部,我要的是在页面内部。我如果已经在 devtools 内部,说明我就知道组件名了,就可以直接找到对应的源码了。

    比如,我在页面下的 `<div>xxx</div>`,通过某种方式知道它是属于哪个组件的?
    yetrun
        10
    yetrun  
    OP
       2023-07-12 17:34:53 +08:00
    @you222 对对,就是这个帖子。但我记得也有一个 Vue 的方案,是作者和他表哥一起做的。
    ochatokori
        11
    ochatokori  
       2023-07-12 17:36:36 +08:00 via Android
    el.__vue__这个可以找到 vue 实例,然后在控制台应该就很容易找到了
    yetrun
        12
    yetrun  
    OP
       2023-07-12 17:43:19 +08:00
    @ochatokori 啊,也感谢你,通过 el.__vueParentComponent.parent.parent.parent.type 也找到了
    you222
        13
    you222  
       2023-07-21 15:19:03 +08:00
    @yetrun 优化了一下,现在支持 Vue3 项目的跳转了,但是只能跳转到具体的文件,跳转不到具体的行列
    https://github.com/aaamoon/react1s
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   981 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 22:05 · PVG 06:05 · LAX 14:05 · JFK 17:05
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.