Pro

Pemeriksa WebSocket

Pemeriksa WebSocket menangkap setiap bingkai WebSocket — dihantar dan diterima — merentasi semua sambungan pada halaman. Memaparkan kitaran hayat sambungan (connecting/open/closed berserta kod tutup), arah setiap bingkai, saiz, bendera binari, dan pratonton, dengan muatan JSON dicetak-cantik. Mengisi jurang sebenar DevTools untuk penyahpepijatan protokol masa nyata.

Tambah ke Chrome Tambah ke Edge Tambah ke FireFox

WebSocket menggerakkan aplikasi sembang, papan pemuka langsung, langganan GraphQL, permainan berbilang pemain, dan penyunting kolaboratif — tetapi menyahpepijatnya adalah menyakitkan. Chrome DevTools memaparkan bingkai WebSocket, tetapi UI-nya janggal dan penapisan terhad. Pemeriksa WebSocket memberikan anda paparan yang lebih bersih dan direka khas. Alat ini memasang pembungkus di sekeliling konstruktor WebSocket asli dalam konteks halaman, supaya setiap new WebSocket() dipintas. Setiap sambungan muncul dalam senarai dengan URL, status (connecting → open → closed), tempoh, dan kod tutup apabila terputus. Setiap bingkai — dihantar dan diterima — ditangkap dengan cap masa, arah, saiz, bendera binari, dan pratonton. Klik mana-mana bingkai untuk melihat muatan penuhnya, dicetak-cantik secara automatik jika JSON. Tapis mengikut arah (dihantar / diterima), binari sahaja, atau sambungan tertentu. Oleh kerana pembungkus dipasang apabila alat ini diaktifkan, anda perlu memuat semula halaman untuk menangkap sambungan sedia ada — sambungan baharu ditangkap sejak saat anda membuka alat ini.

Pratonton Langsung

example.com

Pemeriksaan WebSocket ● 2 sambungan aktif

Sambungan

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

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

Semua ↑ Dihantar ↓ Terima ↑ 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
                    

Ciri-ciri Utama

Kitaran Hayat Per-Sambungan

Memaparkan setiap WebSocket berserta status (connecting/open/closed), URL, tempoh, kod tutup, dan sebarang sebab penutupan.

Setiap Bingkai Ditangkap

Kedua-dua bingkai dihantar (↑) dan diterima (↓) dipaparkan berserta cap masa, saiz, bendera binari, dan pratonton dalam baris.

JSON Dicetak-Cantik

Klik satu bingkai untuk melihat muatan penuh. Rentetan JSON diformat secara automatik dengan lekukan 2-ruang untuk pemeriksaan yang mudah dibaca.

Tapis Mengikut Arah / Binari

Tapis bingkai kepada hantar sahaja, terima sahaja, atau binari sahaja — fokus pada apa yang sedang anda nyahpepijat.

Penapisan Per-Sambungan

Klik satu sambungan untuk menapis bingkai kepada sambungan itu sahaja — berguna apabila beberapa WebSocket aktif serentak (contohnya sembang + kehadiran).

Tiada Muat Semula Diperlukan Untuk Sambungan Baharu

Mana-mana WebSocket yang dibuka selepas alat diaktifkan akan ditangkap serta-merta. Muat semula hanya untuk menangkap yang sedia ada terlebih dahulu.

Kes Penggunaan Biasa

Menyahpepijat Aplikasi Sembang

Lihat dengan tepat mesej apa yang dihantar dan diterima antara klien dan pelayan — kenal pasti di mana penghantaran gagal.

Menyahpepijat Langganan GraphQL

Periksa operasi langganan dan dorongan data masuk untuk menyahpepijat muatan tidak sepadan atau pepijat pembongkaran langganan.

Kejuruteraan Songsang Protokol

Fahami cara API masa nyata pihak ketiga berfungsi dengan memerhatikan struktur mesej dan pemasaannya.

Memantau Heartbeat / Ping-Pong

Sahkan bahawa bingkai keep-alive dihantar pada selang masa yang dijangka — ping yang terlepas boleh menerangkan sambungan terputus secara tidak dijangka.

Menyahpepijat Logik Sambung Semula

Perhatikan peristiwa tutup (berserta kod dan sebab) dan percubaan sambungan baharu seterusnya untuk menyahpepijat pepijat cuba-semula/sambung-semula.

Cara Guna

Buka Pemeriksa WebSocket

Klik ikon WebSocket dalam dok DevSuite Pro. Alat ini akan diaktifkan dan panel akan dibuka memaparkan sambungan dan bingkai.

Muat Semula Halaman (jika perlu)

WebSocket yang dibuka SEBELUM alat diaktifkan tidak akan ditangkap. Muat semula untuk mencipta semula sambungan tersebut dan memintas dari permulaan.

Perhatikan Sambungan Muncul

Apabila halaman membuka WebSocket, ia akan muncul dalam senarai Connections dengan kemas kini status langsung.

Layari Bingkai

Setiap bingkai dicatat secara masa nyata. Tapis mengikut arah atau klik satu sambungan untuk mengecilkan senarai.

Klik Bingkai Untuk Butiran

Klik mana-mana bingkai untuk melihat muatan penuhnya (JSON dicetak-cantik jika berkenaan) berserta cap masa, saiz, dan bendera binari.