WebSocket Inspector fångar varje WebSocket-ram — skickad och mottagen — över alla anslutningar på sidan. Visar anslutningens livscykel (ansluter/öppen/stängd med close codes), riktning, storlek, binärflagga och förhandsvisning per ram, med snyggt formaterade JSON-payloads. Fyller en verklig lucka i DevTools för felsökning av realtidsprotokoll.
WebSockets driver chattappar, realtidsdashboards, GraphQL-prenumerationer, multiplayer-spel och samarbetsredigerare — men att felsöka dem är plågsamt. Chrome DevTools visar WebSocket-ramar, men gränssnittet är klumpigt och filtreringen begränsad. WebSocket Inspector ger dig en renare vy byggd för ändamålet. Verktyget installerar en wrapper runt den inbyggda WebSocket-konstruktorn i sidans kontext, så varje ny WebSocket() fångas upp. Varje anslutning visas i en lista med sin URL, status (ansluter → öppen → stängd), varaktighet och close code vid frånkoppling. Varje ram — skickad och mottagen — fångas med tidsstämpel, riktning, storlek, binärflagga och förhandsvisning. Klicka på valfri ram för att se hela dess payload, automatiskt snyggt formaterad om det är JSON. Filtrera på riktning (skickad/mottagen), endast binärt, eller per specifik anslutning. Eftersom wrappern installeras när verktyget aktiveras bör du ladda om sidan för att fånga befintliga anslutningar — nya anslutningar fångas från det ögonblick du öppnar verktyget.
Visar varje WebSocket med status (ansluter/öppen/stängd), URL, varaktighet, close code och eventuell close reason.
Både skickade (↑) och mottagna (↓) ramar visas med tidsstämpel, storlek, binärflagga och förhandsvisning i listan.
Klicka på en ram för att se hela payloaden. JSON-strängar formateras automatiskt med 2 mellanslags indrag för läsbar inspektion.
Filtrera ramar till endast skickade, endast mottagna eller endast binära — fokusera på det du felsöker.
Klicka på en anslutning för att filtrera ramar till just den — användbart när flera WebSockets är aktiva samtidigt (t.ex. chatt + närvaro).
Alla WebSockets som öppnas efter att verktyget aktiverats fångas omedelbart. Ladda bara om för att fånga redan befintliga.
Se exakt vilka meddelanden som skickas och tas emot mellan klient och server — hitta var leveransen brister.
Inspektera prenumerationsoperationer och inkommande datapush för att felsöka felaktiga payloads eller buggar vid nedmontering av prenumerationer.
Förstå hur ett tredjeparts-API i realtid fungerar genom att observera dess meddelandestruktur och timing.
Verifiera att keep-alive-ramar skickas med förväntat intervall — en missad ping kan förklara oväntade frånkopplingar.
Bevaka close-händelsen (med kod och orsak) och efterföljande nya anslutningsförsök för att felsöka bugg i retry-/återanslutningslogik.
Klicka på WebSocket-ikonen i DevSuite Pro-docken. Verktyget aktiveras och en panel öppnas som visar anslutningar och ramar.
WebSockets som öppnades INNAN verktyget aktiverades fångas inte. Ladda om för att återskapa dem och fånga från början.
Allteftersom sidan öppnar WebSockets visas de i listan Connections med statusuppdateringar i realtid.
Varje ram loggas i realtid. Filtrera på riktning eller klicka på en anslutning för att avgränsa listan.
Klicka på valfri ram för att se hela dess payload (snyggt formaterad JSON om tillämpligt) tillsammans med tidsstämpel, storlek och binärflagga.
Installera DevSuite Pro gratis och lås upp 64+ utvecklarverktyg för din webbläsare.
