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

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