FirstTx DevTools

About

# 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]]