WebSocket Inšpektor zachytáva každý WebSocket rámec — odoslaný aj prijatý — naprieč všetkými spojeniami na stránke. Zobrazuje životný cyklus spojenia (pripája sa/otvorené/zatvorené s kódmi zatvorenia), smer jednotlivých rámcov, veľkosť, príznak binárnych dát a náhľad, s prehľadne formátovanými JSON payloadmi. Zapĺňa skutočnú medzeru v DevTools pri ladení realtime protokolov.
WebSockety poháňajú chatovacie aplikácie, live dashboardy, GraphQL subscriptions, multiplayer hry a kolaboratívne editory — no ich ladenie je bolestivé. Chrome DevTools zobrazuje WebSocket rámce, ale jeho UI je nemotorné a filtrovanie obmedzené. WebSocket Inšpektor vám ponúka čistejší, na tento účel navrhnutý pohľad. Nástroj nainštaluje obal okolo natívneho konštruktora WebSocket v kontexte stránky, takže každé nové WebSocket() je zachytené. Každé spojenie sa zobrazí v zozname so svojou URL, stavom (pripája sa → otvorené → zatvorené), trvaním a kódom zatvorenia po odpojení. Každý rámec — odoslaný aj prijatý — je zachytený s časovou pečiatkou, smerom, veľkosťou, príznakom binárnych dát a náhľadom. Kliknutím na ktorýkoľvek rámec zobrazíte jeho celý payload, automaticky prehľadne formátovaný, ak ide o JSON. Filtrujte podľa smeru (odoslané / prijaté), len binárne, alebo podľa konkrétneho spojenia. Keďže sa obal inštaluje pri aktivácii nástroja, na zachytenie existujúcich spojení budete musieť znova načítať stránku — nové spojenia sa zachytávajú od momentu otvorenia nástroja.
Zobrazuje každý WebSocket so stavom (pripája sa/otvorené/zatvorené), URL, trvaním, kódom zatvorenia a prípadným dôvodom zatvorenia.
Zobrazené sú odoslané (↑) aj prijaté (↓) rámce s časovou pečiatkou, veľkosťou, príznakom binárnych dát a náhľadom priamo v zozname.
Kliknutím na rámec zobrazíte celý payload. JSON reťazce sa automaticky formátujú s odsadením 2 medzery pre čitateľnú kontrolu.
Filtrujte rámce len na odoslané, len prijaté, alebo len binárne — sústreďte sa na to, čo práve ladíte.
Kliknutím na spojenie vyfiltrujete rámce len pre neho — užitočné, keď je aktívnych viac WebSocketov naraz (napr. chat + prítomnosť).
Každý WebSocket otvorený po aktivácii nástroja je zachytený okamžite. Reload je potrebný len na zachytenie tých, ktoré existovali predtým.
Presne uvidíte, aké správy sú odosielané a prijímané medzi klientom a serverom — zistite, kde doručovanie zlyháva.
Skontrolujte subscription operácie a prichádzajúce dátové push notifikácie, aby ste odladili nezhodné payloady alebo chyby pri rušení subscription.
Pochopte, ako funguje realtime API tretej strany, sledovaním štruktúry a časovania jej správ.
Overte, či sú udržiavacie rámce odosielané v očakávanom intervale — vynechaný ping môže vysvetliť neočakávané odpojenia.
Sledujte udalosť zatvorenia (s kódom a dôvodom) a následné pokusy o nové pripojenie na odladenie chýb v retry/reconnect logike.
Kliknite na ikonu WebSocket v dokovacej lište DevSuite Pro. Nástroj sa aktivuje a otvorí sa panel zobrazujúci spojenia a rámce.
WebSockety otvorené PRED aktiváciou nástroja nebudú zachytené. Znova ich vytvorte reloadom a zachyťte od začiatku.
Keď stránka otvára WebSockety, zobrazia sa v zozname Spojenia s aktualizáciou stavu naživo.
Každý rámec sa zaznamenáva v reálnom čase. Filtrujte podľa smeru alebo kliknite na spojenie na zúženie zoznamu.
Kliknite na akýkoľvek rámec, aby ste zobrazili jeho celý payload (prehľadne formátovaný JSON, ak je to relevantné) spolu s časovou pečiatkou, veľkosťou a príznakom binárnych dát.
Nainštalujte si DevSuite Pro zadarmo a odomknite viac ako 64 vývojárskych nástools pre váš prehliadač.
