web前端开发好物推荐-（code-inspector-plugin/react-dev-inspector）页面快捷定位代码位置

旭久2026-03-21 9:29

背景

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

介绍

|---------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------|
| react-dev-inspector | code-inspector-plugin |
| 能点击跳转，但：只支持 React，功能弱、配置麻烦。 | 能点击跳转，而且：支持所有框架（React/Vue/Angular/...），功能强、零配置 |
| * 只支持 React * 不支持 Vue、Svelte 等 * 配置麻烦，要自己包裹组件 * 不支持跳样式文件、不支持跳 html * 不支持自定义快捷键 * 不支持 webpack /vite/rspack 全兼容 | * 页面点元素 * 跳 VS Code * 支持 template、script、style 全跳 * 支持所有前端框架 * 不用改业务代码 * 不用包裹根组件 * 自动识别环境 * 自动兼容 vite/webpack/rspack |

注：早期版本的 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',
      }),
    );
  },
});