react-devtools-plus

React DevTools Plus

Skill by ara.so — Devtools Skills collection.

React DevTools Plus is an open-source build tool plugin that provides visual debugging for React applications. It mirrors your React Fiber tree in real-time, profiles component renders, and offers a keyboard-first overlay—all with zero impact on production builds.

What It Does

Fiber Tree Mirroring: Automatically instruments React Fiber roots to visualize component hierarchies
Timeline Profiling: Tracks component renders and performance metrics
Floating Overlay: Toggle with Alt/Option + Shift + D for inline debugging
Asset Inspection: Browse and inspect project assets (images, fonts, etc.)
Editor Integration: Click-to-open components in your IDE
React 16-19 Support: Works with React 16.8+, 17, 18, and 19
Dev-Only: Completely removed from production bundles

Installation

For Vite Projects

pnpm add -D react-devtools-plus

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

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

For Webpack Projects

npm install -D react-devtools-plus

// webpack.config.js
const { reactDevToolsPlus } = require('react-devtools-plus/webpack')

module.exports = {
  plugins: [
    reactDevToolsPlus(),
  ],
}

Configuration

Basic Configuration

// vite.config.ts
import { reactDevToolsPlus } from 'react-devtools-plus/vite'

export default defineConfig({
  plugins: [
    react(),
    reactDevToolsPlus({
      // Enable/disable overlay (default: true in dev mode)
      overlay: true,
      
      // Custom DevTools route (default: '/__react_devtools__')
      base: '/__react_devtools__',
      
      // Editor integration (auto-detected by default)
      launchEditor: 'code', // 'code' | 'webstorm' | 'cursor' | 'vim' | etc.
    }),
  ],
})

Advanced Configuration

// vite.config.ts
import { reactDevToolsPlus } from 'react-devtools-plus/vite'

export default defineConfig({
  plugins: [
    react(),
    reactDevToolsPlus({
      // Disable overlay, use only the dedicated route
      overlay: false,
      
      // Custom base path
      base: '/__debug__',
      
      // Specific editor with custom launch command
      launchEditor: 'webstorm',
    }),
  ],
})

Webpack Configuration

// webpack.config.js
const { reactDevToolsPlus } = require('react-devtools-plus/webpack')

module.exports = {
  mode: 'development',
  plugins: [
    reactDevToolsPlus({
      overlay: true,
      base: '/__react_devtools__',
      launchEditor: 'code',
    }),
  ],
}

Usage Patterns

Accessing DevTools

Method 1: Keyboard Shortcut Press Alt + Shift + D (Windows/Linux) or Option + Shift + D (macOS) to toggle the floating overlay.

Method 2: Direct URL Navigate to http://localhost:5173/__react_devtools__/ (adjust port/base as configured).

Method 3: Toggle Overlay Visibility Press Alt + Shift + R (Windows/Linux) or Option + Shift + R (macOS) to toggle overlay visibility.

Press Escape to close the overlay.

Component Tree Inspection

Once DevTools is open:

View Component Hierarchy: The left panel shows your React component tree in real-time
Inspect Props/State: Click any component to view its props, state, and hooks
Open in Editor: Click the "Open in Editor" button to jump to source code
Search Components: Use the search bar to filter components by name

Timeline Profiling

Switch to the Timeline tab
Click "Start Recording" to begin profiling
Interact with your app (trigger renders)
Click "Stop Recording" to analyze performance
Review render durations, commit phases, and component updates

Asset Inspection

Switch to the Assets tab
Browse images, fonts, and other project assets
Click assets to view details and usage
Copy asset paths for use in your code

Real-World Examples

Example 1: Next.js App with Vite

// next.config.mjs (with Vite plugin via next-with-vite)
import { defineConfig } from 'vite'
import { reactDevToolsPlus } from 'react-devtools-plus/vite'

export default defineConfig({
  plugins: [
    reactDevToolsPlus({
      overlay: true,
      base: '/__devtools__',
    }),
  ],
})

Example 2: React SPA with Custom Editor

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

export default defineConfig({
  plugins: [
    react(),
    reactDevToolsPlus({
      overlay: true,
      launchEditor: 'cursor', // Open components in Cursor AI
    }),
  ],
})

Example 3: Monorepo with Multiple React Apps

// apps/admin/vite.config.ts
import { defineConfig } from 'vite'
import { reactDevToolsPlus } from 'react-devtools-plus/vite'

export default defineConfig({
  plugins: [
    reactDevToolsPlus({
      base: '/__admin_devtools__', // Unique base per app
    }),
  ],
})

// apps/customer/vite.config.ts
import { defineConfig } from 'vite'
import { reactDevToolsPlus } from 'react-devtools-plus/vite'

export default defineConfig({
  plugins: [
    reactDevToolsPlus({
      base: '/__customer_devtools__', // Unique base per app
    }),
  ],
})

Example 4: Conditional DevTools (Environment-based)

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

export default defineConfig(({ mode }) => ({
  plugins: [
    react(),
    // Only enable in development and staging
    (mode === 'development' || mode === 'staging') && reactDevToolsPlus({
      overlay: mode === 'development', // Overlay only in dev
      base: '/__devtools__',
    }),
  ].filter(Boolean),
}))

Example 5: Webpack with React and TypeScript

// webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { reactDevToolsPlus } = require('react-devtools-plus/webpack')

