WebSocket Inspector menangkap setiap bingkai WebSocket — dikirim dan diterima — di semua koneksi di halaman. Menampilkan siklus hidup koneksi (menghubung/terbuka/ditutup dengan kode penutupan), arah per-bingkai, ukuran, bendera biner, dan pratinjau, dengan muatan JSON yang diformat dengan cantik. Mengisi celah DevTools nyata untuk debugging protokol realtime.
WebSocket mendukung aplikasi obrolan, dasbor langsung, langganan GraphQL, gim multipemain, dan editor kolaboratif — tetapi melakukan debugging sangat menyakitkan. Chrome DevTools menampilkan bingkai WebSocket, tetapi UInya tidak rapi dan pemfilteran terbatas. WebSocket Inspector memberi Anda tampilan yang lebih bersih dan tujuan khusus. Alat ini memasang pembungkus di sekitar konstruktor WebSocket asli dalam konteks halaman, sehingga setiap WebSocket() baru dicegat. Setiap koneksi muncul dalam daftar dengan URL, status (menghubung → terbuka → tertutup), durasi, dan kode penutupan saat terputus. Setiap bingkai — dikirim dan diterima — ditangkap dengan stempel waktu, arah, ukuran, bendera biner, dan pratinjau. Klik bingkai apa pun untuk melihat muatan lengkapnya, secara otomatis diformat dengan cantik jika JSON. Filter berdasarkan arah (dikirim / diterima), hanya biner, atau berdasarkan koneksi tertentu. Karena pembungkus dipasang ketika alat diaktifkan, Anda ingin memuat ulang halaman untuk menangkap koneksi yang ada — koneksi baru ditangkap sejak saat Anda membuka alat.
Menampilkan setiap WebSocket dengan status (menghubung/terbuka/tertutup), URL, durasi, kode penutupan, dan alasan penutupan apa pun.
Bingkai yang dikirim (↑) dan diterima (↓) ditampilkan dengan stempel waktu, ukuran, bendera biner, dan pratinjau inline.
Klik bingkai untuk melihat muatan lengkapnya. String JSON secara otomatis memformat dengan indentasi 2-spasi untuk inspeksi yang dapat dibaca.
Filter bingkai ke hanya dikirim, hanya diterima, atau hanya biner — fokus pada apa yang Anda debug.
Klik koneksi untuk memfilter bingkai ke yang itu saja — berguna ketika beberapa WebSocket aktif (mis., obrolan + kehadiran).
Setiap WebSocket yang dibuka setelah alat diaktifkan ditangkap segera. Muat ulang hanya untuk menangkap yang sudah ada sebelumnya.
Lihat dengan tepat pesan apa yang dikirim dan diterima antara klien dan server — tentukan di mana pengiriman gagal.
Inspeksi operasi langganan dan dorong data masuk untuk men-debug muatan yang tidak cocok atau bug kerusakan langganan.
Pahami cara kerja API realtime pihak ketiga dengan mengamati struktur pesan dan waktu.
Verifikasi bahwa bingkai keep-alive dikirim pada interval yang diharapkan — ping yang terlewatkan dapat menjelaskan pemutusan koneksi yang tidak terduga.
Pantau peristiwa penutupan (dengan kode dan alasan) dan upaya koneksi baru berikutnya untuk men-debug bug retry/reconnect.
Klik ikon WebSocket di dermaga DevSuite Pro. Alat diaktifkan dan panel terbuka menampilkan koneksi dan bingkai.
WebSocket yang dibuka SEBELUM alat diaktifkan tidak akan ditangkap. Muat ulang untuk membuat ulang dan mencegat dari awal.
Saat halaman membuka WebSocket, mereka muncul dalam daftar Koneksi dengan pembaruan status langsung.
Setiap bingkai log secara real-time. Filter berdasarkan arah atau klik koneksi untuk mempersempit daftar.
Klik bingkai apa pun untuk melihat muatan lengkapnya (JSON yang diformat dengan cantik jika berlaku) beserta stempel waktu, ukuran, dan bendera biner.
Instal DevSuite Pro secara gratis dan buka 64+ alat pengembang untuk browser Anda.
