WebSocket Inspector захоплює кожен WebSocket-фрейм — надісланий і отриманий — по всіх з'єднаннях на сторінці. Показує життєвий цикл з'єднання (connecting/open/closed із кодами закриття), напрямок кожного фрейму, розмір, ознаку бінарних даних і попередній перегляд, із гарним форматуванням JSON-навантажень. Закриває реальну прогалину DevTools для налагодження протоколів реального часу.
WebSocket живить чат-застосунки, панелі живих даних, GraphQL-підписки, багатокористувацькі ігри та інструменти спільного редагування — але налагоджувати їх складно. Chrome DevTools показує WebSocket-фрейми, але їхній інтерфейс незручний, а фільтрація обмежена. WebSocket Inspector дає чистіший, спеціально розроблений вигляд. Інструмент встановлює обгортку навколо нативного конструктора WebSocket у контексті сторінки, тому кожен new WebSocket() перехоплюється. Кожне з'єднання з'являється у списку зі своїм URL, статусом (connecting → open → closed), тривалістю та кодом закриття у разі розриву. Кожен фрейм — надісланий і отриманий — фіксується з міткою часу, напрямком, розміром, ознакою бінарних даних і попереднім переглядом. Клацніть на будь-якому фреймі, щоб побачити повне навантаження, автоматично гарно відформатоване, якщо це JSON. Фільтруйте за напрямком (надіслано / отримано), лише бінарні дані або за конкретним з'єднанням. Оскільки обгортка встановлюється в момент активації інструмента, потрібно перезавантажити сторінку, щоб зафіксувати вже наявні з'єднання — нові з'єднання захоплюються з моменту відкриття інструмента.
Показує кожен WebSocket зі статусом (connecting/open/closed), URL, тривалістю, кодом закриття та причиною закриття, якщо є.
Показані як надіслані (↑), так і отримані (↓) фрейми з міткою часу, розміром, ознакою бінарних даних та вбудованим попереднім переглядом.
Клацніть на фреймі, щоб побачити повне навантаження. JSON-рядки автоматично форматуються з відступом у 2 пробіли для зручного перегляду.
Фільтруйте фрейми, щоб бачити лише надіслані, лише отримані або лише бінарні — зосередьтеся на тому, що налагоджуєте.
Клацніть на з'єднанні, щоб відфільтрувати фрейми лише для нього — корисно, коли активно кілька WebSocket-з'єднань (наприклад, чат + присутність).
Будь-який WebSocket, відкритий після активації інструмента, захоплюється миттєво. Перезавантаження потрібне лише для вже наявних з'єднань.
Побачте точно, які повідомлення надсилаються та отримуються між клієнтом і сервером — визначте, де саме порушується доставка.
Перевіряйте операції підписок і вхідні надсилання даних, щоб налагодити невідповідні навантаження чи помилки завершення підписки.
Зрозумійте, як працює сторонній API реального часу, спостерігаючи за структурою його повідомлень і таймінгом.
Перевірте, що keep-alive фрейми надсилаються з очікуваним інтервалом — пропущений ping може пояснити несподівані розриви з'єднання.
Спостерігайте за подією закриття (з кодом і причиною) та наступними спробами нового з'єднання, щоб налагодити помилки повторного підключення.
Натисніть іконку WebSocket у боковій панелі DevSuite Pro. Інструмент активується, і відкривається панель зі з'єднаннями та фреймами.
WebSocket-з'єднання, відкриті ДО активації інструмента, не будуть захоплені. Перезавантажте сторінку, щоб створити їх заново і перехопити з самого початку.
Коли сторінка відкриває WebSocket-з'єднання, вони з'являються у списку з'єднань з оновленням статусу в реальному часі.
Кожен фрейм фіксується в реальному часі. Фільтруйте за напрямком або клацніть на з'єднанні, щоб звузити список.
Клацніть на будь-якому фреймі, щоб побачити повне навантаження (гарно відформатований JSON, якщо застосовно) разом із міткою часу, розміром та ознакою бінарних даних.
Встановіть DevSuite Pro безкоштовно та отримайте понад 64 інструментів розробника
