百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程网 > 正文

点击页面元素跳转IDE对应代码,试试这几个工具

yuyutoo 2025-01-02 20:11 1 浏览 0 评论

大家好,我是 Echa。

在日常开发中,当项目组件特别多或者刚接手一个项目时,可能需要花费一定时间去查找页面元素/组件对应的代码。下面就来分享几个插件,通过这些插件,点击页面元素就可以直接跳转到 IDE 对应的代码,提高开发效率!

Vue Devtools

Vue 官方调试工具 Vue Devtools 是支持点击组件直接跳转到编辑器并打开对应代码的。只需要定位页面的组件,Devtools 就会识别对应的组件,点击选中组件,再点右上角的链接按钮即可跳转到 IDE 中对应的组件。

LocatorJS

使用 LocatorJS,在浏览器中单击 UI 组件就可以直接在 IDE 中打开其代码。可以通过浏览器插件(支持 Chrome 和 Firfox)或者在项目中安装依赖来引入 LocatorJS,其适用于 React、Preact、Solid、Vue 和 Svelte。

Github:https://github.com/infi-pc/locatorjs

click-to-component

Option+单击浏览器中的 React 所以就会立即在 VS Code 中打开源代码。适用于 Next.js、 Create React App 和 Vite 等。

Github:https://github.com/ericclemmons/click-to-component

react-dev-inspector

只需单击一下即可直接打开浏览器 React 组件跳转到本地 IDE 对用的代码。适用于几乎所有的事情 React 框架,例如 Vite、 Next.js、 Create React App、 Umi3、 Ice.js,或任何其他在内置中使用 @babel/plugin-transform-react-jsx-source 的 React 项目。该插件仅适用于 VS Code,但简单,无需任何其他配置。

Github:https://github.com/zthxxx/react-dev-inspector

vite-plugin-react-inspector

这个 vite 插件允许用户通过简单的点击直接从浏览器 React 组件跳转到本地 IDE 代码。支持 React 16、17、18。这些开箱即用的功能只需要在 vite.config.ts 中添加这个插件即可。

Github:https://github.com/sudongyuer/vite-plugin-react-inspector

vite-plugin-vue-inspector

一个 vite 插件,当点击浏览器的元素时,它提供了自动跳转到本地 IDE 的能力,支持 Vue2、Vue3、Nuxt3、SSR。

Github:https://github.com/webfansplz/vite-plugin-vue-inspector

相关推荐

C语言头文件中 #ifndef #define #endif 的作用

头文件的第一个功能就是#include指令,即在预编译时把它后面所写的那个文件的内容,完完整整地一字不改地包含到当前的文件中来。多次包含相同的头文件,会导致编译器多次编译该头文件,代码量小还好,代...

SpringBoot中静态变量注入方案,一网打尽

前言Hi,大家好,我是麦洛,昨天同事来找我。说自己想使用@Value注解来注入值,但是发现注入不进去,想让我帮忙看看。研究了一番,最后发现是@Value注解无法注入静态变量。下面我们一起来回顾一下本次...

java各种类型变量你还不傻傻分不清?最全的变量都在这

前言互联网上有很多关于变量的解释。质量参差不齐,所以我写了这篇文章和我的理解。如果有什么不对劲的地方,速速指教。变量是我们经常使用的一种类型。当我第一次学习Java时,我经常被各种变量的概念所折磨。那...

(建议收藏)关于单片机检查变量的方法,你会几种?

这些单片机调试方法你真的知道吗?导读:授人以鱼不如授人以渔,为什么那些前辈们能快捷定位问题,这个系列的文章将揭秘KEIL调试那些不为人知的事。以下内容更适用于STM32单片机(51也支持局部...

Excel VBA入门教程1.2 常量和变量

定义后不能被改变的量,就是常量;相反的...

"两组"连续变量之间的相关分析(SPSS:典型相关分析)

典型相关分析的基本思路:首先采用类似主成分分析的方法,在两组连续变量中分别提取变量的线性组合(综合变量),使两组的综合变量间具有最大的相关性。然后在两组连续变量中分别提取第二对线性组合,使提取的综合变...

CPU眼里的:静态、全局、临时变量

“静态、全局、临时变量,它们有什么区别?为什么要把变量分成这么多的类别?这么做的意义在哪里?有什么好处呢?...

C语言变量的初始值,隐藏很多危险?如何危险?

变量的初始值局部变量如果没初始化,那么,变量的值是创建变量,申请内存空间的时候,内存空间存放的数据。所以,局部变量得到的数据是一个随机值。就是变量空间中,存放的原始内存数据。全局变量如果没有初始化,那...

C语言里的static变量其他语言是看不上还是学不去?

C语言里的static变量其他语言是看不上还是学不去?static变量在C语言中被用于具有静态存储期的局部变量或全局变量。它有以下几个特点:1.静态存储期:static变量在程序执行时分配内存,直到...

静态变量是在什么时候被加载的?是编译器还是在运行期?

静态变量的加载过程一般情况下是发生在在程序运行时的初始化阶段。具体来讲是在程序运行的时候,当类被第一次被加载到内存中的时候。这也就是是说,一个静态变量的生命周期是从类第一次被加载到内存时开始,直到程序...

C语言的随机数函数和静态变量

ANSI-C库提供了rand()函数生成随机数。生成随机数有多种算法,ANSI-C允许C实现针对特定机器使用最佳算法。然而,ANSI-C标准还提供了一个可移植的标准算法,在不同系统中生成相同的随机数。...

「C++学习笔记(十)」理解类中的静态成员变量与静态成员函数

一.类的静态成员大家应该都知道静态变量,就是在变量前面加上static,类的静态成员也是同样的道理,在类的成员函数与成员变量前面加上static声明为类的静态成员。和静态变量的原理一样,不管这个类创...

CPU眼里的:变量

“变量,是所有编程语言的基本元素,但变量的物理意义,你有了解过吗?是的,没有物理意义,变量的语法意义将荡然无存!...

【VBA基础】变量的类型和申明变量类型的重要性

各位朋友,你们好,今天和你们聊点VBA基础知识:VBA变量。注:此文字数约3500字,主要是讲解VBA变量知识,通过一些动图展示变量上的效果;如果你是初学者,建议先收藏此文,看看最后给初学者的建议那一...

变量,还有这些秘密

1、变量的意义任何一门高级开发语言,都离不开变量。通过变量,编程语言才能搬运和表达我们的小心思。变量是机器指令语义化的第一步,却是高级开发语言进化的一大步。2、变量的起源在计算机编年史里的蛮荒时代,人...

取消回复欢迎 发表评论: