Code Inspector页面开发定位代码神器：让开发效率提升 300%

墨颜丶2025-05-102025-05-15

核心功能

Code Inspector 是一款 前端开发调试工具，支持主流框架与构建工具。通过点击页面元素，直接跳转至 IDE 中对应的源码位置，解决以下痛点：

🎯 精准定位：DOM 元素与源码文件快速映射。
⚡ 跨工具支持：适配 Webpack、Vite、Next.js、Nuxt 等构建工具。
🌈 多框架兼容：Vue、React、Svelte、Solid 等框架无缝集成。
🔧 零侵入：无需修改业务代码，配置即生效。

快速接入

code-inspector-plugin 支持在以 webpack/vite/rspack/rsbuild/esbuild/farm/nextjs/nuxt/umijs 作为打包器的项目中使用，支持 vue/react/preact/solid/qwik/svelte/astro 等框架，请参考如下的接入教程。

安装

# 任选其一
npm install code-inspector-plugin -D
yarn add code-inspector-plugin -D
pnpm add code-inspector-plugin -D

配置

根据你的打包工具，完成对应的配置方式。

点击展开查看 webpack 项目配置

// webpack.config.js
const { codeInspectorPlugin } = require('code-inspector-plugin');

module.exports = () => ({
  plugins: [
    codeInspectorPlugin({
      bundler: 'webpack',
    }),
  ],
});

点击展开查看 vite 项目配置

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

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

点击展开查看 vue-cli 项目配置

// vue.config.js
const { codeInspectorPlugin } = require('code-inspector-plugin');

module.exports = {
  // ...other code
  chainWebpack: (config) => {
    config.plugin('code-inspector-plugin').use(
      codeInspectorPlugin({
        bundler: 'webpack',
      })
    );
  },
};

使用

目前使用 DOM 源码定位功能的方式有两种:

快捷键模式（推荐）

在页面上按住组合键时，鼠标在页面移动即会在 DOM 上出现遮罩层并显示相关信息，点击一下将自动打开 IDE 并将光标定位到元素对应的代码位置。 (Mac 系统默认组合键是 Option + Shift；Window 的默认组合键是 Alt + Shift，在浏览器控制台会输出相关组合键提示)

console-success

开关模式（移动端友好）

当插件参数中配置了 showSwitch: true 时，会在页面显示一个代码审查开关按钮，点击可切换代码审查模式开启/关闭，代码审查模式开启后使用方式同方式一中按住组合键。当开关的颜色为彩色时，表示代码审查模式开启；

当开关颜色为黑白时，表示代码审查模式关闭。

基础配置

codeInspectorPlugin 的详细参数配置如下所示：

codeInspectorPlugin({
  bundler: 'vite',
  editor: 'webstorm',     // 指定 WebStorm
  dev: process.env.NODE_ENV === 'development', // 手动判断环境
  enforcePre: false,      // 解决与 eslint-loader 冲突
  hotKeys: ['ctrlKey', 'shiftKey'], // 自定义快捷键为 Ctrl+Shift
  showSwitch: true,       // 启用页面开关
  autoToggle: false,      // 跳转后保持开关开启
});

参数	类型	必填	默认值	说明
`bundler`	`string`	✅	-	指定构建工具类型，可选值：`vite`/`webpack`/`rspack`/`esbuild`。
`editor`	`string`	❌	自动检测	指定 IDE（如 `vscode`、`webstorm`），支持完整列表。当同时运行多个 IDE 时需手动指定。
`dev`	`boolean	function`	❌	自动判断
`enforcePre`	`boolean`	❌	`true`	0.4.0+ 是否添加 `enforce: 'pre'` 配置。若与 `eslint-loader` 冲突，需设为 `false`。
`hotKeys`	`(‘ctrlKey’	‘altKey’	‘metaKey’	‘shiftKey’)[]`
`showSwitch`	`boolean`	❌	`false`	是否显示「代码审查开关」，移动端推荐启用。
`autoToggle`	`boolean`	❌	`true`	配合 `showSwitch: true` 使用，触发跳转 IDE 后自动关闭开关，防止误触。

关键说明

版本兼容性
- dev 参数需插件版本 ≥ 0.5.0。
- enforcePre 参数需插件版本 ≥ 0.4.0。
快捷键冲突
- 若需禁用快捷键，设置 hotKeys: []。
- 组合键优先级：ctrlKey > altKey > metaKey > shiftKey。
IDE 自动检测
- 默认根据系统进程自动识别 IDE，多 IDE 共存时需通过 editor 参数强制指定。