大家好，我是若川。我持續組織了近一年的源碼共讀活動，感興趣的可以?點此掃碼加我微信?ruochuan12?參與，每周大家一起學習200行左右的源碼，共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》?包含20余篇源碼文章。歷史面試系列。另外：目前建有江西|湖南|湖北籍前端群，可加我微信進群。
在日常開發中，當項目組件特別多或者剛接手一個項目時，可能需要花費一定時間去查找頁面元素/組件對應的代碼。我曾經寫過類似原理文章。據說 99% 的人不知道 vue-devtools 還能直接打開對應組件文件？本文原理揭秘
下面就來分享幾個插件，通過這些插件，點擊頁面元素就可以直接跳轉到 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
·················?若川簡介?·················
你好，我是若川，畢業于江西高校。現在是一名前端開發“工程師”。寫有《學習源碼整體架構系列》20余篇，在知乎、掘金收獲超百萬閱讀。
從2014年起，每年都會寫一篇年度總結，已經堅持寫了8年，點擊查看年度總結。
同時，最近組織了源碼共讀活動，幫助5000+前端人學會看源碼。公眾號愿景：幫助5年內前端人走向前列。
掃碼加我微信 lxchuan12、拉你進源碼共讀群
今日話題
目前建有江西|湖南|湖北?籍 前端群，想進群的可以加我微信 lxchuan12?進群。分享、收藏、點贊、在看我的文章就是對我最大的支持~
