Pro

WebSocket Inspector

WebSocket Inspector snima svaki WebSocket okvir — poslani i primljeni — na svim vezama na stranici. Prikazuje životni ciklus veze (connecting/open/closed s kodovima zatvaranja), smjer, veličinu, oznaku binarnog sadržaja i pregled svakog okvira, s uljepšano ispisanim JSON sadržajem. Popunjava stvarnu prazninu u DevToolsu za otklanjanje grešaka u realtime protokolima.

Dodaj u Chrome Dodaj u Edge Dodaj u FireFox

WebSocketi pokreću chat aplikacije, uživo nadzorne ploče, GraphQL pretplate, igre za više igrača i alate za suradničko uređivanje — no otklanjanje grešaka u njima je mučno. Chrome DevTools prikazuje WebSocket okvire, ali njegovo sučelje je nezgrapno, a filtriranje ograničeno. WebSocket Inspector nudi čišći, namjenski izrađen pregled. Alat instalira omotač oko izvornog WebSocket konstruktora u kontekstu stranice, pa se svaki novi WebSocket() presreće. Svaka veza prikazuje se na popisu sa svojim URL-om, statusom (connecting → open → closed), trajanjem i kodom zatvaranja pri prekidu veze. Svaki okvir — poslani i primljeni — snima se s vremenskom oznakom, smjerom, veličinom, oznakom binarnog sadržaja i pregledom. Kliknite bilo koji okvir za prikaz cijelog sadržaja, automatski uljepšano ispisanog ako je riječ o JSON-u. Filtrirajte po smjeru (poslano / primljeno), samo binarno ili po određenoj vezi. Budući da se omotač instalira kada se alat aktivira, morat ćete ponovno učitati stranicu kako biste uhvatili postojeće veze — nove veze se snimaju od trenutka kada otvorite alat.

Pregled uživo

example.com

Inspektor WebSocket-a ● 2 aktivne konekcije

Konekcije

wss://realtime.example.com/chat otvoreno · 2m

wss://graphql.example.com/subscriptions otvoreno · 8m

Sve ↑ Poslano ↓ Primljeno ↑ 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
                    

Ključne značajke

Životni ciklus svake veze

Prikazuje svaki WebSocket sa statusom (connecting/open/closed), URL-om, trajanjem, kodom zatvaranja i razlogom zatvaranja ako postoji.

Svaki okvir se snima

Prikazani su poslani (↑) i primljeni (↓) okviri s vremenskom oznakom, veličinom, oznakom binarnog sadržaja i pregledom u retku.

Uljepšano ispisivanje JSON-a

Kliknite okvir za prikaz cijelog sadržaja. JSON nizovi se automatski formatiraju s uvlakom od 2 razmaka radi lakšeg čitanja.

Filtriranje po smjeru / binarnosti

Filtrirajte okvire samo na poslane, samo primljene ili samo binarne — fokusirajte se na ono što otklanjate.

Filtriranje po vezi

Kliknite vezu za filtriranje okvira samo na tu jednu — korisno kada je aktivno više WebSocketa (npr. chat + prisutnost).

Ponovno učitavanje nije potrebno za nove veze

Svaki WebSocket otvoren nakon aktivacije alata odmah se snima. Ponovno učitajte samo za hvatanje već postojećih.

Uobičajeni primjeri upotrebe

Otklanjanje grešaka u chat aplikacijama

Vidite točno koje se poruke šalju i primaju između klijenta i servera — utvrdite gdje isporuka ne uspijeva.

Otklanjanje grešaka GraphQL pretplata

Pregledajte operacije pretplate i dolazna slanja podataka kako biste otklonili neusklađene sadržaje ili greške pri ukidanju pretplate.

Reverzno inženjerstvo protokola

Razumijte kako funkcionira realtime API treće strane promatranjem strukture i vremena njegovih poruka.

Nadzor heartbeat / ping-pong poruka

Provjerite šalju li se okviri za održavanje veze u očekivanom intervalu — propušteni ping može objasniti neočekivane prekide veze.

Otklanjanje grešaka logike ponovnog povezivanja

Pratite događaj zatvaranja (s kodom i razlogom) te naknadne pokušaje uspostave nove veze kako biste otklonili greške u retry/reconnect logici.

Kako koristiti

Otvorite WebSocket Inspector

Kliknite ikonu WebSocket u DevSuite Pro doku. Alat se aktivira i otvara se panel s prikazom veza i okvira.

Ponovno učitajte stranicu (ako je potrebno)

WebSocketi otvoreni PRIJE aktivacije alata neće biti snimljeni. Ponovno učitajte kako biste ih ponovno kreirali i presreli od početka.

Promatrajte pojavljivanje veza

Dok stranica otvara WebSockete, prikazuju se na popisu veza s ažuriranjima statusa uživo.

Pregledavajte okvire

Svaki okvir se bilježi u stvarnom vremenu. Filtrirajte po smjeru ili kliknite vezu za sužavanje popisa.

Kliknite okvire za detalje

Kliknite bilo koji okvir za prikaz cijelog sadržaja (uljepšano ispisan JSON ako je primjenjivo) zajedno s vremenskom oznakom, veličinom i oznakom binarnog sadržaja.