WebSocket Inspector, sayfadaki tüm bağlantılar üzerinden gönderilen ve alınan her WebSocket çerçevesini (frame) yakalar. Bağlantı yaşam döngüsünü (bağlanıyor/açık/kapalı durumları ve kapanış kodları), çerçeve yönünü, boyutunu, ikili (binary) bayrağını ve önizlemesini gösterir; JSON içerikleri ise formatlanmış (pretty-printed) şekilde sunulur. Gerçek zamanlı protokol hata ayıklama süreçlerinde DevTools'un eksiklerini tamamlar.
WebSocket'ler sohbet uygulamalarına, canlı panellere, GraphQL aboneliklerine, çok oyunculu oyunlara ve ortak çalışma editörlerine güç verir; ancak bunlarda hata ayıklamak zordur. Chrome DevTools WebSocket çerçevelerini gösterir, ancak arayüzü hantaldır ve filtreleme seçenekleri sınırlıdır. WebSocket Inspector size daha temiz ve amaca yönelik bir görünüm sunar. Araç, sayfa bağlamındaki yerel WebSocket yapılandırıcısının etrafına bir sarmalayıcı (wrapper) yerleştirir, böylece her yeni 'new WebSocket()' işlemi yakalanır. Her bağlantı; URL'si, durumu (bağlanıyor → açık → kapalı), süresi ve bağlantı kesildiğinde kapanış koduyla birlikte bir listede gösterilir. Gönderilen ve alınan her çerçeve; zaman damgası, yön, boyut, ikili bayrak ve önizleme ile kaydedilir. Herhangi bir çerçeveye tıklayarak tam içeriğini görebilirsiniz; içerik JSON ise otomatik olarak okunabilir şekilde formatlanır. Yön (gönderilen/alınan), sadece ikili veri veya belirli bir bağlantıya göre filtreleme yapabilirsiniz. Sarmalayıcı araç etkinleştirildiğinde yüklendiği için, mevcut bağlantıları yakalamak için sayfayı yenilemeniz gerekir; yeni bağlantılar ise aracın açıldığı andan itibaren yakalanır.
Her WebSocket'i durumu (bağlanıyor/açık/kapalı), URL'si, süresi, kapanış kodu ve varsa kapanış nedeniyle birlikte gösterir.
Hem gönderilen (↑) hem de alınan (↓) çerçeveler; zaman damgası, boyut, ikili bayrak ve satır içi önizleme ile görüntülenir.
Tam içeriği görmek için bir çerçeveye tıklayın. JSON dizeleri, rahat inceleme için 2 boşluk girintili olarak otomatik formatlanır.
Çerçeveleri sadece gönderilen, sadece alınan veya sadece ikili veri olarak filtreleyin; hata ayıkladığınız konuya odaklanın.
Birden fazla aktif WebSocket olduğunda (örneğin sohbet + varlık durumu), çerçeveleri sadece o bağlantıya göre daraltmak için bir bağlantıya tıklayın.
Araç etkinleştirildikten sonra açılan tüm WebSocket'ler anında yakalanır. Sayfayı sadece önceden var olanları yakalamak için yenileyin.
İstemci ve sunucu arasında tam olarak hangi mesajların gönderilip alındığını görün; iletimin nerede başarısız olduğunu tam olarak belirleyin.
Hatalı içerikleri veya abonelik sonlandırma hatalarını ayıklamak için abonelik işlemlerini ve gelen veri akışlarını inceleyin.
Üçüncü taraf bir gerçek zamanlı API'nin mesaj yapısını ve zamanlamasını gözlemleyerek nasıl çalıştığını anlayın.
Bağlantıda kalma (keep-alive) çerçevelerinin beklenen aralıklarla gönderildiğini doğrulayın; kaçırılan bir ping, beklenmedik kopmaları açıklayabilir.
Kapanış olayını (kod ve neden ile birlikte) ve ardından gelen yeni bağlantı girişimlerini izleyerek yeniden deneme hatalarını ayıklayın.
DevSuite Pro dock'undaki WebSocket simgesine tıklayın. Araç etkinleşir ve bağlantıları/çerçeveleri gösteren panel açılır.
Araç etkinleşmeden ÖNCE açılan WebSocket'ler yakalanamaz. Bunları yeniden oluşturmak ve baştan yakalamak için sayfayı yenileyin.
Sayfa WebSocket'leri açtıkça, bunlar canlı durum güncellemeleriyle birlikte Bağlantılar listesinde görünür.
Her çerçeve gerçek zamanlı olarak günlüğe kaydedilir. Yöne göre filtreleyin veya listeyi daraltmak için bir bağlantıya tıklayın.
Bir çerçevenin tam içeriğini (varsa formatlanmış JSON), zaman damgasını, boyutunu ve ikili bayrağını görmek için üzerine tıklayın.
DevSuite Pro'yu ücretsiz yükleyin ve tarayıcınız için 64'dan fazla geliştirici aracının kilidini açın.
