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?
-
Just tested here and I can see the frames properly. Could you provide a screenshot?– cassiomolinMay 24, 2016 at 12:11
-
Updated with the screenshot.– jayarjoMay 24, 2016 at 12:52
-
1I guess they should put some minimal height on that section.– jayarjoMay 24, 2016 at 13:00
-
Yeah, they should...– cassiomolinMay 24, 2016 at 13:01
5 Answers
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.
-
5
-
Same here! Don't event know how that happened and it is not obvious at first. Thank-you– ThibsJun 10, 2017 at 12:24
-
Hi @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 Jun 29, 2020 at 9:21
-
I wish there was a way to get this info out of here and into Excel. I want to analyze times & sizes. Apr 23, 2021 at 21:30
-
@RyanShillington Perhaps this may help: stackoverflow.com/q/29953531/1426227 And you may try a HAR analysers tool: toolbox.googleapps.com/apps/har_analyzer Apr 23, 2021 at 23:06
Did you send any data on the page? You need to try sending a message after clicking Connect
:
There is also a useful area in Chrome where you can view all your active 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.
-
5
-
Chrome's net-internals tool is AMAZING! Thank you for showing me this.– likebikeMar 26, 2018 at 19:31
-
Alas chrome://net-internals no longer exists in current versions of Chrome. Feb 12, 2019 at 16:04
As of December 10, 2019, the process is slightly different to debug WebSockets with Chrome.
- Open Chrome Developer Tools.
- Click on the Network tab.
- Click on the filter WS (for WebSockets).
- Reload the page to make sure you see your connection in the Name column.
- Click on Messages.
Now you should see all your communications with your WebSockets, with 3 columns: Data, Length and Time.
-
Hi 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 Jun 29, 2020 at 9:16
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.
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.
It turns out that only the first one is the "real" one, and has messages: