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
Windows or other IDE can skip this step
This step only needs to be configured if your computer system is Mac and you use vscode as the IDE. If your computer system is Windows or you use another IDE, you can skip this step.
Execution
command + shift + p
(mac) orctrl + shift + p
(windows) in vscode , search and clickShell 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 。