Chrome Web Inspecteur Web De Prise De Débogage

Je peux utiliser l'onglet Réseau dans la Web Google Chrome Inspecteur pour déboguer le trafic réseau (requêtes AJAX, etc.). Je peux vérifier que les données sont transférées facilement. Mais Websocket uniquement les connexions montrent que 

Request URL:ws://localhost/...
Request Method:GET
Status Code:101 Switching Protocols
...

et je ne peux pas voir les données transférées. Est-il construire dans la fonctionnalité de Google Chrome pour inspecter les données transférées? Ou dois-je utiliser Wireshark?

PS: j'utilise la dernière version stable (16.0.912.75). Si une nouvelle version (beta/dev) a ces caractéristiques, ce serait sympa.

InformationsquelleAutor Fox32 | 2012-01-21
  1. 67

    Chrome et Chrome ont désormais message WebSocket cadre de l'inspection. Voici les étapes pour tester rapidement:

    1. Accédez à la WebSocket Echo démo, hébergé sur le websocket.org site.
    2. Tour sur les Outils de développement Chrome.
    3. Cliquez sur Réseau, permettre filtre (3ème icône en partant de la gauche sur le dessus des Outils de Dev) pour filtrer le trafic montré par les Outils de développement, et cliquez sur WebSockets.
    4. Dans l'Écho de démonstration, cliquez sur Connecter. Sur l'onglet en-Têtes dans Google Dev Outil, vous pouvez consulter le protocole de transfert WebSocket.
    5. Cliquez sur le Envoyer bouton dans l'Écho de démonstration.
    6. Pour voir les WebSocket images en Chrome Developer Tools, sous Nom, cliquez sur l'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.

    J'ai aussi posté le étapes avec des captures d'écran et vidéo.
    Chrome Web Inspecteur Web De Prise De Débogage

    • Être prudent lors de l'affichage de copier et coller du texte standard/verbatim des réponses à de multiples questions, celles-ci ont tendance à être marqué comme "spam" par la communauté. Si vous faites cela, alors cela signifie généralement les questions sont des doublons, donc le drapeau comme tel à la place.
    • Merci Kev. BTW, il ne s'applique à des commentaires aussi... 😉
    • Je pense que Fiddler est plus facile à utiliser pour le débogage WebSocket. J'ai récemment écrit un article sur CodeProject, qui vous montrera comment déboguer/inspecter WebSocket de la circulation avec un violon. codeproject.com/Articles/718660/...
    • Le chrome dev tools n'avez pas de "Websocket Cadres" de l'onglet ici plus :/ Il y a un "Cadres" de l'onglet, mais il est perpétuellement vide, peu importe combien de websocket les messages sont envoyés, combien de fois je clique sur le Chemin/Nom de l'entrée sur la gauche. Ce que je fais mal?
    • Les WebSockets onglet est accessible lors de l'activation du filtrage, et de ses Cadres onglet contient les messages.
    • Il n'est pas vide. vous pouvez déplacer des splitter dans l'onglet cadres pour voir la liste des images :
    • Dans Chrome 56 il y a un "WS" dans l'onglet filtre de réseau - qui est "WebSockets"
    • Si votre point de vue, ne montre que le texte Select frame to browse its content., c'est parce que vous ne pouvez pas voir le tableau des images ci-dessus. Essayez de prendre la poignée de redimensionnement de l'image-détail-fenêtre qui peut être de droite, sous le titre de la table. C'est souvent le cas si vous passez d'une grande résolution d'écran pour un plus petit 🙂

    InformationsquelleAutor Peter Moskovits
  2. 8

    Après quelques recherches, j'ai trouvé un double question ici: Débogage WebSocket dans Google Chrome

    Chrome ne prend pas en charge l'affichage, la circulation dans la version stable actuelle. J'ai besoin d'utiliser Wireshark.

    InformationsquelleAutor Fox32
  3. 0

    Une autre Idée, pour la simple web de la prise d'essai et léger, l'utilisation de Chrome plugin "Simple Web-socket. Je voulais seulement vérifier si la connexion ne peut être établie ou non. Suivant Chrome plugin "Simple Web-socket (lien : https://chrome.google.com/webstore/detail/simple-websocket-client/pfdhoblngboilpfeibdedpjgfnlcodoo?hl=en)" fonctionnent comme un charme. Voir l'image.

    https://lh3.googleusercontent.com/bEHoKg3ijfjaE8-RWTONDBZolc3tP2mLbyWanolCfLmpTHUyYPMSD5I4hKBfi81D2hVpVH_BfQ=w640-h400-e365

    InformationsquelleAutor Shantu