alpinejs-devtools is a simple extension to help you debug Alpine.js apps easily.
Note: this extension is mainly inspired by Vue Devtools. so some of the code is borrowed from those awesome folks.
If you are using Google Chrome, Alpine Devtools won't work with local files unless you configure the extension to be allowed Access to File URLs
. You can allow it by following these steps:
- Open chrome settings
- Go to
extensions
tab - Choose
Alpine.js devtools
and press details - Enable
Allow access to file URLs
Check the following screenshot with it enabled
To help with inspection, component "names" are be computed from the following attributes (if present and in order of precedence): id, name, x-data function name (if a function is used), tag name.
- Clone this repo
- Run
npm install
- Run
npm run dev
- Load unpacked extension inside dist/chrome directory
- Open any html file that imports alpine js then inspect by dev chrome inspection tool.
- Follow the Development instructions to get a development build.
- Go to about:debugging in Firefox
- Click the "This Firefox" tab (left side nav)
- Click "Load Temporary Add-on..."
- Open one of the files in the built extension folder (./dist/chrome)