How to inspect WebSocket frames in Chrome properly?
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.
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.
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.
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.