module.exports = {
  mode: 'development',
  entry: './src/index.tsx',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
    reactDevToolsPlus({
      overlay: true,
      launchEditor: 'code',
    }),
  ],
  devServer: {
    port: 3000,
    hot: true,
  },
}

Key Features & API

Plugin Options

interface ReactDevToolsPlusOptions {
  /**
   * Enable/disable the floating overlay
   * @default true in development mode
   */
  overlay?: boolean

  /**
   * Custom base path for DevTools UI
   * @default '/__react_devtools__'
   */
  base?: string

  /**
   * Editor to launch when clicking "Open in Editor"
   * Auto-detected by default
   * @default auto-detected
   */
  launchEditor?: 'code' | 'webstorm' | 'cursor' | 'vim' | 'atom' | 'sublime' | string
}

Keyboard Shortcuts

Shortcut	Action
`Alt/Option + Shift + D`	Toggle DevTools overlay
`Alt/Option + Shift + R`	Toggle overlay visibility
`Escape`	Close overlay

DevTools UI Tabs

Component Tree: Real-time React Fiber tree visualization
Timeline: Render profiling and performance metrics
Assets: Project asset browser and inspector
Settings: DevTools configuration and preferences

Troubleshooting

DevTools Not Appearing

Issue: Pressing the keyboard shortcut or navigating to the URL shows nothing.

Solutions:

Ensure you're running in development mode (NODE_ENV=development)
Check that the plugin is correctly added to your Vite/Webpack config
Verify your dev server is running and the port is correct
Check browser console for errors

Overlay Blocks UI Elements

Issue: The floating overlay is interfering with app interaction.

Solutions:

// Disable overlay, use dedicated route only
reactDevToolsPlus({
  overlay: false,
})

Or toggle visibility with Alt/Option + Shift + R.

"Open in Editor" Not Working

Issue: Clicking components doesn't open them in your editor.

Solutions:

// Explicitly specify your editor
reactDevToolsPlus({
  launchEditor: 'code', // or 'cursor', 'webstorm', etc.
})

Ensure your editor's command-line tool is installed:

VS Code: Install code command via Command Palette → "Shell Command: Install 'code' command in PATH"
Cursor: Similar to VS Code
WebStorm: Ensure webstorm command is in PATH

Components Not Showing in Tree

Issue: Some components are missing from the DevTools tree.

Solutions:

Ensure you're using React 16.8+ (Hooks required)
Check that components are mounted and rendered
Verify React DevTools is instrumenting Fiber roots (check console for initialization logs)
Try refreshing the DevTools panel

DevTools Affecting Production Build

Issue: DevTools code appears in production bundle.

Solutions: The plugin should automatically exclude itself from production builds. Verify:

// vite.config.ts
export default defineConfig(({ mode }) => ({
  plugins: [
    react(),
    // Plugin is dev-only by default
    reactDevToolsPlus(),
  ],
}))

If issues persist:

// Explicitly guard
export default defineConfig(({ mode }) => ({
  plugins: [
    react(),
    mode === 'development' && reactDevToolsPlus(),
  ].filter(Boolean),
}))

Custom Base Path Not Working

Issue: DevTools not accessible at custom path.

Solutions:

// Ensure base includes leading and trailing slashes
reactDevToolsPlus({
  base: '/__custom_path__', // Correct
  // NOT: base: 'custom_path' or base: '/custom_path'
})

Then navigate to: http://localhost:5173/__custom_path__/

Project Structure

React DevTools Plus is a monorepo with the following key packages:

react-devtools - Main Vite/Webpack plugin
react-devtools-client - DevTools UI client
react-devtools-core - Core functionality and plugin system
react-devtools-kit - State management and messaging
react-devtools-overlay - Floating overlay component
react-devtools-scan - Render scanning utilities

Development

If you need to contribute or debug the plugin itself:

# Clone the repository
git clone https://github.com/wzc520pyfm/react-devtools-plus.git
cd react-devtools-plus

# Install dependencies
pnpm install

# Start development mode
pnpm dev

# Run Vite playground
pnpm play

# Run Webpack playground
pnpm play:webpack

# Build all packages
pnpm build

# Run tests
pnpm test

# Lint code
pnpm lint

Resources

Documentation: https://react-devtools-plus.netlify.app/
GitHub: https://github.com/wzc520pyfm/react-devtools-plus
Issues: https://github.com/wzc520pyfm/react-devtools-plus/issues
License: MIT

About this skill

What It Does

Installation

For Vite Projects

For Webpack Projects

Configuration

Basic Configuration

Advanced Configuration

Webpack Configuration

Usage Patterns

Accessing DevTools

Component Tree Inspection

Timeline Profiling

Asset Inspection

Real-World Examples

Example 1: Next.js App with Vite

Example 2: React SPA with Custom Editor

Example 3: Monorepo with Multiple React Apps

Example 4: Conditional DevTools (Environment-based)

Example 5: Webpack with React and TypeScript

Key Features & API

Plugin Options

Keyboard Shortcuts

DevTools UI Tabs

Troubleshooting

DevTools Not Appearing

Overlay Blocks UI Elements

"Open in Editor" Not Working

Components Not Showing in Tree

DevTools Affecting Production Build

Custom Base Path Not Working

Project Structure

Development

Resources