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