Chrome/Firefox DevTools extension for debugging Alpine.js applications.
Alpine.js devtools is a simple extension to help you debug Alpine.js components easily.
This extension is heavily inspired by Vue devtools, but customized for a unique Alpine.js developer experience.
Note: if you are using Google Chrome, Alpine.js devtools will not work with local files unless you configure the extension to be allowed
Access to File URLs.
You can allow it by following these steps:
Alpine.js devtoolsand press details
Allow access to file URLs
Unlike other frameworks, Alpine does not include named components. Therefore by default, Alpine.js devtools will attempt to identify component names from the following attributes, in order:
x-data(the function name),
role, and finally the
You may also override these with eitherx-titleorx-id.
npm run build:dev(or
npm run buildto test a production build)
A devtools simulator is provided in order to run tests and have an easier development workflow.
Note that when using the simulator all Chrome/Firefox devtools/Extension APIs are faked so it's useful if working on the Extension Backend (which runs in the end user's window, see
packages/shell-chrome/src/backend.js) or the Alpine.js app which runs in the devtools panel (entrypoint:
PORTenvironment variable. eg.
PORT=5000 npm startwill start the simulator on http://localhost:5000)
We have 2 levels of tests in the project:
npm run cy:run
npm run cy:open
Code is auto-formatted using Prettier, see the config at .prettierrc.js.
On push, a GitHub Action will auto-format your changes.
On commit, there's a husky + lint-staged hook that runs and auto-formats your changes (unless you disable pre-commit hooks).