WebSocket Inspector fanger opp hver WebSocket-ramme — sendt og mottatt — på tvers av alle tilkoblinger på siden. Viser tilkoblingens livssyklus (connecting/open/closed med close-koder), retning per ramme, størrelse, binærflagg og forhåndsvisning, med pen utskrift av JSON-nyttelast. Fyller et reelt hull i DevTools for feilsøking av sanntidsprotokoller.
WebSockets driver chat-apper, live-dashboard, GraphQL-abonnementer, flerspillerspill og samarbeidsredigerere — men å feilsøke dem er slitsomt. Chrome DevTools viser WebSocket-rammer, men grensesnittet er klumpete og filtreringen er begrenset. WebSocket Inspector gir deg en renere, spesialbygget visning. Verktøyet installerer en wrapper rundt den native WebSocket-konstruktøren i sidekonteksten, slik at hver ny WebSocket() blir fanget opp. Hver tilkobling vises i en liste med sin URL, status (connecting → open → closed), varighet og close-kode når frakoblet. Hver ramme — sendt og mottatt — fanges opp med tidsstempel, retning, størrelse, binærflagg og forhåndsvisning. Klikk på en ramme for å se hele nyttelasten, automatisk pent formatert hvis JSON. Filtrer etter retning (sendt / mottatt), kun binær, eller etter spesifikk tilkobling. Fordi wrapperen installeres når verktøyet aktiveres, bør du laste inn siden på nytt for å fange opp eksisterende tilkoblinger — nye tilkoblinger fanges opp fra det øyeblikket du åpner verktøyet.
Viser hver WebSocket med status (connecting/open/closed), URL, varighet, close-kode og eventuell close-årsak.
Både sendte (↑) og mottatte (↓) rammer vises med tidsstempel, størrelse, binærflagg og forhåndsvisning innebygd.
Klikk på en ramme for å se hele nyttelasten. JSON-strenger formateres automatisk med 2-mellomrom-innrykk for lesbar inspeksjon.
Filtrer rammer til kun sendt, kun mottatt, eller kun binær — fokuser på det du feilsøker.
Klikk på en tilkobling for å filtrere rammer til akkurat den — nyttig når flere WebSockets er aktive samtidig (f.eks. chat + tilstedeværelse).
Enhver WebSocket som åpnes etter at verktøyet aktiveres, fanges opp umiddelbart. Last inn på nytt kun for å fange opp allerede eksisterende tilkoblinger.
Se nøyaktig hvilke meldinger som sendes og mottas mellom klient og server — finn nøyaktig hvor leveringen svikter.
Inspiser abonnementsoperasjoner og innkommende datapushinger for å feilsøke feilmatchede nyttelaster eller feil ved nedrigging av abonnement.
Forstå hvordan et tredjeparts sanntids-API fungerer ved å observere meldingsstrukturen og timingen.
Bekreft at keep-alive-rammer sendes med forventet intervall — en ubesvart ping kan forklare uventede frakoblinger.
Følg med på close-hendelsen (med kode og årsak) og de påfølgende nye tilkoblingsforsøkene for å feilsøke retry-/gjentilkoblingsfeil.
Klikk på WebSocket-ikonet i DevSuite Pro-dokken. Verktøyet aktiveres og et panel åpnes som viser tilkoblinger og rammer.
WebSockets som ble åpnet FØR verktøyet ble aktivert, fanges ikke opp. Last inn på nytt for å gjenskape dem og fange opp fra starten.
Etter hvert som siden åpner WebSockets, vises de i tilkoblingslisten med statusoppdateringer i sanntid.
Hver ramme logges i sanntid. Filtrer etter retning eller klikk på en tilkobling for å innsnevre listen.
Klikk på en hvilken som helst ramme for å se hele nyttelasten (pent formatert JSON hvis aktuelt) sammen med tidsstempel, størrelse og binærflagg.
Installer DevSuite Pro gratis og lås opp 64+ utviklerverktøy for nettleseren din.
