WebSocket Inspector capture chaque trame WebSocket — envoyée et reçue — sur toutes les connexions de la page. Affiche le cycle de vie de la connexion (connexion/ouvert/fermé avec codes), la direction de la trame, la taille, le format binaire et l'aperçu, avec une mise en forme JSON des contenus. Comble un manque réel des DevTools pour le débogage de protocoles en temps réel.
Les WebSockets alimentent les chats, les tableaux de bord en direct, les abonnements GraphQL, les jeux multijoueurs et les éditeurs collaboratifs — mais leur débogage est pénible. Les DevTools de Chrome affichent les trames, mais l'interface est lourde et le filtrage limité. WebSocket Inspector offre une vue dédiée et plus claire. L'outil installe un wrapper autour du constructeur natif WebSocket afin d'intercepter chaque nouveau WebSocket(). Chaque connexion apparaît dans une liste avec son URL, son statut, sa durée et son code de fermeture. Chaque trame est capturée avec horodatage, direction, taille, indicateur binaire et aperçu. Cliquez sur une trame pour voir son contenu complet, formatté s'il s'agit de JSON. Filtrez par direction (envoyé / reçu), par format binaire ou par connexion spécifique.
Affiche chaque WebSocket avec son statut (connexion/ouvert/fermé), son URL, sa durée, son code de fermeture et toute raison de fermeture.
Trames envoyées (↑) et reçues (↓) affichées avec horodatage, taille, indicateur binaire et aperçu intégré.
Cliquez sur une trame pour voir le contenu complet. Les chaînes JSON sont automatiquement formattées avec une indentation de 2 espaces pour une lecture aisée.
Filtrez les trames pour n'afficher que les envois, les réceptions ou uniquement le binaire — concentrez-vous sur ce que vous débuggez.
Cliquez sur une connexion pour filtrer ses trames — utile quand plusieurs WebSockets sont actifs simultanément (ex: chat + présence).
Tout WebSocket ouvert après l'activation de l'outil est capturé immédiatement. Rechargez uniquement pour capturer les pré-existants.
Voyez exactement quels messages transitent entre client et serveur — identifiez où la livraison échoue.
Inspectez les opérations d'abonnement et les poussées de données entrantes pour débugger les erreurs de contenu ou de fermeture.
Comprenez le fonctionnement d'une API temps réel tierce en observant la structure et le timing de ses messages.
Vérifiez que les trames de maintien de connexion (keep-alive) sont envoyées à l'intervalle prévu — un ping manqué peut expliquer une déconnexion.
Observez l'événement de fermeture (code et raison) et les tentatives de nouvelle connexion pour débugger la logique de répétition.
Cliquez sur l'icône WebSocket dans le dock DevSuite Pro. L'outil s'active et un panneau affiche les connexions et les trames.
Les WebSockets ouverts AVANT l'activation ne seront pas capturés. Rechargez pour les intercepter dès le début.
À mesure que la page ouvre des WebSockets, ils s'affichent dans la liste avec des mises à jour de statut en direct.
Chaque trame est enregistrée en temps réel. Filtrez par direction ou cliquez sur une connexion pour affiner la liste.
Cliquez sur une trame pour voir son contenu complet (JSON formatté si possible) ainsi que l'horodatage, la taille et l'indicateur binaire.
Installez DevSuite Pro gratuitement et débloquez plus de 39 outils de développement pour votre navigateur.
