web-dev-qa-db-fra.com

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? Pour des raisons de débogage, j'aimerais voir les requêtes/réponses du client et du serveur.

google-chromewebsocket
188
mellowsoon

Les outils de développement de Google Chrome permettent désormais de répertorier les images WebSocket et d'inspecter les données si les images ne sont pas binaires.

Processus:

  1. Lancer Chrome Outils de développement
  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 (le statut "101 protocoles de commutation" sera activé).
  5. Cliquez sur le sous-onglet Frames . Les cadres binaires apparaîtront avec une longueur et un horodatage et indiqueront s'ils sont masqués. Les cadres de texte indiqueront également le contenu de la charge utile.

Si votre connexion WebSocket utilise des cadres binaires, vous voudrez probablement quand même utiliser Wireshark pour déboguer la connexion. Wireshark 1.8. ajout du dissecteur et du filtrage pour WebSockets. Une alternative peut être trouvée dans ceci autre réponse .

236
kanaka

Chrome Canary et Chromium disposent désormais de la fonction d'inspection du bloc de messages WebSocket. Voici les étapes pour le tester rapidement:

  1. Accédez à la démonstration de WebSocket Echo , hébergée sur le site websocket.org .
  2. Activez les Chrome Outils de développement.
  3. Cliquez sur Réseau et pour filtrer le trafic affiché par les outils de développement, cliquez sur WebSockets .
  4. Dans la démonstration Echo, cliquez sur Connect . Dans l'onglet En-têtes de Google Dev Tool, vous pouvez inspecter la négociation WebSocket.
  5. Cliquez sur le bouton Envoyer dans la démo Echo.
  6. CETTE ÉTAPE IS IMPORTANT : Pour afficher les cadres WebSocket dans les Chrome Outils de développement, sous Nom/Chemin , cliquez sur l’entrée echo.websocket.org, qui représente votre connexion WebSocket. Cela actualise le panneau principal à droite et permet à l'onglet Cadres WebSocket de s'afficher avec le contenu réel du message WebSocket.

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 aussi posté le étapes avec captures d'écran et vidéo .

Mon livre récemment publié, Guide définitif de HTML5 WebSocket , comporte également une annexe dédiée aux différents outils de contrôle, notamment ChromeDev Tools, Chromenet- les internes, et le requin de fil.

69
Peter Moskovits

Ils semblent changer continuellement de contenu dans Chrome, mais voici ce qui fonctionne pour le moment :-)

  • D'abord, vous devez cliquer sur le bouton rouge d'enregistrement ou vous ne recevrez rien.

  • Je n'avais jamais remarqué le WS auparavant, mais il filtre les connexions de socket Web.

  • Sélectionnez-le et vous pouvez voir les cadres qui vont vous montrer des messages d'erreur, etc.

enter image description here

44
Simon_Weaver

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

Si vous voulez en savoir plus, comme par exemple, quels sockets sont ouverts/inactifs ou si vous pouvez les fermer, vous trouverez cette adresse utile.

chrome://net-internals/#sockets
36
Riccardo Galli

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 le socket Web afin que vous puissiez le voir dans l'onglet Réseau et dans la console.

35
Dylan

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 le volume de trafic est 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 est que vous pouvez exploiter de nombreuses autres fonctionnalités de Fiddler, telles que plusieurs inspecteurs (HexView, JSON, SyntaxView), comparer des paquets, rechercher des paquets, etc. Inspect WebSocket traffic

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

10
engineforce

Je ne fais que poster ceci car Chrome a beaucoup changé, et aucune des réponses n'était à jour.

  1. Outils de développement ouverts
  2. RAFRAICHIR 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 "Cadres"
  5. Vous devriez voir quelque chose comme ça:

enter image description here

4
iuliu.net

Réponse courte pour Chrome Version 29 et supérieure:

  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 cadres websocket
  5. Cliquez à nouveau sur la requête websocket pour actualiser les cadres.
4
Tires

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

3
yojimbo87

J'ai utilisé l'extension Chrome appelée Simple WebSocket Client v0.1. 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 de socket. C'est très minimaliste.

2
DPancs