A WebSocket Inspector for Laravel Reverb

If you've worked with Laravel Reverb, you probably know how frustrating it can be to debug real-time broadcasting.

You dispatch an event from Laravel. Your frontend is supposed to receive it. But nothing happens.

Is the event being broadcast?

Is the channel name correct?

Is private channel authorization working?

Is the payload what you expected?

When debugging real-time applications, I wanted a simple way to inspect WebSocket events directly from my browser.

So, I built EchoScope.

What Is EchoScope?

EchoScope is a browser extension that allows developers to connect to Laravel Reverb and Pusher-compatible WebSocket servers and inspect events in real-time.

It provides a standalone debugging interface where you can subscribe to channels, monitor incoming events, inspect JSON payloads, and filter the event stream.

The goal is simple:

Make real-time debugging easier without writing additional frontend JavaScript listener code.

Why I Built It

Laravel makes event broadcasting convenient, especially when working with Laravel Reverb.

However, when something goes wrong, debugging often requires checking multiple things:

  • Is the WebSocket connection established?
  • Is the event being dispatched?
  • Is the channel name correct?
  • Is private channel authorization successful?
  • Is the event payload correct?
  • Is the frontend listener receiving the event?

I wanted a dedicated tool that could help me answer these questions without repeatedly modifying my frontend code.

That was the motivation behind EchoScope.

Features

1. Laravel Reverb & Pusher Compatibility

EchoScope supports Laravel Reverb and Pusher-compatible WebSocket connections.

You can configure your connection details and establish a connection to your WebSocket server.

2. Public, Private & Presence Channels

Real-time applications frequently use different channel types.

EchoScope allows you to subscribe to:

  • Public channels
  • Private channels
  • Presence channels

For private and presence channels, it supports the authorization handshake through your application's broadcasting authorization endpoint.

3. Real-Time Event Inspection

Once connected, incoming events appear in a live event stream.

You can inspect:

  • Event timestamps
  • Channel names
  • Event names
  • JSON payloads
  • Connection and subscription status

This is useful when debugging notifications, chat messages, order updates, and other real-time features.

4. JSON Payload Inspection

Working with event payloads is an important part of debugging.

EchoScope displays incoming JSON payloads in a formatted structure and allows you to copy them for further testing.

For example, you might be debugging an event such as:

  • OrderCreated
  • MessageSent

Instead of guessing what the frontend receives, you can inspect the actual payload.

5. Event Filtering

When an application broadcasts multiple events, the event stream can become difficult to follow.

EchoScope provides event filtering and channel scoping to help you focus on the events you are debugging.

6. Dedicated Full-Screen Inspector

EchoScope also provides a dedicated full-screen tab mode.

This is useful when you want to keep the inspector open while working on your Laravel application.

A Typical Debugging Workflow

Imagine you're building a Laravel application with real-time order notifications.

Your backend dispatches an event:

OrderCreated

But your frontend doesn't receive the expected notification.

With EchoScope, you can:

  1. Connect to your Laravel Reverb server.
  2. Subscribe to the relevant channel.
  3. Monitor incoming events.
  4. Inspect the event name and JSON payload.
  5. Verify whether the expected data is being broadcast.

This can help narrow down whether the problem is related to broadcasting, channel authorization, or the frontend listener.

Privacy

EchoScope is designed to operate client-side.

Your WebSocket traffic and event payloads stay in your browser. The extension does not use telemetry.

For developers working with application data, privacy is an important consideration when choosing debugging tools.

Try EchoScope

EchoScope is now available on Microsoft Edge Add-ons.

Install EchoScope:

https://microsoftedge.microsoft.com/addons/detail/echoscope-laravel-rever/inbkfaemibapldafneckpdeffgjjkehc?hl=en-US

I'd Love Your Feedback!

EchoScope is still evolving, and feedback from developers would be incredibly valuable.

If you're working with Laravel Reverb, Pusher, or WebSockets, I'd love for you to give it a try.

I'm particularly interested in hearing:

  • What features would make EchoScope more useful?
  • Are there any bugs or usability issues?
  • What would you improve in the current workflow?
  • Would you like to see support for additional WebSocket debugging features?

Feel free to share your thoughts in the comments.

Thanks for checking out EchoScope!

Laravel #PHP #WebSockets #LaravelReverb #ShowDev