Débogage de WebSocket dans Google Chrome

Les outils de développement Chrome ont désormais la possibilité de répertorier les frameworks WebSocket et d’inspecter les données si les frameworks ne sont pas binarys.

Processus:

1. Lancer les outils Chrome Developer
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 Frames . Les frameworks binarys apparaissent avec une longueur et un horodatage et indiquent s’ils sont masqués. Les blocs de texte afficheront également le contenu de la charge utile.

Si votre connexion WebSocket utilise des trames binarys, vous voudrez probablement utiliser Wireshark pour déboguer la connexion. Wireshark 1.8.0 a ajouté le support de dissecteur et de filtrage pour WebSockets. Une alternative peut être trouvée dans cette autre réponse .

Chrome Canary et Chromium disposent désormais de la fonctionnalité d’inspection des frameworks de messages WebSocket. Voici les étapes pour le tester rapidement:

1. Accédez à la démonstration 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 le handshake WebSocket.
5. Cliquez sur le bouton Envoyer dans la démo Echo.
6. CET ÉTAPE EST IMPORTANT : Pour voir les frameworks 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 , comprend également une annexe dédiée couvrant les différents outils d’inspection, y compris les outils de développement Chrome, les composants internes Chrome et Wire Shark.

Ils semblent changer continuellement les choses dans Chrome, mais voici ce qui fonctionne maintenant 🙂

• Vous devez d’abord cliquer sur le bouton d’enregistrement rouge ou vous n’obtiendrez rien.

• Je n’ai jamais remarqué le WS auparavant mais il filtre les connexions de socket Web.

• Sélectionnez-le et vous pourrez voir les images qui afficheront des messages d’erreur, etc.

Les autres réponses couvrent le scénario le plus courant: regardez le contenu des images (Outils de développement -> onglet Réseau -> Cliquez avec le bouton droit sur la connexion WebSocket -> images).

Si vous voulez en savoir plus, comme quelles sockets sont actuellement ouvertes / inactives ou pouvoir les fermer, vous trouverez cette URL utile

 chrome://net-internals/#sockets 

Si vous ne possédez pas de page qui accède au WebSocket, vous pouvez ouvrir la console Chrome et taper votre code JavaScript dans:

 var webSocket = new WebSocket('ws://address:port'); webSocket.onmessage = function(data) { console.log(data); } 

Cela ouvrira le socket Web pour que vous puissiez le voir dans l’onglet Réseau et dans la console.

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 simples. Si vous avez un volume de trafic très élevé ou si chaque image est très volumineuse, il devient très difficile de les utiliser pour le débogage.

Vous pouvez toutefois utiliser Fiddler avec FiddlerScript pour inspecter le trafic WebSocket de la même manière que vous envisagez 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 trouver 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

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

Réponse courte pour la version 29 de Chrome:

1. Ouvrez le débogueur, allez dans l’onglet “Réseau”
2. Charger la page avec websocket
3. Cliquez sur la requête websocket avec la réponse de mise à niveau du serveur
4. Sélectionnez l’onglet “Cadres” pour voir les frameworks websocket
5. Cliquez à nouveau sur la requête websocket pour actualiser les frameworks

J’ai utilisé l’extension Chrome appelée Simple WebSocket Client v0.1.3 publiée par l’utilisateur hakobera. Son utilisation est très simple, car elle 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.

Je ne fais que poster ceci car Chrome change beaucoup, et aucune des réponses n’était assez récente.

1. Ouvrir les outils de développement
2. RAFRAICHIR VOTRE PAGE (pour que la connexion WS soit capturée par l’onglet réseau)
3. Cliquez sur votre demande
4. Cliquez sur le sous-onglet “Frames”
5. Vous devriez voir quelque chose comme ça: