Debugowanie WebSocket w Google Chrome

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

Narzędzia dla programistów Chrome mają teraz możliwość wyświetlania list ramek WebSocket, a także sprawdzania danych, jeśli ramki nie są binarne.

Proces:

1. Uruchom narzędzia Chrome dla programistów
2. Załaduj stronę i zainicjuj połączenia WebSocket
3. Kliknij kartę Sieć .
4. Wybierz połączenie WebSocket z listy po lewej stronie (będzie miało status „101 Protokołów przełączania”).
5. Kliknij pod zakładkę Wiadomości . Ramki binarne pojawią się wraz z długością i znacznikiem czasu i wskażą, czy są zamaskowane. Ramki tekstowe pokażą także zawartość ładunku.

Jeśli twoje połączenie WebSocket używa ramek binarnych, prawdopodobnie nadal będziesz chciał użyć Wireshark do debugowania połączenia. Wireshark 1.8.0 dodał obsługę sekcji i filtrowania dla WebSockets. Alternatywę można znaleźć w tej drugiej odpowiedzi .

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

1. Przejdź do wersji demonstracyjnej WebSocket Echo , hostowanej na stronie websocket.org .
2. Włącz Chrome Developer Tools.
3. Kliknij Sieć , a aby odfiltrować ruch wyświetlany przez Narzędzia deweloperskie , kliknij WebSockets .
4. W wersji demonstracyjnej Echo kliknij Połącz . Na karcie Nagłówki w Google Dev Tool możesz sprawdzić uścisk dłoni WebSocket.
5. Kliknij przycisk Wyślij w wersji demonstracyjnej Echo.
6. TEN KROK JEST WAŻNY : Aby wyświetlić ramki WebSocket w Narzędziach dla programistów Chrome, w obszarze Nazwa / ścieżka kliknij pozycję echo.websocket.org, reprezentującą połączenie WebSocket. Spowoduje to odświeżenie głównego panelu po prawej stronie i wyświetlenie karty Ramki WebSocket z rzeczywistą zawartością wiadomości WebSocket.

Uwaga : Za każdym razem, gdy wysyłasz lub odbierasz nowe wiadomości, musisz odświeżyć panel główny, klikając pozycję echo.websocket.org po lewej stronie.

Opublikowałem również kroki ze zrzutami ekranu i wideo .

Moja niedawno opublikowana książka, The Definitive Guide to HTML5 WebSocket , zawiera również dedykowany dodatek obejmujący różne narzędzia inspekcyjne, w tym Chrome Dev Tools, Chrome net-internals i Wire Shark.

Wygląda na to, że ciągle zmieniają rzeczy w Chrome, ale oto, co teraz działa :-)

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

• Nigdy WSwcześniej tego nie zauważyłem, ale odfiltrowuje połączenia gniazd sieciowych.

• Wybierz, a następnie zobaczysz ramki, które pokażą Ci komunikaty o błędach itp.

Jeśli nie masz strony, która ma dostęp do gniazda sieciowego, możesz otworzyć konsolę Chrome i wpisać JavaScript w:

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

Spowoduje to otwarcie gniazda sieciowego, dzięki czemu będzie można go zobaczyć na karcie sieci i w konsoli.

Inne odpowiedzi dotyczą najczęstszego scenariusza: obejrzyj zawartość ramek (Narzędzia dla programistów -> karta Sieć -> kliknij prawym przyciskiem myszy połączenie WebSocket -> ramki).

Jeśli chcesz dowiedzieć się więcej informacji, na przykład, które gniazda są obecnie otwarte / bezczynne lub możesz je zamknąć, przekonasz się, że ten adres URL jest przydatny

chrome://net-internals/#sockets

Masz 3 opcje: Chrome (za pomocą Narzędzi dla programistów -> karta Sieć), Wireshark i Fiddler (za pomocą karty Dziennik), jednak wszystkie są bardzo proste. Jeśli masz bardzo duży ruch lub każda ramka jest bardzo duża, bardzo trudno jest je wykorzystać do debugowania.

Możesz jednak użyć narzędzia Fiddler z narzędziem FiddlerScript, aby sprawdzić ruch WebSocket w taki sam sposób, w jaki kontrolujesz ruch HTTP. Zaletą tego rozwiązania jest to, że można wykorzystać wiele innych funkcji Fiddlera, takich jak wiele inspektorów (HexView, JSON, SyntaxView), porównywać pakiety i znajdować pakiety itp.

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

Właśnie to publikuję, ponieważ Chrome dużo się zmienia i żadna z odpowiedzi nie była dość aktualna.

1. Otwórz narzędzia programistyczne
2. ODŚWIEŻ SWOJĄ STRONĘ (aby połączenie WS zostało przechwycone przez kartę sieciową)
3. Kliknij swoją prośbę
4. Kliknij podkartę „Ramki”
5. Powinieneś zobaczyć coś takiego:

Krótka odpowiedź dla Chrome w wersji 29 i nowszych:

1. Otwórz debuger, przejdź do zakładki „Sieć”
2. Załaduj stronę z websocket
3. Kliknij żądanie websocket z odpowiedzią na aktualizację z serwera
4. Wybierz zakładkę „Ramki”, aby wyświetlić ramki gniazda sieciowego
5. Kliknij ponownie żądanie websocket, aby odświeżyć ramki

Narzędzia dla programistów Chrome pozwalają zobaczyć żądanie uzgadniania, które pozostaje w toku podczas otwartego połączenia, ale o ile wiem, nie widać ruchu. Możesz go jednak obwąchać na przykład.

Użyłem rozszerzenia Chrome o nazwie Simple WebSocket Client v0.1.3, które zostało opublikowane przez użytkownika hakobera. Jest bardzo prosty w użyciu, ponieważ umożliwia otwieranie gniazd sieciowych pod danym adresem URL, wysyłanie wiadomości i zamykanie połączenia gniazdowego. To jest bardzo minimalistyczne.

Jeśli chodzi o narzędzie, którego zacząłem używać, proponuję firecamp Jest jak Postman, ale obsługuje również websockets i socket.io.