Performance Debugger
Advanced debugging tool for React components that tracks render performance, identifies bottlenecks, and provides detailed insights with real-time profiling.
Pro Features
Unlock advanced capabilities with the Pro version
Render Tracking
Monitor render count, timing, and frequency in real-time
Performance Timeline
Visual timeline showing render performance over time
Slow Render Detection
Automatically detect and alert on slow renders
Props & State Analysis
Track changes that trigger re-renders
Memory Profiling
Monitor memory usage and detect potential leaks
Export Capabilities
Export debug data for analysis and sharing
Installation
Install via CLI
moonui add performance-debuggerUsage
Performance Debugger
Real-time performance monitoring and web vitals tracking
Examples
Basic Performance Debugging
Simple performance debugging with key metrics display
Component Debugger
Timeline Visualization
Visual timeline of render performance with alerts
Performance Timeline
Render Timeline
Last 20 renders
Advanced Debug Panel
Comprehensive debug panel with export capabilities
Advanced Debug Panel
Debug Panel
Render History
Component-Specific Debugging
Debug specific components with targeted monitoring
Expensive List Component
Real-time Performance Monitoring
Monitor application performance metrics in real-time