Existe-t-il un moyen, ou une extension, qui me permet de surveiller le «trafic» passant par un WebSocket? À des fins de débogage, j'aimerais voir les demandes / réponses du client et du serveur.
Existe-t-il un moyen, ou une extension, qui me permet de surveiller le «trafic» passant par un WebSocket? À des fins de débogage, j'aimerais voir les demandes / réponses du client et du serveur.
Réponses:
Les outils de développement Chrome ont désormais la possibilité de répertorier les cadres WebSocket et d'inspecter également les données si les cadres ne sont pas binaires.
Processus:
Si votre connexion WebSocket utilise des cadres binaires, vous souhaiterez probablement toujours utiliser Wireshark pour déboguer la connexion. Wireshark 1.8.0 a ajouté la prise en charge du dissecteur et du filtrage pour WebSockets. Une alternative peut être trouvée dans cette autre réponse .
Chrome Canary et Chromium disposent désormais de la fonction d'inspection du cadre de messages WebSocket. Voici les étapes pour le tester rapidement:
Remarque : Chaque fois que vous envoyez ou recevez de nouveaux messages, vous devez actualiser le panneau principal en cliquant sur l'entrée echo.websocket.org à gauche.
J'ai également posté les étapes avec des captures d'écran et des vidéos .
Mon livre récemment publié, The Definitive Guide to HTML5 WebSocket , contient également une annexe dédiée couvrant les différents outils d'inspection, notamment Chrome Dev Tools, Chrome net-internals et Wire Shark.
Ils semblent changer continuellement des choses dans Chrome, mais voici ce qui fonctionne en ce moment :-)
Vous devez d'abord cliquer sur le bouton d'enregistrement rouge ou vous n'obtiendrez rien.
Je n'ai jamais remarqué le WS
précédent mais il filtre les connexions de socket Web.
Sélectionnez-le et vous pourrez voir les cadres qui vous montreront des messages d'erreur, etc.
Si vous ne disposez pas d'une page qui accède à la prise Web, vous pouvez ouvrir la console Chrome et saisir votre JavaScript dans:
var webSocket = new WebSocket('ws://address:port');
webSocket.onmessage = function(data) { console.log(data); }
Cela ouvrira le socket Web afin que vous puissiez le voir dans l'onglet réseau et dans la console.
Les autres réponses couvrent le scénario le plus courant: regardez le contenu des frames (Developer Tools -> onglet Network -> clic droit sur la connexion websocket -> frames).
Si vous voulez en savoir plus, comme les sockets actuellement ouvertes / inactives ou pouvoir les fermer, vous trouverez cette URL utile
chrome://net-internals/#sockets
Vous avez 3 options: Chrome (via les outils de développement -> onglet Réseau), Wireshark et Fiddler (via l'onglet Journal), mais ils sont tous très basiques. Si vous avez un volume de trafic très élevé ou si chaque trame est très importante, il devient très difficile de les utiliser pour le débogage.
Vous pouvez cependant utiliser Fiddler avec FiddlerScript pour inspecter le trafic WebSocket de la même manière que vous inspectez le trafic HTTP. Peu d'avantages de cette solution sont que vous pouvez tirer parti de nombreuses autres fonctionnalités de Fiddler, telles que plusieurs inspecteurs (HexView, JSON, SyntaxView), comparer des paquets et rechercher des paquets, etc.
Veuillez vous référer à mon article récemment écrit sur CodeProject, qui vous montre comment déboguer / inspecter le trafic WebSocket avec Fiddler (avec FiddlerScript). http://www.codeproject.com/Articles/718660/Debug-Inspect-WebSocket-traffic-with-Fiddler
Je ne fais que publier cela car Chrome change beaucoup, et aucune des réponses n'était assez à jour.
Réponse courte pour Chrome version 29 et plus:
J'ai utilisé l'extension Chrome appelée Simple WebSocket Client v0.1.3 qui est publiée par l'utilisateur hakobera. Il est très simple dans son utilisation où il permet d'ouvrir des websockets sur une URL donnée, d'envoyer des messages et de fermer la connexion socket. C'est très minimaliste.