Get Started ​

code-inspector-plugin supports use in projects with webpack、rspack or vite as bundler, and supports frameworks such as vue2/vue3/react/preact/solid. Please refer to the following tutorial to install it.

Installation ​

• Use npm：

npm install code-inspector-plugin -D

• Use yarn：

yarn add code-inspector-plugin -D

• Use pnpm：

pnpm add code-inspector-plugin -D

Configuration ​

1.Config bundler ​

Use in webpack：

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

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

Use in vite：

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

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

Use in rspack：

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

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

2.Config VSCode ​

• Execution command + shift + p(mac) or ctrl + shift + p(windows) in vscode , search and click Shell Command: Install 'code' command in PATH:

  

• If the following window appears, it means successful configuration:

  

Usage ​

There are currently two methods to use the function of locating DOM source code:

Method1(Recommend) ​

When holding down the combination key on the page and moving the mouse on the page, a mask layer will appear on the DOM and display relevant information about the dom. Clicking the mask layer will automatically open the IDE and locate the cursor to the corresponding code position of the DOM. (The default combination key for Mac system is Option + Shift and for Windows is Alt + Shift, and the browser console will output relevant combination key prompts.)

Method2 ​

When showSwitch: true is configured in the plugin parameters, a code-inspector switch button will be displayed on the page, click to switch the code-inspector mode on/off. After the code-inspector mode is turned on, the function is the same as holding down the combination key in Method1. When the color of the switch is colored, it means that the code-inspector mode is on ; and when the switch color is monochrome, it means that code-inspector mode is off 。