Débogage de WebSocket dans Google Chrome

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.

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:

1. Lancer les outils de développement Chrome
2. Chargez votre page et lancez les connexions WebSocket
3. Cliquez sur l' onglet Réseau .
4. Sélectionnez la connexion WebSocket dans la liste de gauche (elle aura le statut "101 Switching Protocols").
5. Cliquez sur le sous-onglet Messages . Les trames binaires s'afficheront avec une longueur et un horodatage et indiqueront si elles sont masquées. Les cadres de texte afficheront également le contenu de la charge utile.

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:

1. Accédez à la démo WebSocket Echo , hébergée sur le site websocket.org .
2. Activez les outils de développement Chrome.
3. Cliquez sur Réseau et pour filtrer le trafic affiché par les outils de développement, cliquez sur WebSockets .
4. Dans la démo Echo, cliquez sur Connecter . Dans l'onglet En-têtes de Google Dev Tool, vous pouvez inspecter la prise de contact WebSocket.
5. Cliquez sur le bouton Envoyer dans la démo Echo.
6. CETTE ÉTAPE EST IMPORTANTE : pour afficher les cadres WebSocket dans les outils de développement Chrome, sous Nom / Chemin, cliquez sur l'entrée echo.websocket.org, représentant votre connexion WebSocket. Cela actualise le panneau principal à droite et fait apparaître l'onglet Cadres WebSocket avec le contenu du message WebSocket réel.

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 WSpré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.

1. Outils de développement ouverts
2. RAFRAÎCHISSEZ VOTRE PAGE (pour que la connexion WS soit capturée par l'onglet réseau)
3. Cliquez votre demande
4. Cliquez sur le sous-onglet "Cadres"
5. Vous devriez voir quelque chose comme ça:

Réponse courte pour Chrome version 29 et plus:

1. Ouvrez le débogueur, allez dans l'onglet "Réseau"
2. Charger la page avec websocket
3. Cliquez sur la demande websocket avec la réponse de mise à niveau du serveur
4. Sélectionnez l'onglet "Cadres" pour voir les cadres websocket
5. Cliquez à nouveau sur la demande Websocket pour actualiser les cadres

Les outils de développement Chrome permettent de voir la demande de prise de contact qui reste en attente pendant la connexion ouverte, mais vous ne pouvez pas voir le trafic à ma connaissance. Cependant vous pouvez le flairer par exemple.

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.

Quant à un outil que j'ai commencé à utiliser, je suggère firecamp C'est comme Postman, mais il prend également en charge websockets et socket.io.