WebSocket Inspector captures every WebSocket frame — sent and received — across all connections on the page. Shows connection lifecycle (connecting/open/closed with close codes), per-frame direction, size, binary flag, and preview, with pretty-printed JSON payloads. Fills a real DevTools gap for realtime protocol debugging.
WebSockets power chat apps, live dashboards, GraphQL subscriptions, multiplayer games, and collaborative editors — but debugging them is painful. Chrome DevTools shows WebSocket frames, but its UI is clunky and filtering is limited. WebSocket Inspector gives you a cleaner, purpose-built view. The tool installs a wrapper around the native WebSocket constructor in the page context, so every new WebSocket() is intercepted. Each connection shows up in a list with its URL, status (connecting → open → closed), duration, and close code when disconnected. Every frame — sent and received — is captured with timestamp, direction, size, binary flag, and preview. Click any frame to see its full payload, automatically pretty-printed if JSON. Filter by direction (sent / received), binary-only, or by specific connection. Because the wrapper installs when the tool activates, you'll want to reload the page to catch existing connections — new connections are captured from the moment you open the tool.
Shows every WebSocket with status (connecting/open/closed), URL, duration, close code, and any close reason.
Both sent (↑) and received (↓) frames shown with timestamp, size, binary flag, and inline preview.
Click a frame to see the full payload. JSON strings auto-format with 2-space indent for readable inspection.
Filter frames to only sent, only received, or only binary — focus on what you're debugging.
Click a connection to filter frames to just that one — useful when multiple WebSockets are active (e.g., chat + presence).
Any WebSocket opened after the tool activates is captured immediately. Reload only to catch pre-existing ones.
See exactly what messages are sent and received between client and server — pinpoint where delivery is failing.
Inspect subscription operations and incoming data pushes to debug mismatched payloads or subscription teardown bugs.
Understand how a third-party realtime API works by observing its message structure and timing.
Verify that keep-alive frames are being sent at the expected interval — a missed ping can explain unexpected disconnects.
Watch the close event (with code and reason) and the subsequent new connection attempts to debug retry/reconnect bugs.
Click the WebSocket icon in the DevSuite Pro dock. The tool activates and a panel opens showing connections and frames.
WebSockets opened BEFORE the tool activated won't be captured. Reload to re-create them and intercept from the start.
As the page opens WebSockets, they show in the Connections list with live status updates.
Every frame logs in real time. Filter by direction or click a connection to narrow the list.
Click any frame to see its full payload (pretty-printed JSON if applicable) along with timestamp, size, and binary flag.
DevSuite Pro를 무료로 설치하고 브라우저용 39개 이상의 개발자 도구를 사용해보세요.
