WebSocket Inspector fiksuoja kiekvieną WebSocket kadrą – siųstą ir gautą – visuose puslapio ryšiuose. Rodo ryšio gyvavimo ciklą (connecting/open/closed su uždarymo kodais), kiekvieno kadro kryptį, dydį, dvejetainę (binary) vėliavėlę ir peržiūrą, su gražiai suformatuotais JSON duomenimis. Užpildo realią DevTools spragą realaus laiko protokolų derinimui.
WebSocket'ai maitina pokalbių programas, gyvus prietaisų skydelius, GraphQL prenumeratas, daugelio žaidėjų žaidimus ir bendradarbiavimo redaktorius – tačiau juos derinti yra skausminga. Chrome DevTools rodo WebSocket kadrus, tačiau jo sąsaja nepatogi, o filtravimas ribotas. WebSocket Inspector suteikia švaresnį, tam skirtą vaizdą. Įrankis įdiegia apvalkalą aplink native WebSocket konstruktorių puslapio kontekste, todėl kiekvienas naujas WebSocket() yra perimamas. Kiekvienas ryšys rodomas sąraše su savo URL, būsena (connecting → open → closed), trukme ir uždarymo kodu, kai atjungiamas. Kiekvienas kadras – siųstas ir gautas – fiksuojamas su laiko žyma, kryptimi, dydžiu, dvejetaine vėliavėle ir peržiūra. Spustelėkite bet kurį kadrą, kad pamatytumėte pilną turinį, automatiškai gražiai suformatuotą, jei tai JSON. Filtruokite pagal kryptį (siųsta / gauta), tik dvejetainius, arba pagal konkretų ryšį. Kadangi apvalkalas įdiegiamas įrankiui aktyvavus, norėsite perkrauti puslapį, kad užfiksuotumėte esamus ryšius – nauji ryšiai fiksuojami nuo tos akimirkos, kai atidarote įrankį.
Rodo kiekvieną WebSocket su būsena (connecting/open/closed), URL, trukme, uždarymo kodu ir bet kokia uždarymo priežastimi.
Rodomi tiek siųsti (↑), tiek gauti (↓) kadrai su laiko žyma, dydžiu, dvejetaine vėliavėle ir peržiūra vietoje.
Spustelėkite kadrą, kad pamatytumėte pilną turinį. JSON eilutės automatiškai formatuojamos su 2 tarpų įtrauka, kad būtų patogu skaityti.
Filtruokite kadrus, kad matytumėte tik siųstus, tik gautus arba tik dvejetainius – sutelkite dėmesį į tai, ką derinate.
Spustelėkite ryšį, kad filtruotumėte kadrus tik pagal jį – naudinga, kai aktyvūs keli WebSocket'ai (pvz., pokalbis + buvimo statusas).
Bet koks WebSocket, atidarytas įrankiui jau aktyvavus, fiksuojamas iškart. Perkraukite tik norėdami užfiksuoti jau egzistavusius.
Pamatykite tiksliai, kokie pranešimai siunčiami ir gaunami tarp kliento ir serverio – nustatykite, kur nutrūksta pristatymas.
Tikrinkite prenumeratos operacijas ir gaunamus duomenų siuntimus, kad rastumėte neatitinkančius duomenis ar prenumeratos nutraukimo klaidas.
Supraskite, kaip veikia trečiosios šalies realaus laiko API, stebėdami jo pranešimų struktūrą ir laiką.
Patikrinkite, ar keep-alive kadrai siunčiami tikėtinu intervalu – praleistas ping gali paaiškinti netikėtus atsijungimus.
Stebėkite uždarymo įvykį (su kodu ir priežastimi) bei vėlesnius naujo ryšio bandymus, kad derintumėte pakartotinio bandymo/prisijungimo klaidas.
Spustelėkite WebSocket piktogramą DevSuite Pro doke. Įrankis aktyvuojamas ir atsidaro skydelis, rodantis ryšius ir kadrus.
WebSocket'ai, atidaryti PRIEŠ aktyvuojant įrankį, nebus užfiksuoti. Perkraukite, kad juos sukurtumėte iš naujo ir perimtumėte nuo pradžios.
Puslapiui atidarant WebSocket'us, jie rodomi ryšių sąraše su gyvai atnaujinama būsena.
Kiekvienas kadras registruojamas realiuoju laiku. Filtruokite pagal kryptį arba spustelėkite ryšį, kad susiaurintumėte sąrašą.
Spustelėkite bet kurį kadrą, kad pamatytumėte pilną turinį (gražiai suformatuotą JSON, jei taikoma) kartu su laiko žyma, dydžiu ir dvejetaine vėliavėle.
Įdiekite „DevSuite Pro“ nemokamai ir atrakinkite 64+ kūrėjų įrankius savo naršyklei.
