Google Chrome'da WebSocket'te hata ayıklama

Bir WebSocket üzerinden geçen "trafiği" izlememe izin veren bir yol veya uzantı var mı? Hata ayıklama amacıyla, istemci ve sunucu isteklerini / yanıtlarını görmek istiyorum.

Chrome geliştirici araçları artık WebSocket çerçevelerini listeleyebiliyor ve çerçeveler ikili değilse verileri inceleyebiliyor.

Süreci:

1. Chrome Geliştirici araçlarını başlatın
2. Sayfanızı yükleyin ve WebSocket bağlantılarını başlatın
3. Ağ Sekmesine tıklayın .
4. Soldaki listeden WebSocket bağlantısını seçin ("101 Anahtarlama Protokolü" durumuna sahip olacaktır.
5. Click Mesajlar alt sekmesini. İkili kareler bir uzunluk ve zaman damgası ile görünecek ve maskelenip maskelenmediklerini gösterecektir. Metin çerçeveleri ayrıca yük içeriği içerir.

WebSocket bağlantınız ikili çerçeveler kullanıyorsa, muhtemelen bağlantıda hata ayıklamak için Wireshark kullanmak isteyeceksiniz. Wireshark 1.8.0 WebSockets için ayırıcı ve filtreleme desteği ekledi. Bu diğer cevapta bir alternatif bulunabilir .

Chrome Canary ve Chromium artık WebSocket mesaj çerçevesi inceleme özelliğine sahip. Hızlı bir şekilde test etmek için adımlar şunlardır:

1. Websocket.org sitesinde barındırılan WebSocket Echo demosuna gidin .
2. Chrome Geliştirici Araçları'nı açın.
3. Ağ'ı tıklayın ve Geliştirme Araçları tarafından gösterilen trafiği filtrelemek için WebSockets'i tıklayın .
4. Yankı demosunda Bağlan'ı tıklayın . Google Geliştirici Aracı'ndaki Üstbilgiler sekmesinde WebSocket el sıkışmasını inceleyebilirsiniz.
5. Yankı demosundaki Gönder düğmesini tıklayın.
6. BU ADIM ÖNEMLİDİR : Chrome Geliştirici Araçları'ndaki WebSocket çerçevelerini görmek için Ad / Yol altında WebSocket bağlantınızı temsil eden echo.websocket.org girişini tıklayın. Bu, sağdaki ana paneli yeniler ve WebSocket Çerçeveleri sekmesinin gerçek WebSocket mesaj içeriğiyle görünmesini sağlar.

Not : Her yeni mesaj gönderip aldığınızda, soldaki echo.websocket.org girişini tıklayarak ana paneli yenilemeniz gerekir.

Adımları ekran görüntüleri ve video ile de paylaştım .

Yakın zamanda yayınlanan kitabım olan HTML5 WebSocket için Kesin Kılavuz'da ayrıca Chrome Geliştirme Araçları, Chrome ağ iç ve Tel Köpekbalığı gibi çeşitli inceleme araçlarını kapsayan özel bir ek bulunmaktadır.

Chrome'daki içerikleri sürekli değiştiriyor gibi görünüyorlar, ancak şu anda işe yarayan :-)

• İlk önce kırmızı kayıt düğmesine tıklamanız gerekir, aksi takdirde hiçbir şey elde edemezsiniz.

• Daha WSönce hiç fark etmedim ama web soketi bağlantılarını filtreliyor.

• Onu seçin ve size hata mesajlarını vb. Gösterecek çerçeveleri görebilirsiniz.

Web soketine erişen bir sayfanız yoksa, Chrome konsolunu açabilir ve JavaScript'inizi aşağıdakilere yazabilirsiniz:

var webSocket = new WebSocket('ws://address:port');
webSocket.onmessage = function(data) { console.log(data); }

Bu, ağ soketini açacaktır, böylece ağ sekmesinde ve konsolda görebilirsiniz.

Diğer yanıtlar en yaygın senaryoyu kapsar: çerçevelerin içeriğini izleyin (Geliştirici Araçları -> Ağ sekmesi -> Web soketi bağlantısına sağ tıklayın -> çerçeveler).

Hangi soketlerin şu anda açık / boşta olduğunu veya bunları kapatabileceğiniz gibi daha fazla bilgi edinmek istiyorsanız, bu URL'yi yararlı bulacaksınız

chrome://net-internals/#sockets

3 seçeneğiniz vardır: Chrome (Geliştirici Araçları -> Ağ sekmesi aracılığıyla), Wireshark ve Fiddler (Günlük sekmesi aracılığıyla), ancak hepsi çok basit. Çok yüksek trafik hacminiz varsa veya her kare çok büyükse, hata ayıklama için kullanmak çok zorlaşır.

Ancak WebSocket trafiğini HTTP trafiğini incelediğiniz şekilde incelemek için Fiddler'ı FiddlerScript ile birlikte kullanabilirsiniz. Bu çözümün birkaç avantajı, Fiddler'de birden fazla denetçi (HexView, JSON, SyntaxView) gibi diğer birçok işlevsellikten yararlanabilmeniz, paketleri karşılaştırabilmeniz ve paketleri bulabilmenizdir.

Lütfen Fiddler (FiddlerScript ile) ile WebSocket trafiğinde nasıl Hata Ayıklama / İnceleme yapacağınızı gösteren CodeProject ile ilgili yeni yazılmış makaleme bakın. http://www.codeproject.com/Articles/718660/Debug-Inspect-WebSocket-traffic-with-Fiddler

Chrome çok değiştiğinden bunu gönderiyorum ve yanıtların hiçbiri güncel değil.

1. Geliştirici araçlarını aç
2. SAYFANIZI YENİLEME (WS bağlantısının ağ sekmesi tarafından yakalanması için)
3. İsteğinizi tıklayın
4. "Çerçeveler" alt sekmesini tıklayın
5. Bunun gibi bir şey görmelisin:

Chrome 29 ve sonraki sürümleri için kısa yanıt:

1. Hata ayıklayıcıyı açın, "Ağ" sekmesine gidin
2. Sayfayı websocket ile yükle
3. Sunucudan yükseltme yanıtı ile websocket isteğine tıklayın
4. Web soketi çerçevelerini görmek için "Çerçeveler" sekmesini seçin
5. Çerçeveleri yenilemek için websocket isteğine tekrar tıklayın

Chrome geliştirici araçları, açılan bağlantı sırasında beklemede olan el sıkışma isteğini görmenizi sağlar, ancak trafiği bildiğim kadarıyla göremezsiniz. Ancak , örneğin koklayabilirsin .

Kullanıcı hakobera tarafından yayınlanan Simple WebSocket Client v0.1.3 adlı Chrome uzantısını kullandım . Belirli bir URL'de web soketlerini açmaya, mesaj göndermeye ve soket bağlantısını kapatmaya izin verdiği kullanımda çok basittir. Çok minimalist.

Kullanmaya başladığım bir araca gelince, Firecamp'ı Postman gibi öneriyorum , ancak websockets ve socket.io'yu da destekliyor.