萌萌哒草头将军 前言
前面几天已经介绍好几个 vue 的开发效率插件，今天我们介绍一个 react 相关的效率插件 react-dev-inspector
往期精彩推荐
- 什么❓你还在用 vue-devtools，快来试试 vite-plugin-vue-devtools ❤️ ，更加丝滑🛹，更加全能！🚀🚀
- 🚀🚀🚀 2025 年了，我不允许你还不知道 vite-plugin-pwa
- ⚡⚡⚡尤雨溪宣布开发 Vite Devtools，这两个很哇塞 🚀 的 Vite 插件，你一定要知道！
- 更多精彩文章欢迎关注我的公众号：萌萌哒草头将军
正文
react-dev-inspector 是一个用于 React 开发的浏览器调试工具，它可以帮助开发者快速定位和调试 React 组件。以下是详细的使用教程！
安装
你需要安装 3 个库，
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 配置插件
import { inspectorServer } from "@react-dev-inspector/vite-plugin";
import react from "@vitejs/plugin-react";
import { defineConfig, type PluginOption } from "vite";
// https://vite.dev/config/
export default defineConfig({
mode: "dev",
plugins: [
inspectorServer() as PluginOption,
react({
babel: {
plugins: [
"@react-dev-inspector/babel-plugin",
],
},
}),
reactRouterDevTools(),
],
});
初始化组件
此外，你还需要在入口文件或者根组件添加 <Instpector /> 组件：
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 命令，否则会报错：
解决方法将下面的命令添加到环境变量 .zshrc 中，这里请根据自己情况调整！
export PATH="/Applications/Visual Studio Code.app/Contents/Resources/app/bin:$PATH"
然后执行检查命令，选中 dom 即可打开指定组件代码！
macOS : Ctrl + Shift + Command + C
Windows: Ctrl + Shift + Alt + C
大家可以去这里试试官方 Demo:
最后
虽然配置有点繁琐，但是一旦配置成功，react-dev-inspector 会极大的提高开发效率，尤其作为新人接受一个庞大的项目，可以说是效率翻倍神器！
官方文档：react-dev-inspector.zthxxx.me/docs
![[爱了]](/js/img/d1.gif)
![[尴尬]](/js/img/d16.gif)