当前位置：首页 > news >正文

快速定位到源码位置的插件 - vite/webpack

news 来源：原创 2025/5/15 9:38:55

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