Chrome DevTools: View WebSocket messages interactively

DevTools has a built-in WebSocket viewer. To try it out:

1. Open the Filter menu in the Network Panel
2. Select the WS filter
3. Select any WebSocket resource
4. Open the Messages pane

You can:

• Click on JSON payloads to browse the JSON interactively
• Search through payloads with the search filter option
• View the payload size, time & contents
• Toggle between sent and received messages

💡️  Tip: Looking for a demo page? You can use this Wikipedia Edits Globe Visualisation I've been playing around with - it uses WebSockets under the hood.