Code Inspector：点击页面元素自动定位到代码

Code Inspector是一个开发提效的神器

点击页面上的 DOM 元素，它能自动打开 IDE 并定位到 DOM 对应源代码位置

文档

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

1、安装

npm install code-inspector-plugin -D
1

2、配置

2.1、webpack

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

module.exports = () => ({
  plugins: [
    CodeInspectorPlugin({
      bundler: 'webpack',
    }),
  ],
});
1
2
3
4
5
6
7
8
9
10

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

1
2
3
4
5
6
7
8
9
10
11
12
13

2.3、vite

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

export default defineConfig({
  plugins: [
    CodeInspectorPlugin({
      bundler: 'vite',
    }),
  ],
});
1
2
3
4
5
6
7
8
9
10
11

3、使用

代码审查快捷键

• Mac 系统默认组合键是 Option + Shift
• Window 的默认组合键是 Alt + Shift