Debugowanie WebSocket w Google Chrome

Question

Czy istnieje sposób lub rozszerzenie, które pozwala mi oglądać "ruch" przechodzący przez WebSocket? Do celów debugowania chciałbym zobaczyć żądania/odpowiedzi klienta i serwera.

Answer 1

Narzędzia programistów Chrome mogą teraz wyświetlać ramki WebSocket, a także sprawdzać dane, jeśli ramki nie są binarne.

Proces:

1. Uruchom Chrome Narzędzia dla programistów
2. Załaduj swoją stronę i inicjować połączenia websocket
3. kliknij kartę Sieć .
4. Wybierz połączenie websocket z listy po lewej stronie (będzie mieć status „101 protokołów przełączania”.
5. Kliknij kartę podrzędną Ramki. Binarne ramki pokaże się z długości i długotrwałych pieczęć i wskazanie, czy są one maskowane. ramki tekstowe pokaże także zawartości ładunku.

Jeśli połączenie websocket używa ramek binarnych a następnie będzie prawdopodobnie nadal chcesz używać Wireshark do debugowania połączenia. Wireshark 1.8.0 dodany paraszyta i filtrowanie obsługa WebSockets. Alternatywnie można znaleźć w tym other answer.

Answer 2

Narzędzia dla programistów Chrome pozwalają zobaczyć prośbę o uzgadnianie, która pozostaje w toku podczas otwierania połączenia, ale nie można zobaczyć ruchu z tego, co wiem. Możesz jednak na przykład: sniff it.

Answer 3

Chrome Canary i Chromium mają teraz funkcję kontroli ramki wiadomości WebSocket. Oto kroki, aby przetestować go szybko:

1. Przejdź do WebSocket Echo demo, hostowane na stronie websocket.org.
2. Włącz narzędzia dla programistów w przeglądarce Chrome.
3. Kliknij Sieć, a aby filtrować ruch pokazywany przez narzędzia Dev, kliknij WebSockets.
4. W wersji demonstracyjnej echa kliknij Połącz. Na karcie Nagłówki w Google Dev Tool możesz sprawdzić uścisk WebSocket.
5. Kliknij przycisk Wyślij w wersji demonstracyjnej Echo.
6. KROK WAŻNY: Aby wyświetlić ramki WebSocket w Narzędziach programisty Chrome, w obszarze Nazwa/ścieżka kliknij wpis echo.websocket.org, reprezentujący połączenie WebSocket. Spowoduje to odświeżenie głównego panelu po prawej stronie i sprawi, że karta WebSocket Frames wyświetli się z rzeczywistą treścią wiadomości WebSocket.

Uwaga: Za każdym razem wysyłać lub odbierać nowe wiadomości, trzeba odświeżyć główny panel klikając na wejściu echo.websocket.org po lewej stronie.

Wysłałem również steps with screen shots and video.

Moja ostatnio opublikowana książka, The Definitive Guide to HTML5 WebSocket, zawiera również dodatek poświęcony różnym narzędziom do inspekcji, w tym narzędziom Chrome Dev, wbudowanym netom Chrome i Wire Shark.

Answer 4

Krótka odpowiedź na Chrome w wersji 29 i up:

1. Otwarte debugger, przejdź na zakładkę "Sieć" stronie
2. Załaduj websocket
3. Kliknij na życzenie websocket z aktualizacji odpowiedź od serwera
4. Wybierz zakładkę "frames", aby zobaczyć ramek websocket
5. Kliknij na życzenie websocket ponownie do odświeżania klatek

Answer 5

Masz 3 opcje: Chrome (przez Narzędzia programistyczne -> zakładka Sieć), Wireshark i Skrzypek (przez zakładkę Log), jednak wszystkie są bardzo proste. Jeśli masz bardzo duży ruch lub każda klatka jest bardzo duża, bardzo trudno jest użyć ich do debugowania.

Można jednak użyć Fiddlera z FiddlerScript do sprawdzenia ruchu WebSocket w taki sam sposób, w jaki kierujemy się ruchem HTTP. Zaletą tego rozwiązania jest to, że możesz wykorzystać wiele innych funkcji w Fiddler, takich jak wielu inspektorów (HexView, JSON, SyntaxView), porównywać pakiety i znajdować pakiety itp.

Proszę odnieść się do mojego ostatnio napisanego artykułu na temat CodeProject, który pokazuje, jak debugować/sprawdzać ruch WebSocket za pomocą Fiddlera (z FiddlerScript). http://www.codeproject.com/Articles/718660/Debug-Inspect-WebSocket-traffic-with-Fiddler

Answer 6

Jeśli nie masz stronę, która ma dostęp do websocket, można otworzyć konsolę Chrome i wpisz JavaScript w:

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

To otworzy websocket więc widać w karcie sieci i konsoli.

Answer 7

Pozostałe odpowiedzi dotyczą najczęściej spotykanego scenariusza: obejrzyj zawartość klatek (Narzędzia dla programistów -> karta Sieć -> Kliknij prawym przyciskiem myszy połączenie internetowe -> klatki).

Jeśli chcesz dowiedzieć się trochę więcej informacji, takich jak gniazda, które są obecnie otwarte/bezczynny lub być w stanie zamknąć je znajdziesz ten link przydatnych

chrome://net-internals/#sockets 

Answer 8

Wydają się ciągle zmieniać rzeczy w Chrome ale oto, co działa teraz :-)

• Najpierw musisz kliknąć czerwony przycisk nagrywania, bo inaczej nic nie dostaniesz.

• Nigdy wcześniej nie zauważyłem, że WS odfiltrowuje połączenia z gniazdem sieciowym .

• Wybierz, a następnie możesz zobaczyć ramki, które pokażą ci komunikaty o błędach itp.

Answer 9

Użyłem rozszerzenie Chrome o nazwie Simple WebSocket Client v0.1.3 który jest wydawany przez hakobera użytkownika. Jest bardzo prosty w użyciu, umożliwiając otwieranie stron internetowych pod danym adresem URL, wysyłanie wiadomości i zamykanie połączenia z gniazdem. Jest bardzo minimalistyczny.