Déboguer WebSocket dans Google Chrome

Chrome Canary et Chrome ont maintenant WebSocket message frame inspection fonctionnalité. Voici les étapes pour tester rapidement:

1. Accédez à la WebSocket Echo démo , hébergé sur le websocket.org du site.
2. activez les outils de développement Chrome.
3. cliquez sur Network , et pour filtrer le trafic affiché par les outils Dev, cliquez sur WebSockets .
4. dans la démo Echo, cliquez sur Connect . Sur L'onglet Headers dans Google Dev Tool vous pouvez inspecter la poignée de main WebSocket.
5. cliquez sur le bouton Envoyer dans la démo Echo.
6. cette étape est importante : pour voir les cadres WebSocket dans les outils de développement Chrome, sous Nom/chemin, cliquez sur le echo.websocket.org entrée, représentant votre connexion WebSocket. Ce rafraîchit le panneau principal à droite et fait apparaître L'onglet WebSocket Frames avec le contenu du message WebSocket.

Note : chaque fois que vous envoyez ou recevez de nouveaux messages, vous devez rafraîchir le panneau principal en cliquant sur le echo.websocket.org entrée à gauche.

j'ai aussi posté les étapes avec des captures d'écran et vidéo .

Mon livre récemment publié, The Definitive Guide to HTML5 WebSocket , a également une annexe dédiée couvrant les différents outils d'inspection, y compris les outils de Dev Chrome, Chrome net-internals, et Wire Shark.

ils semblent sans cesse changer des choses dans le Chrome, mais voici ce qui fonctionne en ce moment :-)

• tout d'abord, vous devez cliquer sur le bouton Enregistrement rouge ou vous n'obtiendrez rien.

• Je n'avais jamais remarqué le WS mais il filtre la prise web connexion.

• sélectionnez-le et vous pourrez voir les cadres qui vous indiqueront les messages d'erreur, etc.

les autres réponses couvrent le scénario le plus courant: regardez le contenu des cadres (outils de développement -> onglet Réseau -> clic droit sur la connexion websocket -> cadres).

si vous voulez savoir plus d'informations, comme quelles sockets sont actuellement ouverts / inactifs ou être en mesure de les fermer, vous trouverez cette url utile""

chrome://net-internals/#sockets

si vous n'avez pas de page qui accède au websocket, vous pouvez ouvrir la console Chrome et taper votre JavaScript dans:

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

cela ouvrira la socket web de sorte que vous pouvez le voir dans l'onglet Réseau et dans la console.

vous avez 3 options: Chrome (via Developer Tools -> Network tab), Wireshark, et Fiddler (via Log tab), cependant toutes très basiques. Si vous avez un volume de trafic très élevé ou si chaque cadre est très grand, 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 saisissez le trafic HTTP. Quelques avantages de cette solution sont que vous pouvez exploiter de nombreuses autres fonctionnalités dans Fiddler, comme plusieurs inspecteurs (HexView, JSON, SyntaxView), comparez les paquets, et trouvez les 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

Chrome developer tools permet de voir la demande de poignée de main qui reste en attente pendant la connexion ouverte, mais vous ne pouvez pas voir le trafic pour autant que je sache. Cependant, vous pouvez renifler par exemple.

courte réponse pour la version 29 de Chrome et plus:

1. Ouvrir le débogueur, allez à 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 "Frames" pour voir les frames websocket
5. cliquez à nouveau sur la demande websocket pour rafraîchir les cadres

je viens de poster ceci puisque Chrome change beaucoup, et aucune des réponses n'était tout à fait à jour.

1. Ouvrir les outils de dev
2. rafraîchissez votre PAGE (afin 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 ceci:

j'ai utilisé Chrome extension appelé simple WebSocket Client V0.1.3 qui est publié 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.