smileitworks/livewire-event-debugger

Debug and log all Livewire events in development

v1.0.2 2025-11-22 10:02 UTC

Requires

• php: ^8.2
• livewire/livewire: ^3.0

Requires (Dev)

• laravel/framework: ^12.0
• laravel/pint: ^1.25
• orchestra/testbench: ^10.0
• pestphp/pest: ^4.1
• pestphp/pest-plugin-laravel: ^4.0

MIT

• Pavol Bucko

README

A powerful debugging tool for Livewire that automatically logs all events (both client-side and server-side) to help you debug your Livewire applications.

Features

• 🔵 Logs all client-side events (Livewire.dispatch(), Livewire.dispatchTo())
• 🟢 Logs all server-side events ($this->dispatch() in PHP)
• 🎯 Environment-aware (only enabled in development)
• 📊 Detailed or simple logging formats
• ⚡ Zero performance impact in production

Installation

composer require smileitworks/livewire-event-debugger --dev

Configuration

Publish the config file (optional, but recommended):

php artisan vendor:publish --tag=livewire-event-debugger-config

Note: The JavaScript assets are automatically served from the vendor directory. If you prefer to serve them from your public directory (e.g., for CDN distribution), you can publish them:

php artisan vendor:publish --tag=livewire-event-debugger-assets

Edit config/livewire-event-debugger.php:

return [
    'enabled_environments' => ['local', 'testing'],
    'console_logging' => true,
    'log_format' => 'detailed', // or 'simple'
];

Usage

Option 1: Using Blade Component (Recommended)

Add to your layout file (e.g., resources/views/partials/head.blade.php):

<x-livewire-event-debugger-script />

Option 2: Manual Integration

Add to your layout file:

@php
    $config = config('livewire-event-debugger', []);
    $enabledEnvironments = $config['enabled_environments'] ?? ['local', 'testing'];
    $isEnabled = in_array(app()->environment(), $enabledEnvironments);
@endphp

@if($isEnabled)
    <meta name="livewire-event-debugger-enabled" content="true">
    <meta name="livewire-event-debugger-console" content="{{ $config['console_logging'] ?? true ? 'true' : 'false' }}">
    <meta name="livewire-event-debugger-format" content="{{ $config['log_format'] ?? 'detailed' }}">
    <script src="{{ asset('vendor/livewire-event-debugger/livewire-event-debugger.js') }}"></script>
@endif

Option 3: Using Vite

If you prefer to bundle it with Vite, copy the JS file to your resources and import it:

// In resources/js/app.js
import "./livewire-event-debugger";

How It Works

The package hooks into Livewire's JavaScript API to intercept:

1. Client-side dispatches: Overrides Livewire.dispatch() and Livewire.dispatchTo()
2. Server-side dispatches: Uses Livewire's commit hook to catch events from PHP $this->dispatch() calls

All events are logged to the browser console with:

• Event name
• Parameters
• Component name (for server-side events)
• Timestamp (in detailed mode)

Testing

Run the test suite:

composer test

Or with Pest directly:

vendor/bin/pest

License

MIT