Skip to content

KevinBatdorf/alpine-inline-devtools

Repository files navigation

Alpine Inline DevTools

Monitor and update your component state while developing with Alpine JS

Live Demo

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/alpine-inline-devtools@0.12.x/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/alpine-inline-devtools@0.12.x/dist/Dracula.js"></script>

Tips

  • Add x-devtools-ignore to instruct the DevTools to ignore specific components.
  • Add x-title to set the title (will default to the aria-label, x-id then id otherwise).
  • Add your own button with an id of alpine-devtools-button to prevent the iframe from loading (will load a popup when pressed)
  • Add your own iframe with an id of alpine-devtools-iframe to 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.

About

An easy way to monitor your state while developing with Alpine

Resources

License

Stars

Watchers

Forks

Sponsor this project

 

Packages

No packages published