前言
前几天推荐的 react-dev-inspector 可以说是深受大家喜爱，但是它的配置比较繁琐，需要三个部分：babel midware idea的配置比较繁琐！
今天推荐一个只需要一步配置就可以搞定的插件：Code Inspector！
往期精彩推荐
- 优雅，太优雅了，NestJS 🔥 实在是太优雅了！🚀🚀🚀
- 🚀🚀 🚀 太棒了，有了它，终于不用翻阅屎山💩代码了！
- 什么❓你还在用 vue-devtools，快来试试 vite-plugin-vue-devtools ❤️ ，更加丝滑🛹，更加全能！🚀🚀
- 更多精彩文章欢迎关注我的公众号：萌萌哒草头将军
正文
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
这个值是应用的启动地址，具体看这里：inspector.fe-dev.cn/guide/ide.h…
最后
Code Inspector 是我近期用过非常爽的开发辅助工具之一，对刚接手项目的人来说简直是神器。
今天的分享就这些了，感谢大家的阅读，如果文章中存在错误的地方欢迎指正！
