An easy way to monitor your state while developing with Alpine
MIT License
Monitor and update your component state while developing with Alpine JS
Include the following <script>
tag in the <head>
of your document (before Alpine):
<!-- To be used during development only -->
@if (App::environment(['local', 'staging'])) {
<script src="https://cdn.jsdelivr.net/gh/kevinbatdorf/[email protected]/dist/Default.js"></script>
@endif
Choose from a variety of themes. (Demo)
My current favorite is Dracula:
<script src="https://cdn.jsdelivr.net/gh/kevinbatdorf/[email protected]/dist/Dracula.js"></script>
x-devtools-ignore
to instruct the DevTools to ignore specific components.x-title
to set the title (will default to the aria-label
, x-id
then id
otherwise).id
of alpine-devtools-button
to prevent the iframe from loading (will load a popup when pressed)id
of alpine-devtools-iframe
to position it where you like (see demo)If there's enough interest I will look into packaging this up as a browser extension so you can run it on any page whether in development or not
If you're interested in contributing to this project, please read our contributing docs before submitting a pull request.
Copyright (c) 2020 Kevin Batdorf
Licensed under the MIT license, see LICENSE.md for details.