WebSocket Inspector снима сваки WebSocket оквир — послат и примљен — на свим везама на страници. Приказује животни циклус везе (connecting/open/closed са кодовима затварања), правац сваког оквира, величину, binary ознаку и преглед, уз лепо форматиран JSON садржај. Попуњава стварну празнину у DevTools алатима за дебаговање realtime протокола.
WebSocket везе покрећу апликације за ћаскање, live контролне табле, GraphQL претплате, вишекориснничке игре и алате за заједничку израду садржаја — али њихово дебаговање је мукотрпно. Chrome DevTools приказује WebSocket оквире, али је његов интерфејс незграпан а филтрирање ограничено. WebSocket Inspector вам даје чистији приказ намењен управо томе. Алат инсталира омотач око изворног WebSocket конструктора у контексту странице, тако да се сваки нови WebSocket() пресреће. Свака веза се приказује у листи са својим URL-ом, статусом (connecting → open → closed), трајањем и кодом затварања када се прекине. Сваки оквир — послат и примљен — снима се са временском ознаком, правцем, величином, binary ознаком и прегледом. Кликните на било који оквир да видите пун садржај, аутоматски лепо форматиран ако је реч о JSON-у. Филтрирајте по правцу (послато / примљено), само binary, или по одређеној вези. Пошто се омотач инсталира при активирању алата, потребно је да поново учитате страницу да бисте ухватили постојеће везе — нове везе се снимају од тренутка када отворите алат.
Приказује сваки WebSocket са статусом (connecting/open/closed), URL-ом, трајањем, кодом затварања и разлогом затварања, ако постоји.
И послати (↑) и примљени (↓) оквири се приказују са временском ознаком, величином, binary ознаком и прегледом у самом реду.
Кликните на оквир да видите пун садржај. JSON низови се аутоматски форматирају са увлачењем од 2 размака ради лакшег прегледа.
Филтрирајте оквире тако да прикажете само послате, само примљене или само binary — фокусирајте се на оно што дебагујете.
Кликните на везу да филтрирате оквире само за њу — корисно када је активно више WebSocket веза (нпр. ћаскање + присутност).
Свака WebSocket веза отворена након активирања алата се одмах снима. Поново учитавајте страницу само да бисте ухватили постојеће везе.
Видите тачно које поруке се шаљу и примају између клијента и сервера — утврдите тачно где испорука не успева.
Прегледајте операције претплате и долазне пакете података да пронађете неусклађен садржај или грешке при укидању претплате.
Разумите како ради realtime API треће стране посматрајући структуру и временско усклађивање његових порука.
Проверите да ли се оквири за одржавање везе шаљу у очекиваном интервалу — пропуштен ping може да објасни неочекивана прекидања везе.
Пратите догађај затварања (са кодом и разлогом) и потоње покушаје нове везе да дебагујете грешке у логици поновног покушаја/повезивања.
Кликните на икону WebSocket у DevSuite Pro доку. Алат се активира и отвара се панел који приказује везе и оквире.
WebSocket везе отворене ПРЕ активирања алата неће бити снимљене. Поново учитајте страницу да их поново направите и пресретнете од самог почетка.
Док страница отвара WebSocket везе, оне се приказују у листи Connections са ажурирањима статуса у реалном времену.
Сваки оквир се бележи у реалном времену. Филтрирајте по правцу или кликните на везу да сузите листу.
Кликните на било који оквир да видите његов пун садржај (лепо форматиран JSON ако је применљиво) заједно са временском ознаком, величином и binary ознаком.
Instalirajte DevSuite Pro besplatno i otključajte 64+ alata za programere za svoj pretraživač.
