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

萌萌哒草头将军

发布于 2025-05-04 05:10:09

10000

代码可运行

文章被收录于专栏：前端框架前端框架

运行总次数：0

代码可运行

前言

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

正文

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 配置插件，（支持 webpack 等多个平台）

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

// https://vite.dev/config/
exportdefault 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 命令，否则会报错：

缺失 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:

https://stackblitz.com/edit/github-x3rkzl?file=package.json,vite.config.ts%3AL17-L17

最后

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

官方文档：https://react-dev-inspector.zthxxx.me/docs

仓库地址：https://github.com/zthxxx/react-dev-inspector

官方提供的工作原理

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2025-05-04，如有侵权请联系 cloudcommunity@tencent.com 删除

react

本文分享自萌萌哒草头将军微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度