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 + Dfor 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
More from aradotso/devtools-skills
cli-anything-agent-native-software
Generate and use command-line interfaces that make any software controllable by AI agents with structured JSON output
75opencli-universal-cli-hub
Convert websites, Electron apps, and local tools into standardized CLIs for AI agents and humans using OpenCLI's browser automation and adapter framework.
74op-auto-clicker
Automate mouse clicks with customizable intervals, hotkeys, and macros using OP Auto Clicker for Windows
73chrome-devtools-mcp-automation
Use Chrome DevTools MCP to control Chrome, debug web apps, analyze performance, and automate browser tasks via MCP tools
72wx-cli-wechat-local-data
Query and export local WeChat data (messages, contacts, moments, favorites) from the command line with daemon architecture
71officecli-office-automation
Use OfficeCLI to create, read, and edit Word, Excel, and PowerPoint files from the command line with AI-friendly commands.
70