Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kevinbatdorf/alpine-inline-devtools
An easy way to monitor your state while developing with Alpine
https://github.com/kevinbatdorf/alpine-inline-devtools
Last synced: about 2 months ago
JSON representation
An easy way to monitor your state while developing with Alpine
- Host: GitHub
- URL: https://github.com/kevinbatdorf/alpine-inline-devtools
- Owner: KevinBatdorf
- License: mit
- Created: 2020-07-06T09:33:55.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-27T01:49:51.000Z (almost 2 years ago)
- Last Synced: 2024-11-01T03:42:04.402Z (about 2 months ago)
- Language: JavaScript
- Size: 12.7 MB
- Stars: 68
- Watchers: 5
- Forks: 3
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
README
# Alpine Inline DevTools
Monitor and update your component state while developing with Alpine JS
[Live Demo](https://kevinbatdorf.github.io/alpine-inline-devtools/)
## Installation
Include the following `` tag in the `<head>` of your document (before Alpine):
```html
<!-- To be used during development only -->
@if (App::environment(['local', 'staging'])) {
<script src="https://cdn.jsdelivr.net/gh/kevinbatdorf/[email protected]/dist/Default.js">
@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](https://kevinbatdorf.github.io/alpine-inline-devtools/))
My current favorite is Dracula:
```html
```
## 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](https://kevinbatdorf.github.io/alpine-inline-devtools/))
- 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](https://github.com/KevinBatdorf/alpine-inline-devtools/blob/master/.github/CONTRIBUTING.md) **before submitting a pull request**.
## License
Copyright (c) 2020 Kevin Batdorf
Licensed under the MIT license, see [LICENSE.md](LICENSE.md) for details.