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:
OrderCreatedMessageSent
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:
- Connect to your Laravel Reverb server.
- Subscribe to the relevant channel.
- Monitor incoming events.
- Inspect the event name and JSON payload.
- 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:
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!
