WebSocket Inspector fanger hver WebSocket-frame — sendt og modtaget — på tværs af alle forbindelser på siden. Viser forbindelsens livscyklus (connecting/open/closed med close-koder), retning pr. frame, størrelse, binært flag og forhåndsvisning, med pænt formaterede JSON-payloads. Udfylder et reelt hul i DevTools til fejlfinding af realtidsprotokoller.
WebSockets driver chatapps, live-dashboards, GraphQL-subscriptions, multiplayerspil og collaborative editors — men fejlfinding af dem er smertefuldt. Chrome DevTools viser WebSocket-frames, men brugerfladen er klodset, og filtrering er begrænset. WebSocket Inspector giver dig en renere visning bygget specifikt til formålet. Værktøjet installerer en wrapper omkring den native WebSocket-konstruktør i side-konteksten, så hver new WebSocket() opfanges. Hver forbindelse vises i en liste med sin URL, status (connecting → open → closed), varighed og close-kode ved afbrydelse. Hver frame — sendt og modtaget — fanges med tidsstempel, retning, størrelse, binært flag og forhåndsvisning. Klik på en frame for at se dens fulde payload, automatisk pænt formateret, hvis det er JSON. Filtrér efter retning (sendt/modtaget), kun binært eller en bestemt forbindelse. Fordi wrapperen installeres, når værktøjet aktiveres, skal du genindlæse siden for at fange eksisterende forbindelser — nye forbindelser fanges fra det øjeblik, du åbner værktøjet.
Viser hver WebSocket med status (connecting/open/closed), URL, varighed, close-kode og eventuel close-årsag.
Både sendte (↑) og modtagne (↓) frames vises med tidsstempel, størrelse, binært flag og forhåndsvisning inline.
Klik på en frame for at se den fulde payload. JSON-strenge formateres automatisk med 2-mellemrums-indrykning for læsbar inspektion.
Filtrér frames til kun sendte, kun modtagne, eller kun binære — fokusér på det, du fejlsøger.
Klik på en forbindelse for at filtrere frames til kun den ene — nyttigt, når flere WebSockets er aktive samtidig (f.eks. chat + tilstedeværelse).
Enhver WebSocket, der åbnes efter værktøjets aktivering, fanges øjeblikkeligt. Genindlæs kun for at fange allerede eksisterende forbindelser.
Se præcis, hvilke beskeder der sendes og modtages mellem klient og server — find præcis, hvor leveringen fejler.
Inspicér subscription-operationer og indgående datapushes for at fejlfinde forkerte payloads eller fejl ved nedlukning af subscriptions.
Forstå, hvordan et tredjeparts realtids-API fungerer, ved at observere dets beskedstruktur og timing.
Verificér, at keep-alive-frames sendes med det forventede interval — en manglet ping kan forklare uventede afbrydelser.
Følg close-hændelsen (med kode og årsag) og de efterfølgende forsøg på ny forbindelse for at fejlfinde retry-/genforbindelsesfejl.
Klik på WebSocket-ikonet i DevSuite Pro-dockens. Værktøjet aktiveres, og et panel åbner med forbindelser og frames.
WebSockets, der blev åbnet FØR værktøjet blev aktiveret, fanges ikke. Genindlæs for at genskabe dem og opfange fra starten.
Når siden åbner WebSockets, vises de i listen Connections med live statusopdateringer.
Hver frame logges i realtid. Filtrér efter retning, eller klik på en forbindelse for at indsnævre listen.
Klik på en hvilken som helst frame for at se dens fulde payload (pænt formateret JSON, hvis relevant) sammen med tidsstempel, størrelse og binært flag.
Installer DevSuite Pro gratis og lås op for 64+ udviklerværktøjer til din browser.
