背景

在前端日常开发中会有代码项目体积庞大或国际化项目，这时候对于一个刚上手项目/接触前端的同事并且也包含老手会遇到一个比较头疼的问题，需要快速进行页面代码的定位然后进行开发/修复缺陷往往定位就需要花费很长时间。code-inspector-plugin或react-dev-inspector就可以简单便捷及迅速进行处理。

介绍

注：早期版本的 code-inspector-plugin在react项目中需要依赖 react-dev-inspector，但是现在已经完全不需要了

使用方式

我现在在这里使用code-inspector-plugin进行举例

npm install code-inspector-plugin   //进行下载依赖包


//我的项目是react及webpack并不是vue||vite  vue||vite的话也差不多可以在网上找下对应配置教程bundler: 'vite',

//在config文件内注入即可使用   alt+shift+鼠标左键
import { defineConfig } from '@umijs/max';
import { codeInspectorPlugin } from 'code-inspector-plugin';

export default defineConfig({
  define: {
    SDWAN_ENV: 'dev',
    SDWAN_ENV_URL: '/',
    RUN_ENV: 'dev',
  },
  chainWebpack(memo) {
    memo.plugin('code-inspector-plugin').use(
      codeInspectorPlugin({
        bundler: 'webpack',
      }),
    );
  },
});