Effortless Debugging

View Plans & Pricing

The Alpine.js Devtools turbocharge how you build and debug with Alpine.js. The extension is trusted by 15,000+ developers since its launch in 2020.

It's seamlessly integrated into Chrome/Firefox DevTools, to enable on-the-fly component inspection, state editing, and error tracking—features users call "indispensable" (rated 4.5 ⭐️) for client work, enterprise projects, and open-source contributions.

On the back of a successful Future of Alpine.js Devtools survey, we've revamped the devtools to have improved state sync reliability and implement the most requested features.

Get access to best in class Alpine.js debugging — explore flexible pricing designed for solo devs, freelancers and teams of all sizes.

Go Beyond Component Inspection

The free version is great to start with Alpine.js (eg. inspect component state). The paid plans unlock professional-grade features for developers.

Store State Inspection

Stop guessing what's in your stores. Inspect Alpine.js stores directly in the devtools to understand how data flows through your application and easily debug complex state-related issues. Learn how to inspect your stores.

Warnings Tab

Catch common mistakes and potential bugs before they hit production. The warnings tab alerts you to issues like initalisation errors and invalid expressions, helping you write cleaner, more robust code. See how the warnings tab can help.

Advanced Component Features

Supercharge your component debugging. Pin important data attributes, inspect/scroll to component DOM elements, and time-travel through state changes to investigate bugs and component behavior. Explore all component features.

Alpine.js Devtools Components and Stores tab running against alpinetoolbox.com
"Since v2, the devtools have been SOOO much nicer to work with. I just bought another lifetime access to say thanks again"

Austin, CEO

ShowSubmit
Hugo Di Francesco