Debugowanie WebSocket w Google Chrome

213

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.

łagodny
źródło

Odpowiedzi:

250

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 .

kanaka
źródło
1
Czy wiesz, jak do tego celu użyć Wireshark? Tak naprawdę nigdy go nie użyłem i wydaje się, że pokazuje cały ruch sieciowy i pokazuje nieprzetworzone pakiety.
łagodny
2
Możesz ograniczyć przechwytywanie do jednego portu za pomocą filtrów przechwytywania . Alternatywnie, po uzyskaniu przechwytywania, powinieneś być w stanie kliknąć prawym przyciskiem myszy dowolną przechwyconą klatkę, która jest częścią sesji i wybrać opcję pokazania tylko tej sesji.
kanaka
1
Niestety korzystanie z WireShark przy użyciu localhost na Windowsie wymaga przeskakiwania przez obręcze, aby działał. Zobacz wiki.wireshark.org/CaptureSetup/Loopback
Greg Woods
2
Niedawno napisałem artykuł o CodeProject, który pokazuje, jak debugować / sprawdzać ruch WebSocket za pomocą Fiddlera. codeproject.com/Articles/718660/...
engineforce
1
@NiCkNewman tak, jest to 7-bitowe pole wskazujące długość bajtu ładunku. Jeśli jednak wartość pola wynosi 126 lub 127, to kolejne 16 lub 64 bity to odpowiednio długość ładunku w bajtach. Zobacz opis pola długości w specyfikacji: tools.ietf.org/html/rfc6455#section-5.2 (dość łatwo można go odczytać). To trochę dziwne, ale sprawia, że ​​krótkie wiadomości są bardzo wydajne (tylko nagłówek 2-bajtowy).
kanaka
72

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.

Peter Moskovits
źródło
3
Zachowaj ostrożność, publikując odpowiedzi na wiele pytań, kopiując i wklejając odpowiedzi na wiele pytań, które zazwyczaj są oznaczane przez społeczność jako „spamerskie”. Jeśli to robisz, oznacza to zwykle, że pytania są duplikatami, więc oznacz je jako takie.
Kev
2
Dziękujemy za krok 6! Wiedziałem o filtrze WebSockets na karcie Sieć, ale byłem sfrustrowany, że zdawało się, że przechwytuje tylko kilka pierwszych wiadomości. Czy wiesz, czy istnieje sposób, aby uświadomić sobie połączenie typu websocket, które było otwarte przed otwarciem karty?
Bryan Head
Bryan - Nie wierzę, żebyś mógł dzisiaj.
Peter Moskovits
@PeterMoskovits Czy na pewno znasz sposób na sprawdzenie zawartości ramek binarnych w Chrome? Obecnie widzę tylko jego długość!
Howie
@Howie Nie możesz tego zrobić w Chrome. Możesz do tego użyć WireShark. Nasza nowa książka, The Definitive Guide to HTML5 WebSocket, zawiera również krótkie wprowadzenie do WireShark. amazon.com/Definitive-Guide-HTML5-WebSocket-Apress/dp/…
Peter Moskovits
52

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.

wprowadź opis zdjęcia tutaj

Simon_Weaver
źródło
Nie podoba mi się, jak ten JSON jest tam brzydko sformatowany. Zasadniczo brak formatowania.
ses
1
@ses to protokół signalR. Weź to z Microsoftem 😜
Simon_Weaver
1
cieszę się, że przynajmniej ta odpowiedź jest nadal dobra cztery lata później: p
Stu Thompson
1
@StuThompson tak - moje opinie rosną :-)
Simon_Weaver
41

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.

Dylan
źródło
Dzięki! Ponadto: otwierana strona musi być tego samego źródła co twoja strona. Jeśli spróbujesz otworzyć narzędzia programistyczne Chrome innego pochodzenia (lub nawet stronę nowej karty), a następnie połączyć się z gniazdem internetowym, pojawi się błąd autoryzacji.
Dan Esparza
Czy istnieje sposób, aby to naprawić?
not2qubit
37

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
Riccardo Galli
źródło
10

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.Sprawdź ruch WebSocket

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

siła silnika
źródło
5

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:

wprowadź opis zdjęcia tutaj

iuliu.net
źródło
4

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
Opony
źródło
1
Wydaje się, że to działa, ale denerwujące jest to, że przestaje działać, jeśli rozłączysz i ponownie połączysz się z adresem URL websocket (np. Na websocket.org/echo.html ), w takim przypadku musisz odświeżyć stronę! :(
matanster
3

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.

yojimbo87
źródło
2

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.

DPancs
źródło
2

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.

InsOp
źródło