Débogage de WebSocket dans Google Chrome


213

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:


250

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 .


1
Savez-vous comment utiliser Wireshark pour ce faire? Je ne l'ai jamais vraiment utilisé, et il semble montrer tout le trafic réseau et montre les paquets bruts.
mellowsoon

2
Vous pouvez limiter la capture à un seul port à l'aide de filtres de capture . Alternativement, après avoir obtenu une capture, vous devriez pouvoir cliquer avec le bouton droit sur une image capturée faisant partie de la session et sélectionner l'option pour afficher uniquement cette session.
kanaka

1
Malheureusement, l'utilisation de WireShark en utilisant localhost sur Windows nécessite de sauter à travers des cerceaux pour le faire fonctionner. Voir wiki.wireshark.org/CaptureSetup/Loopback
Greg Woods

2
J'ai récemment écrit un article sur CodeProject, qui vous montre comment déboguer / inspecter le trafic WebSocket avec Fiddler. codeproject.com/Articles/718660/...
engineforce

1
@NiCkNewman oui, c'est un champ de 7 bits indiquant la longueur en octets de la charge utile. Cependant, si la valeur du champ est 126 ou 127, alors les 16 ou 64 bits suivants sont respectivement la longueur de la charge utile en octets. Voir la description du champ de longueur dans la spécification: tools.ietf.org/html/rfc6455#section-5.2 (c'est assez facile à grogner). C'est un peu étrange, mais cela rend les messages courts très efficaces (juste un en-tête de 2 octets).
kanaka

72

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.


3
Soyez prudent lorsque vous publiez des réponses copier-coller passe-partout / verbatim à plusieurs questions, celles-ci ont tendance à être signalées comme "spam" par la communauté. Si vous faites cela, cela signifie généralement que les questions sont en double, signalez-les plutôt comme telles.
Kev

2
Merci pour l'étape 6! J'avais entendu parler du filtre WebSockets dans l'onglet Réseau, mais j'étais frustré qu'il ne semble avoir capté que mes premiers messages. Savez-vous s'il existe un moyen de lui faire connaître une connexion Websocket qui était ouverte avant d'ouvrir l'onglet?
Bryan Head

Bryan - Je ne pense pas que vous puissiez le faire aujourd'hui.
Peter Moskovits

@PeterMoskovits Connaissez-vous, par hasard, un moyen d'inspecter le contenu des images binaires dans Chrome? Actuellement, je ne vois que sa longueur!
Howie

@Howie Vous ne pouvez pas le faire avec Chrome. Vous pouvez utiliser WireShark pour cela. Notre nouveau livre, The Definitive Guide to HTML5 WebSocket, vous donne également une introduction rapide à WireShark. amazon.com/Definitive-Guide-HTML5-WebSocket-Apress/dp/…
Peter Moskovits

52

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.

entrez la description de l'image ici


Je n'aime pas la façon dont ce JSON y est laid. Aucun formatage fondamentalement.
ses

1
@ses c'est le protocole signalR. Prenez-le avec Microsoft Simon
Simon_Weaver

1
heureux de voir au moins que cette réponse est toujours bonne quatre ans plus tard: p
Stu Thompson

1
@StuThompson yes - mes votes positifs continuent de s'accumuler :-)
Simon_Weaver

41

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.


Merci! Aussi: La page que vous ouvrez doit être de la même origine que votre websocket. Si vous essayez d'ouvrir les outils de développement Chrome sur une origine différente (ou même la nouvelle page à onglet), puis vous connectez à votre websocket, vous obtiendrez une erreur d'autorisation.
Dan Esparza

Y'a t'il un moyen d'arranger cela?
not2qubit

37

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

10

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.Inspectez le trafic WebSocket

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


5

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:

entrez la description de l'image ici


4

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

1
Il semble que cela fonctionne, sauf qu'il est ennuyeux qu'il cesse de fonctionner si vous vous déconnectez et vous reconnectez à l'url du Websocket (par exemple sur websocket.org/echo.html ), auquel cas vous devez actualiser la page! :(
matanster

3

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.


2

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.


2

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.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.