1. vite-plugin-vue-devtools
npm i vite-plugin-vue-devtools -Dvite.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
