code-inspector is a TypeScript, MIT-licensed developer tool that lets a developer click any element on a running web page and have their code editor open automatically with the cursor placed at that element's source code, and it is built for front-end engineers working in bundler-driven Vue, React, Svelte, Astro, and comparable component frameworks.

What it is

code-inspector is a build-tool plugin published on npm as code-inspector-plugin and developed in TypeScript. It hooks into the JavaScript front-end build ecosystem, where it is registered inside a bundler's configuration file and paired with the framework that bundler is compiling. The supported bundlers are webpack, vite, rspack and rsbuild, farm, esbuild, turbopack, and mako, and the supported frameworks are vue2, vue3 and nuxt; react, nextjs and umijs; preact; solid; qwik; svelte; and astro. Editor launching is handled through a companion project named launch-ide, which maintains the supported editor list, with additional editor options documented on the project's site at inspector.fe-dev.cn.

The concrete problem it solves is the manual round trip between a rendered page and the file that produced it. During development, locating the source of a visible element normally means inspecting the node in the browser's developer tools, inferring which component rendered it, and then searching the project for that component by hand. code-inspector replaces that hunt with a click: the running page becomes the entry point into the codebase, and the bundler's own knowledge of where components came from is what drives the jump. It is a development-time integration, added to a bundler config, rather than a runtime library or a hosted service.

Key capabilities

• Clicking a DOM element on the page automatically opens the code editor and positions the cursor at that element's source location.
• Distributed as the code-inspector-plugin package and installed as a development dependency with npm i code-inspector-plugin -D, yarn add code-inspector-plugin -D, or pnpm add code-inspector-plugin -D.
• Configured per bundler through a single call, codeInspectorPlugin({ bundler: 'webpack' }), with bundler values including webpack, vite, rspack, and esbuild.
• Integrates with webpack, vite, rspack and rsbuild, farm, esbuild, turbopack, and mako build setups.
• Covers vue2, vue3, nuxt, react, nextjs, umijs, preact, solid, qwik, svelte, and astro application frameworks.
• Opens the developer's IDE through the companion launch-ide project, which documents the supported editor list.
• Ships runnable StackBlitz demos for vue, react, preact, solid, qwik, svelte, and astro, each configured through a bundler config file such as vite.config.ts or astro.config.mjs.

Who uses it and how

• Teams building Vue 2, Vue 3, or Nuxt applications who add the plugin to vite.config.js or webpack.config.js so any rendered component can be traced to its file during development.
• React, Next.js, and UmiJS developers who want the same click-to-source path in their own bundler configuration.
• Projects that have moved to rspack, rsbuild, farm, or mako and still want editor jumping, since those bundlers are supported alongside the more established ones.
• Individual developers evaluating the tool before installing it, using the hosted StackBlitz demos for vue, react, preact, solid, qwik, svelte, and astro.

Getting started

Install the plugin as a development dependency with npm i code-inspector-plugin -D (or the yarn and pnpm equivalents), then register codeInspectorPlugin({ bundler: 'vite' }) — or your bundler's value — in the bundler configuration file. Full configuration details are linked from the README to the project documentation at inspector.fe-dev.cn.

How it compares

The facts provided name no paid products that this project replaces, and no directly comparable alternative tools, so code-inspector stands alone in this registry. It occupies the gap between the browser's developer tools and the code editor, using the bundler as the bridge between the two.

When to use it — and when not to

Adopting code-inspector means editing a bundler configuration and running it in development, so it suits projects whose build setup the team can modify; teams that cannot touch their bundler config, or that work outside these JavaScript bundlers and frameworks, will not get value from it. The plugin is aimed at development workflows rather than production builds. One honest caveat in the supplied material: the README excerpt here ends partway through the vue-cli configuration block, so the full set of setup snippets must be read on the linked documentation site rather than from the repository front page. The licence is MIT and the project is actively pushed, with a small open-issue count of four.

npm i code-inspector-plugin -D
# or
yarn add code-inspector-plugin -D
# or
pnpm add code-inspector-plugin -D

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

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

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

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

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

module.exports = {
  // other config...
  plugins: [
    codeInspectorPlugin({
      bundler: 'rspack',
    }),
    // other plugins...
  ],
};

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

module.exports = {
  // other config...
  tools: {
    rspack: {
      plugins: [
        codeInspectorPlugin({
          bundler: 'rspack',
        }),
      ],
    },
  },
};

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

esbuild.build({
  // other configs...
  // [注意] esbuild 中使用时，dev 函数的返回值需自己根据环境判断，本地开发的环境返回 true，线上打包返回 false
  plugins: [codeInspectorPlugin({ bundler: 'esbuild', dev: () => true })],
});

// farm.config.js
import { defineConfig } from '@farmfe/core';
import { codeInspectorPlugin } from 'code-inspector-plugin';

export default defineConfig({
  vitePlugins: [
    codeInspectorPlugin({
      bundler: 'vite',
    }),
    // ...other code
  ],
});

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

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

// astro.config.mjs
import { defineConfig } from 'astro/config';
import { codeInspectorPlugin } from 'code-inspector-plugin';

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