Pro

WebSocket Inspector

Ang WebSocket Inspector ay nag-ca-capture ng bawat WebSocket frame — ipinadala at natanggap — sa lahat ng koneksyon sa page. Ipinapakita nito ang lifecycle ng koneksyon (connecting/open/closed na may mga close code), direksyon bawat frame, laki, binary flag, at preview, na may mga pretty-printed na JSON payload. Pinupunuan nito ang kakulangan sa DevTools para sa realtime protocol debugging.

Idagdag sa Chrome Idagdag sa Edge Idagdag sa FireFox

Ang mga WebSocket ang nagpapatakbo sa mga chat app, live dashboard, GraphQL subscription, multiplayer game, at collaborative editor — ngunit ang pag-debug sa mga ito ay mahirap. Ang Chrome DevTools ay nagpapakita ng mga WebSocket frame, ngunit ang UI nito ay hindi madaling gamitin at limitado ang filtering. Ang WebSocket Inspector ay nagbibigay sa iyo ng mas malinis at sadyang ginawang view. Ang tool ay nag-i-install ng isang wrapper sa paligid ng native na WebSocket constructor sa pahina, kaya ang bawat bagong WebSocket() ay nahaharang. Ang bawat koneksyon ay lumalabas sa isang listahan kasama ang URL nito, status (connecting → open → closed), tagal, at close code kapag nadiskonekta. Ang bawat frame — ipinadala at natanggap — ay nakukuha na may timestamp, direksyon, laki, binary flag, at preview. I-click ang anumang frame para makita ang buong payload nito, na awtomatikong naka-pretty-print kung ito ay JSON. Mag-filter ayon sa direksyon (ipinadala / natanggap), binary-only, o ayon sa partikular na koneksyon. Dahil ang wrapper ay nag-i-install kapag nag-activate ang tool, baka gusto mong i-reload ang pahina para makuha ang mga umiiral na koneksyon — ang mga bagong koneksyon ay nakukuha mula sa sandaling buksan mo ang tool.

Live na Preview

example.com

WebSocket Inspector ● 2 aktibong koneksyon

Mga Koneksyon

wss://realtime.example.com/chat nakabukas · 2m

wss://graphql.example.com/subscriptions nakabukas · 8m

Lahat ↑ Ipinadala ↓ Recv ↑ 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
                    

Mga Pangunahing Tampok

Lifecycle Bawat Koneksyon

Ipinapakita ang bawat WebSocket na may status (connecting/open/closed), URL, tagal, close code, at anumang dahilan ng pag-close.

Bawat Frame ay Nakukuha

Parehong ipinadala (↑) at natanggap (↓) na mga frame ay ipinapakita na may timestamp, laki, binary flag, at inline preview.

JSON Pretty-Printing

I-click ang isang frame para makita ang buong payload. Ang mga JSON string ay awtomatikong naka-format na may 2-space indent para sa madaling inspection.

I-filter ayon sa Direksyon / Binary

I-filter ang mga frame sa ipinadala lang, natanggap lang, o binary lang — mag-focus sa kung ano ang iyong nire-debug.

Filtering Bawat Koneksyon

I-click ang isang koneksyon para i-filter ang mga frame sa koneksyong iyon lang — kapaki-pakinabang kapag maraming WebSocket ang active (hal. chat + presence).

Hindi Kailangan ng Reload Para sa mga Bagong Koneksyon

Anumang WebSocket na binuksan pagkatapos mag-activate ang tool ay nakukuha agad. I-reload lang para makuha ang mga nauna na.

Mga Karaniwang Kaso ng Paggamit

Pag-debug ng mga Chat App

Makita nang eksakto kung anong mga mensahe ang ipinapadala at natatanggap sa pagitan ng client at server — tukuyin kung saan nabibigo ang delivery.

Pag-debug ng GraphQL Subscription

I-inspect ang mga subscription operation at dumarating na data push para i-debug ang mga hindi tumutugmang payload o mga bug sa pag-teardown ng subscription.

Protocol Reverse-Engineering

Unawain kung paano gumagana ang isang third-party realtime API sa pamamagitan ng pagmamasid sa istruktura at timing ng mensahe nito.

Pag-monitor ng Heartbeat / Ping-Pong

I-verify na ang mga keep-alive frame ay ipinapadala sa inaasahang interval — ang isang nakaligtaang ping ay maaaring magpaliwanag ng mga hindi inaasahang pagkaputol.

Pag-debug ng Reconnection Logic

Panoorin ang close event (may code at dahilan) at ang mga kasunod na bagong pagtatangka sa koneksyon para i-debug ang mga retry/reconnect na bug.

Paano Gamitin

Buksan ang WebSocket Inspector

I-click ang icon ng WebSocket sa DevSuite Pro dock. Mag-a-activate ang tool at magbubukas ang isang panel na nagpapakita ng mga koneksyon at frame.

I-reload ang Pahina (kung kailangan)

Ang mga WebSocket na binuksan BAGO mag-activate ang tool ay hindi makukuha. I-reload para muling malikha ang mga ito at maharang mula sa simula.

Panoorin ang mga Koneksyon na Lumabas

Habang nagbubukas ang pahina ng mga WebSocket, lilitaw ang mga ito sa listahan ng Connections na may live status updates.

Mag-browse ng mga Frame

Ang bawat frame ay naglo-log sa real time. Mag-filter ayon sa direksyon o i-click ang isang koneksyon para limitahan ang listahan.

I-click ang mga Frame para sa Detalye

I-click ang anumang frame para makita ang buong payload nito (pretty-printed JSON kung naaangkop) kasama ang timestamp, laki, at binary flag.