握草，这么好用的插件我怎么才发现！

前言

前几天推荐的 react-dev-inspector 可以说是深受大家喜爱，但是它的配置比较繁琐，需要三个部分：babelmidwareidea的配置比较繁琐！

今天推荐一个只需要一步配置就可以搞定的插件：Code Inspector！

正文

Code Inspector 是一款通过点击页面 DOM 元素，自动打开 IDE 并定位到源代码位置的开发辅助工具。它的特点是：零侵入、开发专用、兼容广、配置简单。

核心功能

• 点击定位源码：鼠标悬停元素 + 快捷键，点击即跳转
• 支持切换按钮模式：无需记快捷键，点击页面按钮也能定位
• 开发专用：默认只在 dev 模式下启用，不影响生产环境

安装方式

执行：

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

/github.com/zh-lx/code-inspector