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:
extensions
tabAlpine.js devtools
and press detailsAllow 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: id
, name
, aria-label
, x-data
(the function name), role
, and finally the tagName
.
You may also override these with either
x-title
orx-id
.
npm install
npm run build:dev
(or npm run build
to 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: packages/shell-chrome/src/devtools/app.js
).
npm install
npm start
PORT
environment variable. eg. PORT=5000 npm start
will start the simulator on http://localhost:5000)We have 2 levels of tests in the project:
npm test
.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).