react-devtools-plus

> Experimental in-app component tree inspector for React projects powered by Unplugin to support Vite and Webpack.

Installation

``bash
pnpm add -D react-devtools-plus
`

Usage

`ts
import react from '@vitejs/plugin-react'
import { reactDevToolsPlus } from 'react-devtools-plus/vite'
// vite.config.ts
import { defineConfig } from 'vite'

export default defineConfig({
plugins: [
reactDevToolsPlus(),
react(),
],
})
`

$3

- Press Alt + Shift + D (Option + Shift + D on macOS) to toggle the DevTools panel open/close
- Press Alt + Shift + R (Option + Shift + R on macOS) to toggle the overlay visibility (show/hide)

What’s included

- Minimal Vite plugin that injects a lightweight overlay during development.
- Automatic instrumentation of React Fiber roots to mirror the component tree.
- Standalone preview page at /__react_devtools__/` with project status.

Documentation

- Environment Control - Control DevTools availability in different environments
- Open in Editor - Configure click-to-source-code functionality
- Micro-Frontend Integration - Guide for qiankun, single-spa, micro-app integration
- Webpack Support - Using with Webpack 4/5 and CRA
- Timeline - React render timeline tracking
- Assets - Static assets panel configuration

Limitations

- This plugin only targets the development server. Production builds are unaffected.
- The overlay renders a simplified tree and does not expose props/state editing yet.
- Running the official React DevTools extension simultaneously may produce duplicate updates; close one of them if you notice conflicts.