web-dev-qa-db-fra.com

Comment inspectez-vous le trafic websocket avec Chrome Outils de développement?)

J'essaie d'inspecter le trafic websocket en utilisant Chrome Outils de développement. D'après mes recherches, il semble que vous devriez pouvoir le voir en utilisant l'onglet Réseau - et il en a même un filtre pour 'ws'.

Cependant, j’ai inspecté des sites qui, je le sais, utilisent des websockets et ne trouvent aucun moyen d’inspecter les messages échangés. Utilisation de Chrome v56, a également essayé Safari sans succès ...

Est-ce que quelqu'un sait comment cela peut être réalisé?

40
Joel Duckworth

Vous devez recharger la page avec l'onglet réseau ouvert et filtrer par type 'ws'. Cela vous montrera une connexion établie avec un websocket. Vous pouvez ensuite cliquer sur la connexion pour afficher le trafic envoyé dans les deux sens sur le serveur.

enter image description here

https://developers.google.com/web/tools/chrome-devtools/network-performance/reference#frames

68
Joel Duckworth

Informations sur ce trafic est imbriqué plus en profondeur dans l'onglet Résea. En utilisant Chrome 58+, vous verrez une entrée sur la connexion au websocket, dans la liste principale de l’onglet Réseau.

Cela change un protocole (statut HTTP 101),

alors

toutes les demandes suivantes possibles étant du trafic websocket, seront visibles dans l'onglet Cadres de l'entrée ci-dessus.

Bien sûr, vous pouvez avoir plus de connexions ouvertes à différents websockets, agrégées dans l'onglet "Réseau" principal par type de websocket.

7
Sławomir Lenart