How to inspect WebSocket traffic in Chrome DevTools
Network panel WS filter, frame inspector, message payload view, timing tab, connection headers, DevTools limitations, Wireshark alternative
Inspecting WebSocket Frames in the Browser
Chrome DevTools is your primary WebSocket debugger. Open DevTools → Network → filter by WS. Every WebSocket connection appears as a row. Click it to see:
Headers tab: The full HTTP upgrade request and 101 response including all negotiation headers.
Messages tab: Every frame in real time. Green rows are received frames; white/gray rows are sent frames. The arrow direction confirms which side sent the message.
Reading the Messages Tab
Each row shows the raw payload and byte length. For JSON messages, copy the payload and paste it into the Console to parse it. For binary frames you see the byte count, not the content. To inspect binary, log it in your onmessage handler:
ws.onmessage = (event) => { if (event.data instanceof Blob) { event.data.arrayBuffer().then(buf => { console.log(new Uint8Array(buf)); }); } else { console.log(JSON.parse(event.data)); } };
DevTools does not show frames sent before the Messages tab was open. Reload the page with DevTools already open to capture the full session. For TLS-encrypted production traffic you cannot inspect in Wireshark without a key log; stick to DevTools or add server-side logging.