code-inspector: A TypeScript repository from MarkShawn2020

code-inspector

📖 Introduction

Click the element on the page, it can automatically open the code editor and position the cursor to the source code of the element.

💻 Try it out online

🎨 Support

The following are which compilers, web frameworks and editors we supported now:

The following bundlers are currently supported:
✅ webpack
✅ vite
✅ rspack / rsbuild
✅ farm
✅ esbuild
✅ turbopack
✅ mako
The following Web frameworks are currently supported:
✅ vue2 / vue3 / nuxt
✅ react / nextjs / umijs
✅ preact
✅ solid
✅ qwik
✅ svelte
✅ astro
The following code editors are currently supported:
VSCode | Cursor | Windsurf | WebStorm | Atom | HBuilderX | PhpStorm | PyCharm | IntelliJ IDEA | and Others

🚀 Install

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

🌈 Usage

Please check here for more usage information: code-inspector-plugin configuration

1.Configuring Build Tools

Click to expand configuration about: webpack

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

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

Click to expand configuration about: vite

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

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

Click to expand configuration about: rspack

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

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

Click to expand configuration about: rsbuild

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

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

Click to expand configuration about: esbuild

// 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 })],
});

Click to expand configuration about: farm

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

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

Click to expand configuration about: 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',
      })
    );
  },
};

Click to expand configuration about: nuxt

For nuxt3.x :

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

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  vite: {
    plugins: [codeInspectorPlugin({ bundler: 'vite' })],
  },
});

For nuxt2.x :

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

export default {
  build: {
    extend(config) {
      config.plugins.push(codeInspectorPlugin({ bundler: 'webpack' }));
      return config;
    },
  },
};

Click to expand configuration about: next.js

For next.js(<= 14.x):

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

const nextConfig = {
  webpack: (config, { dev, isServer }) => {
    config.plugins.push(codeInspectorPlugin({ bundler: 'webpack' }));
    return config;
  },
};

module.exports = nextConfig;

For next.js(15.0.x ~ 15.2.x):

import type { NextConfig } from 'next';
import { codeInspectorPlugin } from 'code-inspector-plugin';

const nextConfig: NextConfig = {
  experimental: {
    turbo: {
      rules: codeInspectorPlugin({
        bundler: 'turbopack',
      }),
    },
  },
};

export default nextConfig;

For next.js(>= 15.3.x):

// next.config.js
import type { NextConfig } from 'next';
import { codeInspectorPlugin } from 'code-inspector-plugin';

const nextConfig: NextConfig = {
  turbopack: {
    rules: codeInspectorPlugin({
      bundler: 'turbopack',
    }),
  },
};

export default nextConfig;

Click to expand configuration about: umi.js

With webpack:

// umi.config.js or umirc.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',
      })
    );
  },
  // other config
});

With mako:

// .umirc.ts
import { defineConfig } from 'umi';
import { codeInspectorPlugin } from 'code-inspector-plugin';

export default defineConfig({
  // other config...
  mako: {
    plugins: [
      codeInspectorPlugin({
        bundler: 'mako',
      }),
    ],
  },
});

Click to expand configuration about: astro

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

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

2.Using the function

Now you can enjoy using it!~

When pressing the combination keys on the page, moving the mouse over the page will display a mask layer on the DOM with relevant information. Clicking will automatically open the IDE and position the cursor to the corresponding code location. (The default combination keys for Mac are Option + Shift; for Windows, it's Alt + Shift, and the browser console will output related combination key prompts)

📦 Publishing to Private Registry (Cloudsmith)

If you want to publish this package to a private npm registry like Cloudsmith, follow these steps:

Prerequisites

Install Cloudsmith CLI:
```
pip3 install --user cloudsmith-cli
```
Get your Cloudsmith API Key:
- Login to Cloudsmith
- Navigate to Settings → API Keys
- Create or copy your API key

Publishing Packages

1. Build all packages:

cd packages
for dir in core vite webpack esbuild turbopack mako code-inspector-plugin; do
  echo "Building $dir..."
  cd $dir && pnpm build && cd ..
done

2. Pack packages (this resolves workspace:* dependencies):

for dir in core vite webpack esbuild turbopack mako code-inspector-plugin; do
  echo "Packing $dir..."
  cd $dir && pnpm pack && cd ..
done

3. Publish to Cloudsmith:

export CLOUDSMITH_API_KEY=your_api_key_here

for tarball in \
  packages/core/code-inspector-core-*.tgz \
  packages/vite/code-inspector-vite-*.tgz \
  packages/webpack/code-inspector-webpack-*.tgz \
  packages/esbuild/code-inspector-esbuild-*.tgz \
  packages/turbopack/code-inspector-turbopack-*.tgz \
  packages/mako/code-inspector-mako-*.tgz \
  packages/code-inspector-plugin/code-inspector-plugin-*.tgz; do
  echo "Publishing $(basename $tarball)..."
  cloudsmith push npm mark/code-inspector $tarball --republish
done

4. Clean up:

find packages -name "*.tgz" -delete

Installing from Private Registry

Method 1: Using tarball URL (Recommended)

In your project's package.json:

{
  "devDependencies": {
    "code-inspector-plugin": "https://npm.cloudsmith.io/mark/code-inspector/code-inspector-plugin/-/code-inspector-plugin-1.2.10.tgz"
  }
}

Method 2: Using registry configuration

Create .npmrc in your project root:

@code-inspector:registry=https://npm.cloudsmith.io/mark/code-inspector/
//npm.cloudsmith.io/mark/code-inspector/:_authToken=YOUR_API_KEY
//npm.cloudsmith.io/mark/code-inspector/:always-auth=true

Then in package.json:

{
  "devDependencies": {
    "code-inspector-plugin": "1.2.10"
  }
}

Important Notes

Security: Never commit .npmrc with API keys to git. Add it to .gitignore
Workspace Dependencies: Always use pnpm pack before publishing - it automatically resolves workspace:* dependencies to actual versions
Version Consistency: Ensure all packages are at the same version before publishing
Republish: Use --republish flag to overwrite existing versions if needed

Next.js Integration Example

For Next.js 16 projects, use CommonJS config to avoid ESM compatibility issues:

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

module.exports = {
  reactStrictMode: true,
  turbopack: {},
  webpack: (config, { dev }) => {
    if (dev) {
      config.plugins.push(codeInspectorPlugin({ bundler: 'webpack' }));
    }
    return config;
  },
};