WebSocket Inspector legt elk WebSocket-frame — verzonden en ontvangen — vast op alle verbindingen op de pagina. Toont verbindingslevenscyclus (verbinden/open/gesloten met sluitcodes), per-frame richting, grootte, binaire vlag en preview, met mooi geformatteerde JSON-payloads. Vult een echte DevTools-lacune in voor realtime protocoldebugging.
WebSockets voeden chat-apps, live dashboards, GraphQL-abonnementen, multiplayer-games en samenwerkende editors — maar debuggen is pijnlijk. Chrome DevTools toont WebSocket-frames, maar de gebruikersinterface is onhandig en filteren is beperkt. WebSocket Inspector geeft u een schonere, speciaal ontworpen weergave. Het gereedschap installeert een wrapper rond de native WebSocket-constructor in de paginacontext, dus elke nieuwe WebSocket() wordt onderschept. Elke verbinding verschijnt in een lijst met URL, status (verbinden → open → gesloten), duur en sluitcode bij verbreking. Elk frame — verzonden en ontvangen — wordt vastgelegd met timestamp, richting, grootte, binaire vlag en preview. Klik op elk frame om de volledige payload te zien, automatisch mooi geformatteerd als JSON. Filter op richting (verzonden / ontvangen), alleen binair, of op specifieke verbinding. Omdat de wrapper wordt geïnstalleerd wanneer het gereedschap wordt geactiveerd, wilt u de pagina opnieuw laden om bestaande verbindingen op te vangen — nieuwe verbindingen worden vastgelegd vanaf het moment dat u het gereedschap opent.
Toont elke WebSocket met status (verbinden/open/gesloten), URL, duur, sluitcode en reden voor sluiten.
Zowel verzonden (↑) als ontvangen (↓) frames worden weergegeven met timestamp, grootte, binaire vlag en inline preview.
Klik op een frame om de volledige payload te zien. JSON-tekenreeksen worden automatisch opgemaakt met 2-spaties inspringing voor leesbare inspectie.
Filter frames om alleen verzonden, alleen ontvangen of alleen binair weer te geven — concentreer je op wat je debugt.
Klik op een verbinding om frames te filteren naar alleen die ene — handig wanneer meerdere WebSockets actief zijn (bijv. chat + aanwezigheid).
Elke WebSocket die na activering van het gereedschap wordt geopend, wordt onmiddellijk vastgelegd. Opnieuw laden alleen om bestaande inhoud op te vangen.
Zie precies welke berichten tussen client en server worden verzonden en ontvangen — identificeer waar bezorging mislukt.
Inspecteer abonnementsoperaties en inkomende datapushes om niet-overeenkomende payloads of afbraakbugs van abonnementen op te sporen.
Begrijp hoe een realtime-API van derden werkt door de berichtstructuur en timing waar te nemen.
Verifieer dat keep-alive frames met het verwachte interval worden verzonden — een gemiste ping kan onverwachte verbreken verklaren.
Bekijk de sluitgebeurtenis (met code en reden) en de volgende pogingen voor nieuwe verbinding om bugs voor opnieuw verbinden op te sporen.
Klik op het WebSocket-pictogram in de DevSuite Pro dock. Het gereedschap wordt geactiveerd en een paneel verschijnt met verbindingen en frames.
WebSockets die VOOR de activering van het gereedschap werden geopend, worden niet vastgelegd. Opnieuw laden om ze opnieuw te maken en van het begin af aan te onderscheppen.
Wanneer de pagina WebSockets opent, verschijnen ze in de lijst Verbindingen met live statusupdates.
Elk frame wordt in realtime aangemeld. Filter op richting of klik op een verbinding om de lijst te beperken.
Klik op elk frame om de volledige payload te zien (mooi geformatteerde JSON indien van toepassing) samen met timestamp, grootte en binaire vlag.
Installeer DevSuite Pro gratis en ontgrendel 64+ ontwikkelaarstools voor uw browser.
