Introduction
Welcome to React Dev Debugger — your ultimate companion for debugging React applications! 🚀
What is React Dev Debugger?
React Dev Debugger is a powerful development tool that helps you understand what's happening inside your React application. It provides real-time insights into state changes, component relationships, and performance metrics.
Why React Dev Debugger?
Have you ever asked yourself:
- 🤔 "Why did this component re-render?"
- 🐛 "Which state change caused this bug?"
- 🔍 "Where is this state coming from?"
- ⏰ "How did my app reach this state?"
- 🔗 "What components depend on this state?"
If yes, then React Dev Debugger is exactly what you need!
Key Features
📜 State Timeline
Track every state change in your application chronologically. See the before and after values, timestamps, and which component triggered the change.
🔗 Dependency Graph
Visualize the relationship between components, state, and context in an interactive graph. Understand your app's data flow at a glance.
⏪ Time-Travel Debugging
Step backward and forward through your application's state history. Debug issues by reproducing the exact sequence of events.
⚡ Performance Metrics
Identify slow renders and performance bottlenecks. Get detailed metrics on render counts, durations, and component-specific performance.
🎨 Beautiful Developer Experience
- Dark-themed floating panel that doesn't get in the way
- Keyboard shortcuts for quick access
- Zero configuration — just import and go!
- TypeScript support with full type safety
How It Works
React Dev Debugger works by:
- Intercepting state updates in your React components
- Recording snapshots of state before and after each change
- Building a dependency graph of your component tree
- Tracking render performance metrics
- Providing an interactive UI to explore all this data
What Makes It Special?
| Feature | React Dev Debugger | Redux DevTools | React DevTools |
|---|---|---|---|
| Zero Config Setup | ✅ | ❌ | ✅ |
| Works with any state | ✅ | ❌ | Partial |
| Time-travel debugging | ✅ | ✅ | ❌ |
| Dependency Graph | ✅ | ❌ | ❌ |
| Performance Metrics | ✅ | ❌ | ✅ |
| Store Adapters | ✅ | Redux only | N/A |
| Component Inspector | ✅ | ❌ | ✅ |
Supported Libraries
React Dev Debugger works seamlessly with:
- ✅ useState and useReducer
- ✅ Context API
- ✅ Redux (with adapter)
- ✅ Zustand (with adapter)
- ✅ Jotai (with adapter)
- ✅ Recoil (with adapter)
- ✅ Valtio (with adapter)
- ✅ Any custom state management solution
Who Is This For?
React Dev Debugger is perfect for:
- 🎓 Learning React — Understand how state flows through your app
- 🐛 Debugging Production Issues — Reproduce and fix bugs faster
- ⚡ Performance Optimization — Identify unnecessary re-renders
- 👥 Team Development — Share state snapshots with teammates
- 📚 Teaching React — Visual aid for explaining React concepts
Next Steps
Ready to get started? Follow our Installation Guide to add React Dev Debugger to your project in less than a minute!
Or jump straight to Quick Start to see it in action.
Need Help?
- 📖 Check out our comprehensive examples
- 🔍 Browse the API documentation
- 💬 Join GitHub Discussions
- 🐛 Report bugs on GitHub Issues
Happy Debugging! 🎉