Noon WS Frame Inspector

Decodes binary WebSocket frames (STOMP) back to readable text in a DevTools panel, with regex filtering, for Noon debugging.

Noon WS Frame Inspector is an internal debugging tool for Noon Academy engineers. It restores readable WebSocket debugging in Chrome DevTools now that the classroom backend sends binary frames. Noon's classroom app communicates over STOMP on WebSockets. Since the switch to binary WebSocket frames, Chrome's built-in Network → Messages tab shows only opaque "Binary Message" rows. This extension adds a WS Frames panel to DevTools that decodes every frame back to readable text. Features • Captures all WebSocket traffic (sent and received) on the inspected tab • Decodes binary frames to text — STOMP command, headers, and pretty-printed JSON body • Familiar interface modeled on the Network → Messages tab: direction arrows, Data / Length / Time columns • Regex filter with Invert option, plus Send/Receive direction filter • Connections sidebar to focus on a single socket (e.g. one classroom's STOMP connection) • Auto-scroll for live sessions, replay of frames captured before the panel was opened • Copy raw frame or just the JSON body with one click Usage Open DevTools on a Noon classroom tab and select the "WS Frames" panel (it may be behind the » overflow menu). Reload the page once so the connection handshake is captured. Click any row to inspect the decoded STOMP frame; use the regex filter (e.g. heartBeat + Invert) to hide noise. Privacy This extension runs only on Noon's own domains (noonacademy.com, noonedu.io) and localhost. All captured frames are processed and displayed locally in your own DevTools panel — nothing is collected, stored beyond the session, or transmitted anywhere. Intended for Noon Academy engineering teams. Source and issue tracking are internal.