Performance Debugger
Advanced debugging tool for React components that tracks render performance, identifies bottlenecks, and provides detailed insights with real-time profiling.
Pro features
What the Pro version adds to this component.
Real-Time Monitoring
Continuously captures performance metrics at a configurable interval.
Core Web Vitals
Tracks First Contentful Paint, Largest Contentful Paint and Cumulative Layout Shift against recommended thresholds.
Navigation Timing
Breaks down DNS lookup, TCP connection, request/response and DOM processing timings.
Resource Timing
Reports the number of loaded resources and their total transfer size.
Memory Profiling
Monitors JavaScript heap usage, total and limit where the browser exposes it.
Export & History
Retains a capture history and exports the collected metrics as JSON.
Installation
Install via CLI
npx @moontra/moonui-cli add performance-debuggerUsage
Performance Debugger
Real-time performance monitoring and web vitals tracking
Examples
Custom Capture Interval
Capture metrics more frequently and keep a larger history buffer.
Core Web Vitals Focus
Collect Core Web Vitals only, skipping navigation and resource timing metrics.
Manual Capture Mode
Mount paused with nothing captured — the panel stays empty until you take a snapshot with the refresh control.
Navigation & Resource Timing
Focus on navigation and resource timing breakdowns while omitting Web Vitals.
React to Captured Metrics
Receive every captured metric set through the onMetricChange callback for logging or analytics.