37

I've entered echo.websocket.org as it was suggested, opened Network tab and WS filter in Chrome Developer Tools, but I do not see any frames. I see connection entries, but Frames tab always stays empty. Is there anything special I should do to see the frames?

Screenshot: enter image description here

jayarjo
  • 15,268
  • 23
  • 90
  • 134

5 Answers5

78

Click Network, WS, select the original HTTP connection and then click the Frames tab. Be aware that the content of this tab may be hidden by another pane, so you need to drag the bar down to see the WebSocket frames.

enter image description here

cassiomolin
  • 113,708
  • 29
  • 249
  • 319
  • 5
    That was my problem :-) Thanks a lot! – Paweł Sroka Sep 04 '16 at 16:01
  • Same here! Don't event know how that happened and it is not obvious at first. Thank-you – Thibs Jun 10 '17 at 12:24
  • Hi @[cassiomolin](https://stackoverflow.com/users/1426227/cassiomolin) and thanks for your answer! I was wondering what the arrows stand for, I can also see a black arrow next to one of the my WS messages – Chagai Friedlander Jun 29 '20 at 09:21
  • I wish there was a way to get this info out of here and into Excel. I want to analyze times & sizes. – Ryan Shillington Apr 23 '21 at 21:30
  • @RyanShillington Perhaps this may help: https://stackoverflow.com/q/29953531/1426227 And you may try a HAR analysers tool: https://toolbox.googleapps.com/apps/har_analyzer/ – cassiomolin Apr 23 '21 at 23:06
  • @cassiomolin Thanks! My client sent me the har file, so I can't easily reproduce it. The har_analyzer doesn't help at all, unfortunately. – Ryan Shillington Apr 24 '21 at 16:38
19

Did you send any data on the page? You need to try sending a message after clicking Connect:

Sockets

There is also a useful area in Chrome where you can view all your active sockets:

Sockets

You can access it at here: chrome://net-internals/#events&q=type:SOCKET%20is:active

Update:

After seeing your newly added screenshot, it looks like your Data table is squashed up and you need to drag it down to see the entries.

Gideon Pyzer
  • 20,674
  • 7
  • 56
  • 64
18

As of December 10, 2019, the process is slightly different to debug WebSockets with Chrome.

  1. Open Chrome Developer Tools.
  2. Click on the Network tab.
  3. Click on the filter WS (for WebSockets).
  4. Reload the page to make sure you see your connection in the Name column.
  5. Click on Messages.

Now you should see all your communications with your WebSockets, with 3 columns: Data, Length and Time.

Chrome DevTools WebSockets

Armel
  • 2,633
  • 6
  • 20
  • 33
  • Hi [Armel](https://stackoverflow.com/users/7810468/armel) and thanks for your answer! I was wondering what the arrows stand for, I can also see a black arrow next to one of the my WS messages – Chagai Friedlander Jun 29 '20 at 09:16
1

Another gotcha is that in the new Edge the Developer Tools menu option and the Network/WS display looks very similar to Chrome. I forgot I was using Edge and spent 20 minutes trying to find the JSON messages, which I don't think are available in Edge.

Andrew W. Phillips
  • 2,684
  • 1
  • 17
  • 22
0

There's another way you can have a problem here - if you are using livereload in your development flow.

This (apparently, for me at least) causes multiple instances of the socked to appear, all with empty messages.

enter image description here

enter image description here

It turns out that only the first one is the "real" one, and has messages:

enter image description here

Dharman
  • 26,923
  • 21
  • 73
  • 125
GreenAsJade
  • 14,055
  • 10
  • 60
  • 95