WebSocket débogage dans Google Chrome

Question

Existe-t-il un moyen ou une extension, ce qui me permet de regarder le « trafic » en passant par un WebSocket ? Pour des fins de débogage, je voudrais voir les client et le serveur de requêtes/réponses.

Answer 1

Malheureusement, le Chrome réseau outil de débogage traite toujours les WebSockets de connexion comme les requêtes HTTP de sorte que vous ne voyez que les WebSockets poignée de main cadres, ce qui est d'une utilisation limitée avec les WebSockets de débogage.

Je recommande wireshark pour le fait de creuser dans ce qui se passe sur le fil et l'inspection de la charge utile.

Cette question est aussi répondu ici

Mises à jour:

Outils de développement Chrome ont maintenant la possibilité de lister les WebSocket cadres et également inspecter les données si les cadres ne sont pas binaires.

Processus:

1. Lancer Chrome Developer tools
2. Chargement de votre page et de lancer le WebSocket connexions
3. Cliquez sur l' Onglet Réseau.
4. Sélectionnez la connexion WebSocket à partir de la liste sur la gauche (il aura le statut de "101 changement de Protocoles".
5. Cliquez sur les Images sous-onglet. Binaire images s'affiche avec une longueur et d'horodatage et d'indiquer s'ils sont masqués. Les cadres de texte montrera également inclure le contenu de la charge utile.

Si votre connexion WebSocket utilise les binaires des cadres, alors vous aurez probablement souhaitez utiliser Wireshark pour déboguer la connexion. Wireshark 1.8.0 ajouté dissecteur de filtrage et de soutien pour les WebSockets.

Answer 2

Google Chrome Canary de Chrome et maintenant ont WebSocket cadre des messages, fonction d'inspection. Voici les étapes pour tester rapidement:

1. Accédez à la WebSocket Écho de démonstration, hébergé sur le websocket.org site.
2. Activer les Outils de développement Chrome.
3. Cliquez sur Réseau, et à filtrer le trafic montré par les Outils de Dev, cliquez sur les WebSockets.
4. Dans l'Écho de démonstration, cliquez sur se Connecter. Sur l'onglet en-Têtes dans Google Dev Outil, vous pouvez consulter le WebSocket poignée de main.
5. Cliquez sur le bouton Envoyer dans l'Echo de démonstration.
6. CETTE ÉTAPE EST IMPORTANTE: Pour voir les WebSocket cadres dans les Outils de développement Chrome, sous le Nom/Chemin d'accès, cliquez sur le echo.websocket.org entrée, représentant votre connexion WebSocket. Cette actualise le panneau principal sur la droite et fait de la WebSocket onglet Cadres montrer la réelle WebSocket contenu du message.

Remarque: Chaque fois que vous envoyez ou recevez de nouveaux messages, vous devez rafraîchir l'écran principal en cliquant sur le echo.websocket.org l'entrée sur la 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, dispose également d'une annexe spéciale couvrant les différents outils d'inspection, y compris google Chrome Dev Tools, google Chrome net-internals, et le Fil de Requin.

Answer 3

Si vous n’avez pas une page qui accède à la websocket, vous pouvez ouvrir la console de Chrome et tapez votre JavaScript dans :

Cela va ouvrir le socket web afin que vous pouvez voir dans l’onglet réseau et dans la console.

Answer 4

Les autres réponses couvrent le scénario le plus courant : regarder le contenu des trames (Developer Tools -> réseau -> droite cliquez sur la connexion de websocket -> cadres).

Si vous voulez savoir quelques informations pratiques, comme les douilles sont actuellement ouvertes/idle ou être en mesure de les fermer vous trouverez cette url utiles

Answer 5

Outils de développement de chrome 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 autant que je sache. Cependant vous pouvez renifler par exemple.