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

[yetrun]

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

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

统一补充一下：我不是要从 devtools 的 Component 到组件的源码，而是从页面的元素到组件的源码。请大家帮助我。比如 Chrome 里可以右键 “查看元素” 到 HTML 的源码，有没有类似的右键 “查看 Vue Component” 的方案。

如果我都在 devtools 内看到 Component 了，就没这个需求了，找到源码是很简单的。

[hymxm]

https://sm.ms/image/SMHBjurg2AepxhY

[yetrun]

@hymxm 我要的效果是反过来的，知道页面的元素，不知道对应的组件。

[retanoj]

@yetrun 你看 1L 的图，右上角第一排倒数第三个，像个准星一样的按钮

[wednesdayco]

一般说来看看这个元素上有没有挂个啥特殊的 class 然后去工程里全局搜一下完事儿;要是没有 就看父级👀

[polarbearn]

vue devtool 自带跳转代码功能的
![https://s1.locimg.com/2023/07/12/930541f67e672.png]

[you222]

https://www.v2ex.com/t/908112
这个帖子么，不过这个帖子里面的只支持 React

[harrozze]

@polarbearn #5 同。最新版是 Vue.js devtools
6.5.0

[harrozze]

@harrozze #7 https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

[yetrun]

@retanoj 再怎么按钮也没用，这是在 devtools 内部，我要的是在页面内部。我如果已经在 devtools 内部，说明我就知道组件名了，就可以直接找到对应的源码了。

比如，我在页面下的 `<div>xxx</div>`，通过某种方式知道它是属于哪个组件的？

[yetrun]

@you222 对对，就是这个帖子。但我记得也有一个 Vue 的方案，是作者和他表哥一起做的。

[ochatokori]

el.__vue__这个可以找到 vue 实例，然后在控制台应该就很容易找到了

[yetrun]

@ochatokori 啊，也感谢你，通过 el.__vueParentComponent.parent.parent.parent.type 也找到了

[you222]

@yetrun 优化了一下，现在支持 Vue3 项目的跳转了，但是只能跳转到具体的文件，跳转不到具体的行列
https://github.com/aaamoon/react1s