コードインスペクター: ページ要素をクリックして、コードを自動的に見つけます。

Code Inspector は開発効率を向上させるアーティファクトです

ページ上の DOM 要素をクリックすると、自動的に IDE が開き、DOM の対応するソース コードの場所が特定されます。

ドキュメンテーション

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

1. インストール

npm install code-inspector-plugin -D

2. 構成

2.1、ウェブパック

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

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

2.2、ビュー

// 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、すぐに

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

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

3. 使用する

コードレビューのショートカットキー

• Mac システムのデフォルトのキーの組み合わせは次のとおりです。Option + Shift
• Windows のデフォルトのキーの組み合わせは次のとおりです。Alt + Shift