FirstTx DevTools

Browser DevTools for debugging FirstTx apps

# FirstTx DevTools The official debugging companion for FirstTx - a library that eliminates blank loading screens in CSR applications. ## Why You Need This Without DevTools, debugging FirstTx feels like flying blind, ❌ "Why didn't prepaint restore?" ❌ "Which model triggered sync?" ❌ "Did my transaction rollback?" With FirstTx DevTools, you see everything, ✅ Timeline view showing exact timing ✅ Transaction grouping with rollback visualization ✅ Model sync triggers with duration ✅ Advanced filtering by category and priority ## Key Features ### 1. Timeline Visualization - 4-lane layout for Prepaint, Model, Tx, and System events - Automatic time scaling with smart intervals - Event grouping by transaction and model ### 2. Advanced Filtering - Filter by category (All/Prepaint/Model/Tx/System) - Filter by priority (All/Low/Normal/High) - Full-text search across events - Error-only toggle for quick debugging ### 3. Event Detail - Collapsible JSON view - Copy-to-clipboard for data - Priority and category badges - Formatted timestamp display ### 4. Resizable Panel - Drag-to-resize event detail panel - LocalStorage persistence - Smooth resize interaction ## Requirements - Apps using @firsttx/prepaint - Apps using @firsttx/local-first - Apps using @firsttx/tx ## Get Started 1. Install the extension 2. Open DevTools (F12) 3. Find "FirstTx" tab 4. Interact with your app to see events ## Open Source GitHub: https://github.com/joseph0926/firsttx MIT License ## Support Questions? Issues? Visit our GitHub repo or email [[email protected]]