WebSocket Inspector przechwytuje każdą ramkę WebSocket — wysłaną i odebraną — we wszystkich połączeniach na stronie. Pokazuje cykl życia połączenia (łączenie/otwarte/zamknięte wraz z kodami zamknięcia), kierunek ramki, rozmiar, flagę binarną oraz podgląd z sformatowanymi danymi JSON. Rozwiązuje rzeczywiste ograniczenia DevTools w debugowaniu protokołów czasu rzeczywistego.
Protokół WebSocket napędza czaty, pulpity nawigacyjne na żywo, subskrypcje GraphQL, gry wieloosobowe i edytory współpracujące — ale ich debugowanie bywa uciążliwe. Narzędzia Chrome DevTools pokazują ramki WebSocket, ale ich interfejs jest toporny, a filtrowanie ograniczone. WebSocket Inspector oferuje czystszy, wyspecjalizowany widok. Narzędzie instaluje wrapper wokół natywnego konstruktora WebSocket w kontekście strony, dzięki czemu każde wywołanie new WebSocket() jest przechwytywane. Każde połączenie pojawia się na liście wraz z adresem URL, statusem (łączenie → otwarte → zamknięte), czasem trwania i kodem zamknięcia. Każda ramka — wysłana i odebrana — jest rejestrowana ze znacznikiem czasu, kierunkiem, rozmiarem i flagą binarną. Kliknij dowolną ramkę, aby zobaczyć jej pełny ładunek (payload), automatycznie sformatowany, jeśli jest to JSON. Filtruj według kierunku, tylko ramek binarnych lub konkretnego połączenia. Ponieważ wrapper jest instalowany w momencie aktywacji narzędzia, zaleca się odświeżenie strony, aby przechwycić istniejące połączenia — nowe są rejestrowane od momentu otwarcia narzędzia.
Pokazuje każdy WebSocket ze statusem (łączenie/otwarte/zamknięte), adresem URL, czasem trwania, kodem zamknięcia i jego przyczyną.
Zarówno wysłane (↑), jak i odebrane (↓) ramki są wyświetlane ze znacznikiem czasu, rozmiarem, flagą binarną i podglądem wiersza.
Kliknij ramkę, aby zobaczyć pełny ładunek. Ciągi JSON są automatycznie formatowane z 2-spacyjnym wcięciem dla lepszej czytelności.
Filtruj ramki tylko do wysłanych, tylko odebranych lub tylko binarnych — skup się na tym, co aktualnie debugujesz.
Kliknij połączenie, aby ograniczyć widok ramek tylko do niego — przydatne, gdy aktywnych jest wiele WebSocketów (np. czat + obecność).
Każdy WebSocket otwarty po aktywacji narzędzia jest przechwytywany natychmiast. Odśwież stronę tylko, aby złapać te już istniejące.
Zobacz dokładnie, jakie wiadomości są wysyłane i odbierane między klientem a serwerem — ustal, gdzie zawodzi dostarczanie danych.
Sprawdzaj operacje subskrypcji i przychodzące dane, aby debugować błędy w strukturze ładunku lub problematyczne rozłączenia.
Zrozum działanie zewnętrznych API czasu rzeczywistego, obserwując strukturę i czas wysyłania ich komunikatów.
Upewnij się, że ramki podtrzymujące połączenie (keep-alive) są wysyłane w oczekiwanych odstępach — brakujący ping może wyjaśniać nagłe rozłączenia.
Obserwuj zdarzenie zamknięcia (z kodem i przyczyną) oraz kolejne próby nawiązania połączenia, aby naprawić błędy w mechanizmie retry/reconnect.
Kliknij ikonę WebSocket w panelu DevSuite Pro. Narzędzie aktywuje się i otworzy panel pokazujący połączenia i ramki.
WebSockety otwarte PRZED aktywacją narzędzia nie zostaną przechwycone. Odśwież stronę, aby utworzyć je ponownie i przechwycić od startu.
Gdy strona otwiera WebSockety, pojawiają się one na liście Connections z aktualizacją statusu na żywo.
Każda ramka jest rejestrowana w czasie rzeczywistym. Filtruj według kierunku lub kliknij połączenie, aby zawęzić listę.
Kliknij dowolną ramkę, aby zobaczyć jej pełny ładunek (sformatowany JSON, jeśli dotyczy) wraz ze znacznikiem czasu, rozmiarem i flagą binarną.
Zainstaluj DevSuite Pro za darmo i odblokuj ponad 64 narzędzi programistycznych dla swojej przeglądarki.
