Pro

WebSocket Inspektors

WebSocket Inspektors uztver katru WebSocket kadru — sūtīto un saņemto — visos lapas savienojumos. Parāda savienojuma dzīves ciklu (connecting/open/closed ar aizvēršanas kodiem), katra kadra virzienu, izmēru, binārā datu karodziņu un priekšskatījumu ar skaisti formatētiem JSON datu apjomiem. Aizpilda reālu DevTools trūkumu reāllaika protokolu atkļūdošanā.

Pievienot pārlūkam Chrome Pievienot Edge Pievienot pārlūkam FireFox

WebSockets darbina tērzēšanas lietotnes, tiešraides paneļus, GraphQL abonementus, vairākspēlētāju spēles un kolaboratīvos redaktorus — taču to atkļūdošana ir sāpīga. Chrome DevTools rāda WebSocket kadrus, taču tā saskarne ir neveikla, un filtrēšana ir ierobežota. WebSocket Inspektors sniedz tīrāku, mērķtiecīgi izstrādātu skatu. Rīks uzstāda apvalku ap dabisko WebSocket konstruktoru lapas kontekstā, tāpēc katrs jauns new WebSocket() tiek pārtverts. Katrs savienojums parādās sarakstā ar savu URL, statusu (connecting → open → closed), ilgumu un aizvēršanas kodu pēc atvienošanas. Katrs kadrs — sūtītais un saņemtais — tiek uztverts ar laika zīmogu, virzienu, izmēru, binārā datu karodziņu un priekšskatījumu. Noklikšķiniet uz jebkura kadra, lai redzētu pilnu datu apjomu, automātiski skaisti formatētu, ja tas ir JSON. Filtrējiet pēc virziena (sūtīts / saņemts), tikai binārie, vai pēc konkrēta savienojuma. Tā kā apvalks tiek uzstādīts, aktivizējot rīku, lapa jāpārlādē, lai uztvertu jau esošos savienojumus — jauni savienojumi tiek uztverti no brīža, kad atverat rīku.

Tiešraides priekšskatījums

example.com

WebSocket inspektors ● 2 aktīvas savienojumi

Savienojumi

wss://realtime.example.com/chat atvērts · 2m

wss://graphql.example.com/subscriptions atvērts · 8m

Viss ↑ Nosūtīts ↓ Saņemts ↑ 12 · ↓ 47 · 8.4 KB

                        ↓
                        14:32:05
                        
                        {"type":"connection_ack"}
                        28 B
                    

                        ↑
                        14:32:05
                        
                        {"type":"subscribe","id":"1","payload":...}
                        98 B
                    

                        ↓
                        14:32:06
                        
                        {"id":"1","type":"next","payload":{"data":...}
                        412 B
                    

                        ↓
                        14:32:07
                        
                        {"id":"1","type":"next","payload":{"data":...}
                        398 B
                    

                        ↓
                        14:32:14
                        BIN
                        [ArrayBuffer 1024 bytes]
                        1.0 KB
                    

                        ↓
                        14:32:15
                        
                        {"id":"1","type":"next","payload":{"data":...}
                        389 B
                    

Galvenās funkcijas

Katra Savienojuma Dzīves Cikls

Parāda katru WebSocket ar statusu (connecting/open/closed), URL, ilgumu, aizvēršanas kodu un jebkuru aizvēršanas iemeslu.

Katrs Kadrs Uztverts

Gan sūtītie (↑), gan saņemtie (↓) kadri parādīti ar laika zīmogu, izmēru, binārā datu karodziņu un iekļauto priekšskatījumu.

JSON Skaista Formatēšana

Noklikšķiniet uz kadra, lai redzētu pilnu datu apjomu. JSON virknes automātiski formatējas ar 2 atstarpju atkāpi salasāmai pārbaudei.

Filtrēšana pēc Virziena / Bināriem Datiem

Filtrējiet kadrus tikai sūtītos, tikai saņemtos vai tikai binārus — koncentrējieties uz to, ko tieši atkļūdojat.

Filtrēšana pēc Savienojuma

Noklikšķiniet uz savienojuma, lai filtrētu kadrus tikai uz to — noderīgi, ja aktīvi vairāki WebSocket savienojumi (piem., tērzēšana + klātbūtne).

Jauniem Savienojumiem Pārlāde Nav Nepieciešama

Jebkurš WebSocket, kas atvērts pēc rīka aktivizēšanas, tiek uztverts nekavējoties. Pārlādējiet tikai, lai uztvertu jau esošos.

Biežākie lietošanas veidi

Tērzēšanas Lietotņu Atkļūdošana

Precīzi redziet, kādi ziņojumi tiek sūtīti un saņemti starp klientu un serveri — noteikt, kur nogāžas piegāde.

GraphQL Abonementu Atkļūdošana

Pārbaudiet abonēšanas operācijas un ienākošos datu grūdienus, lai atkļūdotu neatbilstošus datu apjomus vai abonementu izjaukšanas kļūdas.

Protokola Apgrieztā Inženierija

Sapratiet, kā darbojas trešās puses reāllaika API, novērojot tā ziņojumu struktūru un laiku.

Heartbeat / Ping-Pong Uzraudzība

Pārbaudiet, vai keep-alive kadri tiek sūtīti gaidītajā intervālā — nokavēts ping var izskaidrot negaidītus atvienojumus.

Atkārtotas Savienošanās Loģikas Atkļūdošana

Vērojiet aizvēršanas notikumu (ar kodu un iemeslu) un sekojošos jaunā savienojuma mēģinājumus, lai atkļūdotu retry/reconnect kļūdas.

Kā lietot

Atveriet WebSocket Inspektoru

Noklikšķiniet uz WebSocket ikonas DevSuite Pro dokā. Rīks aktivizējas, un atveras panelis, kas rāda savienojumus un kadrus.

Pārlādējiet Lapu (ja nepieciešams)

WebSockets, kas atvērti PIRMS rīka aktivizēšanas, netiks uztverti. Pārlādējiet, lai tos izveidotu no jauna un pārtvertu no paša sākuma.

Vērojiet Savienojumu Parādīšanos

Kad lapa atver WebSockets, tie parādās Connections sarakstā ar dzīvo statusa atjaunināšanu.

Pārlūkojiet Kadrus

Katrs kadrs tiek reģistrēts reāllaikā. Filtrējiet pēc virziena vai noklikšķiniet uz savienojuma, lai sašaurinātu sarakstu.

Noklikšķiniet uz Kadriem Detalizētai Informācijai

Noklikšķiniet uz jebkura kadra, lai redzētu pilnu datu apjomu (skaisti formatēts JSON, ja piemērojams) kopā ar laika zīmogu, izmēru un binārā datu karodziņu.