Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/beyondcode/livewire-devtools

Chrome and Firefox DevTools extension for debugging Livewire applications
https://github.com/beyondcode/livewire-devtools

Last synced: about 2 months ago
JSON representation

Chrome and Firefox DevTools extension for debugging Livewire applications

Awesome Lists containing this project

README

        

# Livewire Devtools

Debug your Livewire component state from within your browser.

screenshot

### Installation

This extension does not yet have a stable version publicly available.
You can download the [pre-release](https://github.com/beyondcode/livewire-devtools/releases) version and manually install it.

### Manual Installation

1. Clone this repo
2. `npm install` (Or `yarn install` if you are using yarn as the package manager)
3. `npm run build`
4. Open Chrome extension page (chrome://extensions)
5. Check "developer mode"
6. Click "load unpacked extension", and choose `shells/chrome`.

### Hacking

1. Clone this repo
2. `npm install`
3. `npm run dev`
4. A plain shell with a test app will be available at `localhost:8080`.

### Testing as Firefox addon

1. Install `web-ext`

~~~~
$ npm install --global web-ext
~~~~

Or, for Yarn:

~~~~
$ yarn global add web-ext
~~~~

Also, make sure `PATH` is set up. Something like this in `~/.bash_profile`:

~~~~
$ PATH=$PATH:$(yarn global bin)
~~~~

2. Build and run in Firefox

~~~~
$ npm run build
$ npm run run:firefox
~~~~

When using Yarn, just replace `npm` with `yarn`.

### License

Thanks goes out to Vue devtools, which were used as a starting point for this.

[MIT](http://opensource.org/licenses/MIT)