Wire Spy Laravel Package

Getting Started

Install via composer require wire-elements/wire-spy --dev, then refresh your Livewire app in the browser. Press CMD+L (macOS) or CTRL+L (Windows/Linux) to toggle the debug bar—no extra setup required. On first launch, the bar opens in State view by default; click a component in the DOM to see its current public properties and methods. Use the Component Tree tab to navigate complex hierarchies, or the Events tab to see real-time dispatches (e.g., wire:click, livewire:hmr).

Implementation Patterns

• Rapid state exploration: Before writing assertions or adding dd(), inspect live component state in the State tab during user interactions—ideal for validating hydration logic or testing reactive updated() hooks.
• Debugging event flow: Filter events in the Events tab by type (e.g., updatedFoo) or component class to trace race conditions or confirm when data is sent to the server.
• Interactive bug reproduction: Edit a component’s public property directly in WireSpy (e.g., change count from 5 to -1), then trigger actions to reproduce edge cases—no code redeploy needed.
• Tight Livewire HMR workflow: With livewire.config('hot_module_replacement' => true), edit component PHP/Blade files and see updated state instantly reflected in WireSpy’s panel—no manual reloads.
• Production-safe dev tooling: Set WIRE_SPY_ENABLED=false in .env for non-local environments—no manual guards or service provider conditional registration needed.

Gotchas and Tips

• Context confusion in nested components: WireSpy always shows state for the currently focused component (highlighted in Component Tree). If state appears stale, verify selection—not just parent-child nesting, but component reactivity timing can cause lag.
• HMR failure workaround: If component edits don’t appear in WireSpy after saving, check livewire.php config for hot_module_replacement, run php artisan config:clear, and ensure APP_ENV=local.
• Hidden overhead in CI: Even if disabled, vendor:publish creates config/wire-spy.php. In containerized builds, explicitly set WIRE_SPY_ENABLED=false in CI environment variables to avoid accidental asset injection.
• No audit trail: WireSpy is ephemeral—state edits or event logs vanish on refresh. Use it to identify issues, not log them; pair with Laravel’s logging or Laravel Telescope for persistence.
• Browser extension interference: Keyboard shortcuts like CTRL+L may conflict with browser devtools (e.g., Firefox’s “Open Location Bar”). Override keybindings in config/wire-spy.php (e.g., key_binding => 'shift+\\') for consistency.