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/alpine-inline-devtools@0.12.x/dist/Default.js"></script>
@endif- Currently from the Dev Tools, you can update strings, booleans, and arrays, but not numbers and objects.
Choose from a variety of themes. (Demo)
My current favorite is Dracula:
<script src="https://cdn.jsdelivr.net/gh/kevinbatdorf/alpine-inline-devtools@0.12.x/dist/Dracula.js"></script>- Add
x-devtools-ignoreto instruct the DevTools to ignore specific components. - Add
x-titleto set the title (will default to thearia-label,x-idthenidotherwise). - Add your own button with an
idofalpine-devtools-buttonto prevent the iframe from loading (will load a popup when pressed) - Add your own iframe with an
idofalpine-devtools-iframeto position it where you like (see demo) - Click the status bar on the iframe to collapse it. It will remember this on page reload.
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.