1. vite-plugin-vue-devtools
npm i vite-plugin-vue-devtools -D?vite.config.js中配置
import vueDevTools from 'vite-plugin-vue-devtools'export default defineConfig({server: {port: 5173,host: '0.0.0.0'},plugins: [vue(),vueJsx(),vueDevTools({componentInspector: true,launchEditor: "webstorm"}),BASIC_SSL()],
})
2. react-dev-inspector
配置比較繁瑣（請自行百度）
3.?code-inspector-plugin【推薦】
npm install code-inspector-plugin -D
在打包工具配置文件中引入插件（支持?vite、webpack、rspack、esbuild?等）：
// vite.config.ts
import { codeInspectorPlugin } from 'code-inspector-plugin';export default {plugins: [codeInspectorPlugin({bundler: 'vite',editor: 'code',showSwitch: true,}),],
}使用方式
方法一：快捷鍵模式
-
Mac：
Option + Shift -
Windows：
Alt + Shift -
鼠標懸停 + 點擊，IDE 自動跳轉到對應代碼
方法二：頁面按鈕切換
-
配置?
showSwitch: true?后頁面會出現按鈕 -
開啟后點擊元素即可跳轉
支持技術棧
-
打包工具：
vite、webpack、rspack、esbuild、farm、nextjs、nuxt、umijs、rsbuild -
框架：
vue、react、preact、solid、qwik、svelte、astro
?注意事項
-
如果你是?微前端， 那么主應用 + 子應用都要加插件，另外如果無法打開編輯器，
在根目錄下新建?
.env.local?文件，設置?CODE_EDITOR=xxx，如：CODE_EDITOR=/home/xxx/.vscode-server/bin/xxx/remote-cli/code這個值是應用的啟動地址，具體看這里：https://inspector.fe-dev.cn/guide/ide.html#%E5%85%B6%E4%BB%96-ide
官網：https://inspector.fe-dev.cn/
倉庫：https://github.com/zh-lx/code-inspector
