Pro

WebSocket Inspector

WebSocket Inspector zachytává každý WebSocket rámec — odeslaný i přijatý — napříč všemi spojeními na stránce. Zobrazuje životní cyklus spojení (connecting/open/closed s close kódy), směr, velikost, binární příznak a náhled každého rámce, s přehledně naformátovaným JSON obsahem. Zaplňuje reálnou mezeru v DevTools pro ladění realtime protokolů.

Přidat do Chromu Přidat do Edge Přidat do FireFoxu

WebSockety pohánějí chatovací aplikace, živé dashboardy, GraphQL subscriptions, multiplayer hry a nástroje pro společnou editaci — ale jejich ladění je bolestivé. Chrome DevTools sice zobrazuje WebSocket rámce, ale jeho UI je nepohodlné a filtrování omezené. WebSocket Inspector nabízí čistší, účelově navržený pohled. Nástroj nainstaluje wrapper kolem nativního konstruktoru WebSocket v kontextu stránky, takže je zachycen každý nový new WebSocket(). Každé spojení se zobrazí v seznamu s URL, stavem (connecting → open → closed), dobou trvání a close kódem při odpojení. Každý rámec — odeslaný i přijatý — je zachycen s časovým razítkem, směrem, velikostí, binárním příznakem a náhledem. Kliknutím na rámec zobrazíte celý obsah, automaticky přehledně naformátovaný, pokud jde o JSON. Filtrujte podle směru (odesláno / přijato), pouze binární nebo podle konkrétního spojení. Protože se wrapper instaluje při aktivaci nástroje, budete chtít stránku znovu načíst, abyste zachytili existující spojení — nová spojení se zaznamenávají od okamžiku otevření nástroje.

Živý náhled

example.com

Inspektor WebSocket ● 2 aktivní spojení

Spojení

wss://realtime.example.com/chat otevřeno · 2m

wss://graphql.example.com/subscriptions otevřeno · 8m

Vše ↑ Odesláno ↓ Příjem ↑ 12 · ↓ 47 · 8.4 KB

                        ↓
                        14:32:05
                        
                        {"type":"connection_ack"}
                        28 B
                    

                        ↑
                        14:32:05
                        
                        {"type":"subscribe","id":"1","payload":...}
                        98 B
                    

                        ↓
                        14:32:06
                        
                        {"id":"1","type":"next","payload":{"data":...}
                        412 B
                    

                        ↓
                        14:32:07
                        
                        {"id":"1","type":"next","payload":{"data":...}
                        398 B
                    

                        ↓
                        14:32:14
                        BIN
                        [ArrayBuffer 1024 bytes]
                        1.0 KB
                    

                        ↓
                        14:32:15
                        
                        {"id":"1","type":"next","payload":{"data":...}
                        389 B
                    

Klíčové funkce

Životní cyklus jednotlivých spojení

Zobrazuje každý WebSocket se stavem (connecting/open/closed), URL, dobou trvání, close kódem a případným důvodem uzavření.

Zachycení každého rámce

Odeslané (↑) i přijaté (↓) rámce jsou zobrazeny s časovým razítkem, velikostí, binárním příznakem a náhledem přímo v seznamu.

Přehledné formátování JSON

Kliknutím na rámec zobrazíte celý obsah. JSON řetězce se automaticky naformátují s odsazením 2 mezery pro snadné čtení.

Filtrování podle směru / binárních dat

Filtrujte rámce jen na odeslané, jen přijaté nebo jen binární — soustřeďte se na to, co právě ladíte.

Filtrování podle spojení

Kliknutím na spojení omezíte rámce jen na dané spojení — užitečné, když je aktivních více WebSocketů (např. chat + presence).

Bez nutnosti reloadu pro nová spojení

Jakýkoli WebSocket otevřený po aktivaci nástroje je zachycen okamžitě. Reload je potřeba jen pro zachycení již existujících spojení.

Běžné případy použití

Ladění chatovacích aplikací

Zjistěte přesně, jaké zprávy se odesílají a přijímají mezi klientem a serverem — najděte, kde selhává doručování.

Ladění GraphQL subscriptions

Prozkoumejte subscription operace a příchozí data, abyste odladili neshodující se payloady nebo chyby při ukončování subscriptions.

Zpětná analýza protokolu

Pochopte, jak funguje realtime API třetí strany, pozorováním struktury a časování jeho zpráv.

Sledování heartbeat / ping-pong

Ověřte, že keep-alive rámce jsou odesílány v očekávaném intervalu — zmeškaný ping může vysvětlovat neočekávaná odpojení.

Ladění logiky opětovného připojení

Sledujte close event (s kódem a důvodem) a následné pokusy o nové spojení, abyste odladili chyby v logice retry/reconnect.

Jak používat

Otevřete WebSocket Inspector

Klikněte na ikonu WebSocket v docku DevSuite Pro. Nástroj se aktivuje a otevře se panel se spojeními a rámci.

Znovu načtěte stránku (je-li potřeba)

WebSockety otevřené PŘED aktivací nástroje nebudou zachyceny. Znovu je vytvořte reloadem, aby byly zachyceny od začátku.

Sledujte objevující se spojení

Jakmile stránka otevře WebSockety, zobrazí se v seznamu Connections s aktuálním stavem v reálném čase.

Procházejte rámce

Každý rámec se zaznamenává v reálném čase. Filtrujte podle směru nebo kliknutím na spojení omezte seznam.

Kliknutím na rámec zobrazíte detail

Klikněte na libovolný rámec a zobrazte jeho celý obsah (přehledně naformátovaný JSON, pokud jde o JSON) spolu s časovým razítkem, velikostí a binárním příznakem.