Alpine.js DevTools Pro by Bartek Igielski

Debug Alpine.js apps with a proper tool

Alpine.js DevTools Pro adds a clean, professional panel to your Firefox DevTools that makes debugging Alpine.js applications actually enjoyable.

WHAT YOU GET

See everything happening in your Alpine.js app
• View all your components in a nice tree structure
• Check component data, methods, and attributes in real-time
• Edit values directly and watch your page update instantly
• Hover over components to highlight them on the page

Never miss an event again
• Record all Alpine.js events as they happen
• See exactly what data each event carries
• Pause recording when you need to focus
• Clear the history when things get messy

Manage your Alpine stores like a pro
• All your Alpine.store() instances in one place
• Edit store values on the fly
• Works with simple values and complex objects
• Watch everything update across your entire app

WHY THIS EXTENSION EXISTS

Debugging Alpine.js apps used to mean console.log everywhere and guessing what's in your component data. This extension gives you complete visibility into your Alpine.js app without the guesswork.

WHAT YOU CAN EXPECT

It just works
• Automatically detects Alpine.js on any page
• Zero setup required
• Handles large apps smoothly
• Built for performance and stability

Professional quality
• Handles complex data structures properly
• Stable performance you can rely on
• Regular updates and real support
• Built for actual production projects

Clean interface
• Light and dark themes (follows your system preference)
• Everything where you'd expect to find it
• No cluttered UI or confusing buttons
• Focused on getting work done

PERFECT FOR

• Laravel developers using Alpine.js in their projects
• Livewire teams who need to debug component interactions
• Magento developers working with Hyvä Theme and Hyvä Commerce
• Agencies building custom Hyvä storefronts and Hyvä Checkout flows
• Frontend developers debugging Alpine.js applications
• Anyone building modern web apps with Alpine.js who wants proper debugging tools

KEY FEATURES AT A GLANCE

✓ Component inspector - See all your Alpine components and their data
✓ Live editing - Change values and see instant results
✓ Event monitoring - Catch every event with full details
✓ Store management - Debug Alpine stores easily
✓ Element correlation - Click to inspect in DOM
✓ Real-time updates - Everything syncs automatically
✓ Livewire support - Full integration with server-side events
✓ Performance optimized - Won't slow down your development
✓ Dark/light themes - Whatever you prefer
✓ Professional licensing - For commercial use

HOW IT HELPS YOUR WORKFLOW

• See all component data organized clearly
• Watch events happen in real-time
• Edit values directly in DevTools
• No more console spam

Common debugging tasks made easy:
• "Why isn't this component updating?" → Check the component data in real-time
• "Did this event fire?" → Watch the event monitor
• "What's in my Alpine store?" → See all stores and their contents
• "Which component is this element?" → Hover and highlight

FREE TO TRY, FAIR TO PRICE

Install it and try it out on your projects. No artificial limitations or naggy trial popups.

For commercial use, you'll need a license. It's reasonably priced and works on up to 3 devices. You can manage everything from your account dashboard.

SUPPORT AND UPDATES

• Regular updates with new features and bug fixes
• Responsive support when you need help
• Built by people who actually use Alpine.js daily
• Continuously improved based on user feedback