Code Inspector: Click on the page element to automatically locate the code

Code Inspector is an artifact that improves development efficiency

Click the DOM element on the page, it can automatically open the IDE and locate the corresponding source code location of the DOM

document

• https://inspector.fe-dev.cn/
• https://github.com/zh-lx/code-inspector

1. Installation

npm install code-inspector-plugin -D

2. Configuration

2.1、webpack

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

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

2.2、vue

// vue.config.js
const WebpackCodeInspectorPlugin = require('webpack-code-inspector-plugin');

module.exports = {
    
    
  // ...other code
  chainWebpack: (config) => {
    
    
    // add this configuration in the development environment
    config
      .plugin('webpack-code-inspector-plugin')
      .use(new WebpackCodeInspectorPlugin());
  },
};

2.3、quickly

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

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

3. Use

Code review shortcut keys

• The default key combination for Mac systems isOption + Shift
• The default key combination for Window isAlt + Shift