40

I can use the Network tab in the Google Chrome Web Inspector to debug the network traffic (AJAX requests, etc.). I can check what data is transferred easily. But Websocket connections only show as 

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

and I can't see the transferred data. Is there any build in feature in Google Chrome to inspect the transferred data? Or do I need to use Wireshark?

PS: I'm using the latest stable version (16.0.912.75). If a newer version (beta/dev) has this features, it would be nice.

Fox32
  • 13,126
  • 9
  • 50
  • 71
  • 1
    Possible duplicate of [Debugging WebSocket in Google Chrome](http://stackoverflow.com/questions/5751495/debugging-websocket-in-google-chrome) – Ali Dehghani Jul 18 '16 at 20:44

3 Answers3

72

Chrome and Chromium now have WebSocket message frame inspection. Here are the steps to test it quickly:

  1. Navigate to the WebSocket Echo demo, hosted on the websocket.org site.
  2. Turn on the Chrome Developer Tools.
  3. Click Network, enable filter (3rd icon from the left on the top of Dev Tools) to filter the traffic shown by the Developer Tools, and click WebSockets.
  4. In the Echo demo, click Connect. On the Headers tab in Google Dev Tool you can inspect the WebSocket handshake.
  5. Click the Send button in the Echo demo.
  6. To see the WebSocket frames in Chrome Developer Tools, under Name, click the entry representing your WebSocket connection. This refreshes the main panel on the right and makes the WebSocket Frames tab show up with the actual WebSocket message content.

I also posted the steps with screen shots and video. enter image description here

Peter Moskovits
  • 4,236
  • 1
  • 20
  • 15
  • 2
    Be careful when posting copy and paste boilerplate/verbatim answers to multiple questions, these tend to be flagged as "spammy" by the community. If you're doing this then it usually means the questions are duplicates so flag them as such instead. – Kev May 10 '12 at 01:10
  • 5
    Thank you, Kev. BTW, does it apply to comments too... ;-) – Peter Moskovits May 10 '12 at 16:51
  • 1
    I think Fiddler is easier to use for debugging WebSocket. I have recently written an article on CodeProject, which show you how to debug/inspect WebSocket traffic with Fiddler. http://www.codeproject.com/Articles/718660/Debug-Inspect-WebSocket-traffic-with-Fiddler – engineforce Jan 31 '14 at 21:24
  • 6
    The chrome dev tools don't have a "Websocket Frames" tab here anymore :/ There is a "Frames" tab but it is perpetually empty no matter how many websocket messages are sent, or how many times I click on the Name/Path entry on the left. What am I doing wrong? – nzifnab Apr 17 '15 at 17:34
  • @nzifntab The WebSockets tab is reachable when enabling filtering, and its Frames tab contains messages. – Nicolas Jun 02 '15 at 15:44
  • 1
    @nzifnab It is not empty. you might move [splitter](http://imgur.com/dGP4RrB) in frames tab to see list of frames : – mjalil Jan 15 '17 at 08:58
  • 1
    In Chrome 56 there is a "WS" tab in network filter - that is "WebSockets" – Drakes Mar 13 '17 at 20:57
  • 1
    If your view also only shows the text `Select frame to browse its content.`, it is because you can't see the table of frames above. Try to take the handle for resizing the frame-detail-window which might be right under the headline of the table. This often happens if you switch from a big screen resolution to a smaller one :) – SimonSimCity May 29 '17 at 06:41
  • 1
    websocket.org apparently no longer provides the echo demo, so this answer needs to be updated – Paul Banwell Dec 03 '21 at 23:53
8

After some more research I found a duplicate question here: Debugging WebSocket in Google Chrome

Chrome does't support viewing the traffic in the current stable version. I need to use Wireshark.

Community
  • 1
  • 1
Fox32
  • 13,126
  • 9
  • 50
  • 71
0

Another Idea, for simple web socket testing and lightweight, use Chrome plugin "Simple Web-socket. I wanted to check only if the connection can be establish or not. Following Chrome plugin "Simple Web-socket (link : https://chrome.google.com/webstore/detail/simple-websocket-client/pfdhoblngboilpfeibdedpjgfnlcodoo?hl=en)" work like charm. See image.

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

Shantu
  • 145
  • 11