alpine-inline-devtools
alpine-inline-devtools copied to clipboard
Published
20 hours ago •
KevinBatdorf
KevinBatdorf
An easy way to monitor your state while developing with Alpine
Alpine Inline DevTools
Monitor and update your component state while developing with Alpine JS
Installation
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
Coming soon
- Currently from the Dev Tools, you can update strings, booleans, and arrays, but not numbers and objects.
Themes
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>
Tips
- 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.
Wrapped up as a browser extension
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
Contributing
If you're interested in contributing to this project, please read our contributing docs before submitting a pull request.
License
Copyright (c) 2020 Kevin Batdorf
Licensed under the MIT license, see LICENSE.md for details.
Metadata
64
Stars
3
Forks
Watchers
Owner
KevinBatdorf
Metadata
An easy way to monitor your state while developing with Alpine