在浏览器里看到一个样式问题或交互 bug，然后开始在庞大的项目里疯狂搜索对应的组件文件； 或者在 Code Review 时想快速找到某个 UI 元素的源码位置，却要在文件树里翻来翻去。 这种「人肉定位」不仅打断心流，还非常费时间。

原文发布在掘金 · 含各框架完整配置示例

下面是插件能力与用法要点的整理，各构建工具的完整配置代码请到掘金阅读。

在掘金阅读全文

一句话要点

  • 核心能力只有一件事：点击 DOM，直接定位到 IDE 里的源码行。
  • 覆盖 webpack / vite / rspack / rsbuild / esbuild / farm / mako，以及 Vue / React / Solid / Svelte / Astro / Next / Nuxt / Umi 等框架。
  • 只工作在开发环境，生产构建零注入、零负担。

它是什么

code-inspector-plugin 是一个面向现代前端工程化的构建工具插件。 它在开发环境下为页面元素注入一个「定位器」，让你从浏览器到 IDE 的跳转变得无比顺滑。

快速上手

1. 安装

npm install code-inspector-plugin -D
# 或 yarn / pnpm 同款

2. 配置（以 Vite 为例）

// vite.config.js
import { defineConfig } from 'vite';
import { codeInspectorPlugin } from 'code-inspector-plugin';

export default defineConfig({
  plugins: [codeInspectorPlugin({ bundler: 'vite' })],
});

Webpack 走 plugins 数组，Next.js 在 next.config.js 的 webpack 配置里 push，Nuxt 3 挂在 nuxt.config 的 vite.plugins 上。 Rspack、Rsbuild、Umi 的写法同样直观。

3. 使用：两种方式

  • 组合键触发：Mac 默认 Option + Shift，Windows 默认 Alt + Shift。 按住后移动鼠标，DOM 上会出现遮罩层并显示文件路径与行号，在目标元素上点击一下， IDE 会自动打开并精确跳转到该行。
  • 开关触发：配置里设 showSwitch: true，页面右上角会出现一个「代码审查」开关按钮， 点击后进入审查模式，操作方式与组合键一致。

为什么值得一试

  • 极致提效：把「寻找源码」从分钟级压到毫秒级，接手不熟悉的项目时效果尤其明显。
  • 侵入性低：只工作在开发环境，生产构建不会添加任何额外代码。
  • 生态丰富：覆盖面足够广，总有一种配置方式适合你的项目。
  • 体验流畅：遮罩与信息显示清晰，跳转响应迅速。
这是一个典型的「小而美」工具：它解决了一个前端开发中普遍存在、 但又常常被忽略的痛点。一旦用上，很快就会变成工具箱里离不开的一员。
© 2026 HOLZWEGE 返回随笔列表