Code Inspector 代码跳转

页面开发提效的神器「Code Inspector」

插件简介

Code Inspector 是款开源免费的页面开发提效的神器，通过点击页面上的元素标签，快读取该元素的属性，并自动打开 IDE 定位至页面点击 DOM 元素的源码位置。对于多人维护的复杂项目来说，在面对不同人员维护的功能模块时，可以快速高效的定位至对应页面模块代码，减少定位和查阅代码所在目录所需的时间，从而很大程度的提高了工作效率。

⏬ 依赖安装

npm

yarn

pnpm

bun

deno

npm install code-inspector-plugin -D

项目配置

webpack 项目配置如下：

webpack.config.js

const { codeInspectorPlugin } = require("code-inspector-plugin");

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

vue-cli 项目配置如下：

vue.config.js

const { codeInspectorPlugin } = require("code-inspector-plugin");

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

vite 项目配置如下：

vite.config.js

import { defineConfig } from "vite";
import { codeInspectorPlugin } from "code-inspector-plugin";

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

Rspack 项目配置如下：

rspack.config.js

const { codeInspectorPlugin } = require("code-inspector-plugin");

module.exports = {
    plugins: [
        codeInspectorPlugin({
            bundler: "rspack",
        }),
    ],
};

Rsbuild 项目配置如下：

rsbuild.config.js

import { defineConfig } from "@rsbuild/core";
const { codeInspectorPlugin } = require("code-inspector-plugin");

export default defineConfig({
    tools: {
        rspack: {
            plugins: [
                codeInspectorPlugin({
                    bundler: "rspack",
                }),
            ],
        },
    },
});

Farm 项目配置如下：

farm.config.js

import { defineConfig } from "@farmfe/core";
import { codeInspectorPlugin } from "code-inspector-plugin";

export default defineConfig({
    vitePlugins: [
        codeInspectorPlugin({
            bundler: "vite",
        }),
    ],
});

umi.js 项目配置如下：

umi.config.js

import { defineConfig } from "@umijs/max";
import { codeInspectorPlugin } from "code-inspector-plugin";

export default defineConfig({
    chainWebpack(memo) {
        memo.plugin("code-inspector-plugin").use(
            codeInspectorPlugin({
                bundler: "webpack",
            })
        );
    },
});

esbuild 项目配置如下：

esbuild.config.js

const esbuild = require("esbuild");
const { codeInspectorPlugin } = require("code-inspector-plugin");

esbuild.build({
    plugins: [
        codeInspectorPlugin({
            bundler: "esbuild",
            dev: () => true,
        }),
    ],
});

配置注意事项

esbuild 中使用时，dev 函数的返回值需自己根据环境判断，本地开发的环境返回 true，线上打包返回 false

astro 项目配置如下：

astro.config.mjs

import { defineConfig } from "astro/config";
import { codeInspectorPlugin } from "code-inspector-plugin";

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

依赖配置

参数名称	默认值	是否必须配置	说明
bundler	vite/webpack/rspack	✅	指定的打包工具类型
hotKeys	['altKey', 'shiftKey'] or 其他	✅	触发功能的组合键
showSwitch	true/false	✅	是否在页面展示一个控制源码定位功能的开关
autoToggle	true/false	✅	自动切换
editor	IDE code 「参考后边 IDE 编码」	✅	指定编辑器
hideConsole	true/false	✅	是否关闭控制台打印
hideDomPathAttr	true/false	❓	是否隐藏 DOM 元素上的 `data-insp-path` 属性

此处列举部分常用配置项，详细配置项参考 Code Inspector 文档 - API 配置

指定 IDE

code-inspector-plugin默认会会扫描系统当前打开当前已打开项目代码运行项目的编辑器；
如需指定打开固定的 IDE 编辑器，需要进行如下配置：
在项目根目录下添加文件.env.local，添加文本内容为：CODE_INSPECTOR_EDITOR=code

.env.local

CODE_INSPECTOR_EDITOR= code

编辑器	编码名称	MacOS	Windows	Linux
Visual Studio Code	code	✅	✅	✅
Cursor	cursor	✅	✅	✅
Visual Studio Code - Insiders	code-insiders	✅	✅	✅
VSCodium	codium	✅	✅	✅
WebStorm	webstorm	✅	✅	✅
Atom	atom	✅	✅	✅
HBuilderX	hbuilder	✅	✅	❌
PhpStorm	phpstorm	✅	✅	✅
PyCharm	pycharm	✅	✅	✅
IntelliJ IDEA	idea	✅	✅	✅
Brackets	brackets	✅	✅	❌
Appcode	appcode	✅	❌	❌
Atom Beta	atom-beta	✅	❌	❌
Clion	clion	✅	✅	❌
Rider	rider	✅	✅	✅
Rubymine	rubymine	✅	✅	✅

插件支持的 IDE 配置文件，可在 Code Inspector 文档 - IDE 配置中查看

#Code Inspector 代码跳转

#插件简介

#⏬ 依赖安装

#项目配置

#依赖配置

#相关文档

#指定 IDE