Below is a collection of tools that work well together when developing with Magewire.
To Install: Visit and Add to Chrome
Chrome and Firefox DevTools extension for debugging Livewire applications.
The Livewire Devtools extension allows you to quickly inspect all available Livewire components and it's state on your Laravel sites. All changes that occurred in your Livewire component will be visible in the devtools as they happen.
The VarDumper component creates a global dump() && dd() function that you can use instead of e.g. var_dump
To Install:
composer require --dev symfony/var-dumper
By using it, you'll gain:
- Configurable output formats: HTML or colored command line output.
- Ability to dump out large objects without the browser crashing.
- Step inside of objects/arrays and look at the attributes within a component.
- For a full list of features
<?php
public function getUser($user): void
{
// dump() returns the passed value, so you can dump an object and keep using it.
dump($user);
// dd() ("dump and die") helper function preventing execution after the following code.
dd($user->getData());
}Please note that this is a paid for application.
Ray is a desktop app that vastly improves your debugging experience. It is a dedicated window to send debugging information to.
To Install:
composer require --dev spatie/ray
You should be able to use the ray() function without any other steps.
This package can be installed in any PHP application to send messages to the Ray app.
Ray is similar to The VarDumper Component listed above, but is an independent application that runs along side your Magewire project.
Allowing to dump data during requests.
<?php
public function example($data): void
{
// Simple string output
ray('Welcome to Magewire!');
// Output of Array, But also using the color function to display with a blue tag
ray(['foo' => foo, 'bar' => bar])->color('blue');
// Multiple argument Output
ray('multiple', 'arguments', 'are', 'welcome');
// Output a variable
ray($data);
}