这是一个创建于 528 天前的主题，其中的信息可能已经有所发展或是发生改变。
今天我遇到要改一个很小的地方，但是第一下不知道源代码在哪个文件。我记得之前论坛里有人开发了一个工具，可以直接从页面元素跳转到源代码的，有人记得吗可以把那个帖子找出来再发我一下吗？
还有，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 了，就没这个需求了，找到源码是很简单的。
如果我都在 devtools 内看到 Component 了，就没这个需求了，找到源码是很简单的。
 |
1
hymxm 2023-07-12 15:11:53 +08:00
|
 |
4
wednesdayco 2023-07-12 16:23:52 +08:00
一般说来看看这个元素上有没有挂个啥特殊的 class 然后去工程里全局搜一下完事儿;要是没有 就看父级👀
|
 |
5
polarbearn 2023-07-12 17:03:29 +08:00
vue devtool 自带跳转代码功能的
![https://s1.locimg.com/2023/07/12/930541f67e672.png] |
 |
6
you222 2023-07-12 17:13:25 +08:00
https://www.v2ex.com/t/908112
这个帖子么，不过这个帖子里面的只支持 React |
 |
7
harrozze 2023-07-12 17:17:33 +08:00
@polarbearn #5 同。最新版是 Vue.js devtools
6.5.0 |
|
8
harrozze 2023-07-12 17:18:11 +08:00
|
 |
9
yetrun OP @retanoj 再怎么按钮也没用，这是在 devtools 内部，我要的是在页面内部。我如果已经在 devtools 内部，说明我就知道组件名了，就可以直接找到对应的源码了。
比如，我在页面下的 `<div>xxx</div>`，通过某种方式知道它是属于哪个组件的？ |
 |
11
ochatokori 2023-07-12 17:36:36 +08:00 via Android
el.__vue__这个可以找到 vue 实例，然后在控制台应该就很容易找到了
|
|
12
yetrun OP @ochatokori 啊，也感谢你，通过 el.__vueParentComponent.parent.parent.parent.type 也找到了
|
|
13
you222 2023-07-21 15:19:03 +08:00
|
Select Language