Très intéressant pour les développeurs, les excellents DevTools de Firefox 71 intégreront un WebSocket Inspector enrichi. Une nouvelle fonctionnalité permet de voir les données réelles transférées à travers les trames. Cette nouvelle fonctionnalité peut d'ores et déjà est testée dans Firefox Developer Edition.

Pour mémoire, les WebSocket permettent de créer une connexion bidirectionnelle persistante entreun client (un navigateur) et un serveur. On travaille avec les WekSocket au moyen d'une API.

L'inspecteur WebSocket fait déjà partie de l'interface utilisateur existante du panneau Réseau dans DevTools. Mais jusqu'à présent, il n'était pas possible de voir les données réelles transférées à travers des trames WebSocket.

Maintenant, en cliquant sur une requête (101 dans l'exemple ci-dessus), dans la barre latérale qui affiche des détails sur la requête HTTP sélectionnée, apparaît désormais un nouveau panneau 'Messages' pouvant être utilisé pour inspecter les trames WS envoyées et reçues via la connexion WS sélectionnée.

Le tableau mis à jour en temps réel présente les données des trames WS envoyées (flèche verte) et reçues (flèche rouge). Chaque trame se développe par clic, ce qui permet d'inspecter les données formatées. Un filtre permet de filtrer des trames afin de se concentrer sur des messages spécifiques.

Ce nouveau WebSocket Inspector prend actuellement en charge les protocoles SON simple, Socket.IO, SockJS. SignalR et WAMP seront bientôt disponible.