A WebSocket Inspector rögzít minden WebSocket keretet — küldött és fogadott — az oldal összes kapcsolatán keresztül. Megjeleníti a kapcsolat életciklusát (connecting/open/closed a lezárási kódokkal), keretenkénti irányt, méretet, bináris jelzőt és előnézetet, szépen formázott JSON payloadokkal. Valós fejlesztői eszközhiányt pótol a valós idejű protokollok hibakereséséhez.
A WebSocketek hajtják a chat alkalmazásokat, élő irányítópultokat, GraphQL feliratkozásokat, többjátékos játékokat és közös szerkesztőket — de a hibakeresésük fájdalmas. A Chrome DevTools megjeleníti a WebSocket kereteket, de a felülete nehézkes és a szűrés korlátozott. A WebSocket Inspector tisztább, célra szabott nézetet ad. Az eszköz egy wrappert telepít a natív WebSocket konstruktor köré az oldal kontextusában, így minden új WebSocket() elfogásra kerül. Minden kapcsolat megjelenik egy listában az URL-jével, állapotával (connecting → open → closed), időtartamával és lezárási kódjával, ha megszakadt. Minden keret — küldött és fogadott — rögzítésre kerül időbélyeggel, iránnyal, mérettel, bináris jelzővel és előnézettel. Kattintson bármelyik keretre a teljes payload megtekintéséhez, amely automatikusan szépen formázódik, ha JSON. Szűrjön irány szerint (küldött / fogadott), csak binárisra, vagy adott kapcsolatra. Mivel a wrapper az eszköz aktiválásakor települ, érdemes újratölteni az oldalt a már meglévő kapcsolatok elkapásához — az új kapcsolatok az eszköz megnyitásának pillanatától rögzülnek.
Megjelenít minden WebSocketet állapottal (connecting/open/closed), URL-lel, időtartammal, lezárási kóddal és bármilyen lezárási okkal.
Mind a küldött (↑), mind a fogadott (↓) keretek megjelennek időbélyeggel, mérettel, bináris jelzővel és beágyazott előnézettel.
Kattintson egy keretre a teljes payload megtekintéséhez. A JSON stringek automatikusan 2 szóközös behúzással formázódnak az áttekinthető vizsgálathoz.
Szűrje a kereteket csak küldöttre, csak fogadottra, vagy csak binárisra — koncentráljon arra, amit éppen hibakeres.
Kattintson egy kapcsolatra, hogy csak arra szűrje a kereteket — hasznos, ha több WebSocket is aktív (pl. chat + jelenlét).
Minden, az eszköz aktiválása után megnyitott WebSocket azonnal rögzítésre kerül. Csak a már meglévők elkapásához szükséges az újratöltés.
Nézze meg pontosan, milyen üzenetek mennek a kliens és a szerver között — derítse ki, hol hiúsul meg a kézbesítés.
Vizsgálja meg a feliratkozási műveleteket és a beérkező adatküldéseket, hogy hibakeresse a nem megfelelő payloadokat vagy a feliratkozás-leállítási hibákat.
Értse meg egy harmadik féltől származó valós idejű API működését az üzenetstruktúra és időzítés megfigyelésével.
Ellenőrizze, hogy a keep-alive keretek a várt időközönként érkeznek-e — egy kihagyott ping váratlan kapcsolatbontásokat magyarázhat.
Figyelje a lezárási eseményt (kóddal és okkal) és az azt követő új kapcsolódási kísérleteket, hogy hibakeresse az újrapróbálkozási/újracsatlakozási hibákat.
Kattintson a WebSocket ikonra a DevSuite Pro dokkban. Az eszköz aktiválódik, és megnyílik egy panel a kapcsolatokkal és keretekkel.
Az eszköz aktiválása ELŐTT megnyitott WebSocketek nem kerülnek rögzítésre. Töltse újra az oldalt, hogy újra létrejöjjenek, és az elfogás elejétől kezdve rögzüljenek.
Ahogy az oldal WebSocketeket nyit, azok megjelennek a Connections listában élő állapotfrissítésekkel.
Minden keret valós időben naplózódik. Szűrjön irány szerint, vagy kattintson egy kapcsolatra a lista szűkítéséhez.
Kattintson bármelyik keretre a teljes payload megtekintéséhez (szépen formázott JSON, ha alkalmazható), az időbélyeggel, mérettel és bináris jelzővel együtt.
Telepítse ingyen a DevSuite Pro-t, és oldjon fel 64+ fejlesztői eszközt böngészőjéhez.
