WebSocket Візуалізатор

🔌 WebSocket Visualizer - Візуалізатор WebSocket-з'єднань для Chrome DevTools

WebSocket Visualizer - це потужне розширення для розробників, яке додає нову вкладку в Chrome DevTools, де в реальному часі відображаються всі WebSocket-повідомлення через сторінку. Розширення допомагає аналізувати, фільтрувати та розуміти взаємодії між клієнтом та сервером за протоколом WebSocket – без зміни коду програми та без сторонніх бібліотек.

🌐 Основна ідея

Сучасні програми активно використовують WebSocket-з'єднання для обміну даними в реальному часі - чати, біржі, ігри, фінансові панелі, IoT-пристрої та інші системи.
Але стандартні інструменти браузера не дають зручного способу спостерігати ці потоки даних.
WebSocket Visualizer вирішує цю проблему: вона впроваджується в контекст сторінки та перехоплює нативні WebSocket-події (open, message, close, error, send), візуалізуючи все в окремій вкладці DevTools – красиво, структуровано та інтерактивно.

⚙️ Основні можливості

📡 Перехоплення всіх з'єднань

Розширення автоматично підміняє нативний конструктор WebSocket, відстежуючи всі підключення, відкриті сторінкою або бібліотеками (включаючи Socket.io, ws, Primus тощо)

💬 Відображення повідомлень

Кожне вхідне та вихідне повідомлення відображається у вигляді картки з подробицями:

Час події (з мілісекундами)

Напрямок (⬇️ вхідний / ⬆️ вихідний)

Тип події (type, event, action, cmd - визначається автоматично)

Вміст повідомлення з форматуванням JSON

URL з'єднання та ID WebSocket-сесії

🧠 Інтелектуальне угруповання

Повідомлення групуються за типом подій (наприклад, message, update, trade, heartbeat) - що дозволяє швидко аналізувати структуру протоколу та частоту конкретних подій.

📈 Реальна статистика

У верхній панелі відображається зведення:

Активні з'єднання

Усього повідомлень

Відправлено та отримано
Усі лічильники оновлюються в реальному часі без перезавантаження

🔍 Гнучка фільтрація

Швидкий пошук за типом події або ключовими словами

Перемикач напрямків: "Всі / Вхідні / Вихідні"

Можливість натиснути на тип події в бічній панелі, щоб миттєво застосувати фільтр

⏸️ Пауза та продовження

Можна призупинити потік подій для аналізу та відновити пізніше без втрати контексту – зручно при великому трафіку чи аналізі історії.

🗑️ Очищення та скидання

Одна кнопка очищає всі повідомлення та статистику, зберігаючи активні з'єднання та фільтри

🌍 Мультимовність

Підтримуються мови інтерфейсу:

English 🇬🇧

Українська 🇷🇺

Русский 🇺🇦
Вибір мови зберігається та застосовується автоматично при наступному запуску

🎨 Сучасний дизайн

Інтерфейс натхненний стилем Visual Studio Code:

Темна тема

М'які градієнти та підсвічування активних елементів

Плавні анімації появи повідомлень

Стилізовані скроллбари та акуратна друкарня

🧭 Інструкція з використання

Відкрийте DevTools (F12 або Ctrl+Shift+I).

Перейдіть у вкладку WebSocket — це розширений інтерфейс.

Завантажте або оновіть сторінку, на якій працюють з'єднання WebSocket.

Розширення автоматично перехопить і почне відображати всі події:

🔗 connection - створення з'єднання

✅ open — з'єднання відкрите

⬇️ incoming — вхідне повідомлення

⬆️ outgoing - вихідне повідомлення

❌ close — з'єднання закрите

⚠️ error - помилка або збій

Використовуйте фільтри, щоб зосередитись на потрібних подіях.

Можна призупинити потік кнопкою ⏸️ Pause, вивчити дані, потім продовжити ▶️ Resume.

Для скидання даних натисніть 🗑️ Clear - інтерфейс оновиться і почне чекати на нові з'єднання.

Усі дії миттєво відображаються в UI: анімації, лічильники та фільтри синхронізовані у реальному часі.

Приклади сценаріїв використання

🔍 Налагодження real-time чатів та месенджерів

💸 Аналіз торгових WebSocket-API криптобірж

🕹️ Моніторинг ігрових серверів та мережевої взаємодії

💬 Тестування push-повідомлень та потокових сервісів

🧩 Аналіз нестандартних протоколів поверх WS

📊 Навчальні проекти по роботі з real-time-даними

🔧 Додаткові функції

Автоматичне форматування JSON з підсвічуванням структури

Автопрокручування до останнього повідомлення

Обмеження історії (до 1000 повідомлень у списку) для оптимізації продуктивності

Безпека та конфіденційність

Розширення не збирає, не зберігає та не надсилає дані з сайтів.

Усі операції виконуються локально у контексті браузера.

Використовуються мінімальні дозволи (activeTab, scripting, storage) виключно візуалізації даних всередині DevTools.

Відсутні зовнішні запити, трекери або сторонні API.

🆕 Нове у версії 1.3.0

У новій версії WebSocket Visualizer 1.3.0 додана підтримка німецького та іспанського мов, а переключатель мов інтерфейсу оновлений і включає нові можливості локалізації. Удосконалений моніторинг активності та стану підключень, а також реалізований переглядач JSON для детального перегляду даних повідомлень. Інтерфейс отримав візуальні покращення та нові елементи статистики: тепер ви можете відстежувати кількість відправлених і отриманих байтів у режимі реального часу.
Крім того, можливості експорту повідомлень розширені та включають формати JSON, CSV і HAR, а також додана кнопка для копіювання окремих повідомлень. Весь текст, пов'язаний з експортом і статистикою, тепер локалізований для всіх підтримуваних мов. Ці оновлення роблять WebSocket Visualizer ще більш зручним для аналізу трафіку, тестування та відладки WebSocket-підключення безпосередньо в браузері.

🆕 Нове у версії 1.4.0

WebSocket Visualizer тепер підтримує обробку двійкових даних за допомогою інтегрованого шістнадцяткового переглядача для глибшого аналізу необробленого вмісту повідомлень. Логіку розбору повідомлень було покращено для забезпечення точнішого декодування складних фреймів WebSocket. Крім того, це оновлення вводить локалізовані переклади для всіх нових функцій двійкових даних, забезпечуючи більш плавний досвід для користувачів з кількома мовами.