有了它，公司的屎山代码就有救了！

admin管理员组

文章数量:1027458

有了它，公司的屎山代码就有救了！

前言

前面几天已经介绍好几个 vue 的开发效率插件，今天我们介绍一个 react 相关的效率插件 react-dev-inspector

正文

react-dev-inspector 是一个用于 React 开发的浏览器调试工具，它可以帮助开发者快速定位和调试 React 组件。以下是详细的使用教程！

安装

你需要安装 3 个库，

代码语言：javascript代码运行次数：0运行复制

pnpm install -D react-dev-inspector 
pnpm install -D @react-dev-inspector/vite-plugin
pnpm install -D @react-dev-inspector/babel-plugin

配置插件

然后需要在 vite.config.ts 配置插件，（支持 webpack 等多个平台）

代码语言：javascript代码运行次数：0运行复制

import { inspectorServer } from"@react-dev-inspector/vite-plugin";
import react from"@vitejs/plugin-react";
import { defineConfig, type PluginOption } from"vite";

// /config/
exportdefault defineConfig({
mode: "dev",
plugins: [
    inspectorServer() as PluginOption,
    react({
      babel: {
        plugins: [
          "@react-dev-inspector/babel-plugin",
        ],
      },
    }),
    reactRouterDevTools(),
  ],
});

初始化组件

此外，你还需要在入口文件或者根组件添加 <Instpector /> 组件：

代码语言：javascript代码运行次数：0运行复制

import { StrictMode } from "react";
import { Inspector } from "react-dev-inspector";
import { createRoot } from "react-dom/client";
import App from "./App.tsx";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <Inspector />
    <App />
  </StrictMode>
);

可能会遇到的问题

另外，比较意外的是，还需要环境里配置了code 命令，否则会报错：

缺失 code 命令

缺失 code 命令

解决方法将下面的命令添加到环境变量 .zshrc 中，这里请根据自己情况调整！

代码语言：javascript代码运行次数：0运行复制

export PATH="/Applications/Visual Studio Code.app/Contents/Resources/app/bin:$PATH"

验证

验证

然后执行检查命令，选中 dom 即可打开指定组件代码！

macOS : Ctrl + Shift + Command + C

Windows: Ctrl + Shift + Alt + C

大家可以去这里试试官方 Demo:

.json,vite.config.ts%3AL17-L17

最后

虽然配置有点繁琐，但是一旦配置成功，react-dev-inspector 会极大的提高开发效率，尤其作为新人接受一个庞大的项目，可以说是效率翻倍神器！

官方文档：

仓库地址：

官方提供的工作原理

官方提供的工作原理

本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。原始发表：2025-05-04，如有侵权请联系 cloudcommunity@tencent 删除react插件开发配置效率

有了它，公司的屎山代码就有救了！

前言

前面几天已经介绍好几个 vue 的开发效率插件，今天我们介绍一个 react 相关的效率插件 react-dev-inspector

正文

react-dev-inspector 是一个用于 React 开发的浏览器调试工具，它可以帮助开发者快速定位和调试 React 组件。以下是详细的使用教程！

安装

你需要安装 3 个库，

代码语言：javascript代码运行次数：0运行复制

pnpm install -D react-dev-inspector 
pnpm install -D @react-dev-inspector/vite-plugin
pnpm install -D @react-dev-inspector/babel-plugin

配置插件

然后需要在 vite.config.ts 配置插件，（支持 webpack 等多个平台）

代码语言：javascript代码运行次数：0运行复制

import { inspectorServer } from"@react-dev-inspector/vite-plugin";
import react from"@vitejs/plugin-react";
import { defineConfig, type PluginOption } from"vite";

// /config/
exportdefault defineConfig({
mode: "dev",
plugins: [
    inspectorServer() as PluginOption,
    react({
      babel: {
        plugins: [
          "@react-dev-inspector/babel-plugin",
        ],
      },
    }),
    reactRouterDevTools(),
  ],
});

初始化组件

此外，你还需要在入口文件或者根组件添加 <Instpector /> 组件：

代码语言：javascript代码运行次数：0运行复制

import { StrictMode } from "react";
import { Inspector } from "react-dev-inspector";
import { createRoot } from "react-dom/client";
import App from "./App.tsx";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <Inspector />
    <App />
  </StrictMode>
);

可能会遇到的问题

另外，比较意外的是，还需要环境里配置了code 命令，否则会报错：

缺失 code 命令

缺失 code 命令

解决方法将下面的命令添加到环境变量 .zshrc 中，这里请根据自己情况调整！

代码语言：javascript代码运行次数：0运行复制

export PATH="/Applications/Visual Studio Code.app/Contents/Resources/app/bin:$PATH"

验证

验证

然后执行检查命令，选中 dom 即可打开指定组件代码！

macOS : Ctrl + Shift + Command + C

Windows: Ctrl + Shift + Alt + C

大家可以去这里试试官方 Demo:

.json,vite.config.ts%3AL17-L17

最后

虽然配置有点繁琐，但是一旦配置成功，react-dev-inspector 会极大的提高开发效率，尤其作为新人接受一个庞大的项目，可以说是效率翻倍神器！

官方文档：

仓库地址：

官方提供的工作原理

官方提供的工作原理

本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。原始发表：2025-05-04，如有侵权请联系 cloudcommunity@tencent 删除react插件开发配置效率

本文标签： 有了它，公司的屎山代码就有救了！