How to inspect WebSocket frames in Chrome properly?

Asked 24/5, 2016 at 12:7 Answered 23/12, 2021 at 2:3

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:

Catanddog answered 24/5, 2016 at 12:7 Comment(4)

Just tested here and I can see the frames properly. Could you provide a screenshot? – Sodamide 24/5, 2016 at 12:11

Updated with the screenshot. – Catanddog 24/5, 2016 at 12:52

I guess they should put some minimal height on that section. – Catanddog 24/5, 2016 at 13:0

Yeah, they should... – Sodamide 24/5, 2016 at 13:1

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.

Sword answered 10/12, 2019 at 18:50 Comment(3)

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 – Siamese 29/6, 2020 at 9:16

This is the correct answer, other replies are out of date. I am using Chrome 105.0.0.0 – Tabb 13/10, 2022 at 13:55

How does chrome websocket monitor filter message by keyword? – Broadloom 19/3, 2023 at 4:33

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.

Sodamide answered 24/5, 2016 at 12:54 Comment(7)

Same here! Don't event know how that happened and it is not obvious at first. Thank-you – Merri 10/6, 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 – Siamese 29/6, 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. – Squamous 23/4, 2021 at 21:30

@RyanShillington Perhaps this may help: https://mcmap.net/q/67131/-how-to-save-websocket-frames-in-chrome/1426227 And you may try a HAR analysers tool: toolbox.googleapps.com/apps/har_analyzer – Sodamide 23/4, 2021 at 23:6

@Sodamide Thanks! My client sent me the har file, so I can't easily reproduce it. The har_analyzer doesn't help at all, unfortunately. – Squamous 24/4, 2021 at 16:38

@ChagaiFriedlander the green upward arrows are for messages which are sent and red downward arrows for messages that are received. There is also a dropdown in the toolbar to filter the messages based on direction. – Battement 19/10, 2022 at 13:26

How does chrome websocket monitor filter message by keyword? – Broadloom 19/3, 2023 at 4:33

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.

Sword answered 10/12, 2019 at 18:50 Comment(3)

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 – Siamese 29/6, 2020 at 9:16

This is the correct answer, other replies are out of date. I am using Chrome 105.0.0.0 – Tabb 13/10, 2022 at 13:55

How does chrome websocket monitor filter message by keyword? – Broadloom 19/3, 2023 at 4:33

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.

Yukikoyukio answered 24/5, 2016 at 12:51 Comment(2)

I also had a squashed up data table. Thanks! :) – Maxson 11/9, 2016 at 21:38

Alas chrome://net-internals no longer exists in current versions of Chrome. – Junco 12/2, 2019 at 16:4

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.

Scheers answered 22/9, 2021 at 21:22 Comment(3)

Latest Edge is basically Chrome. – Catanddog 26/9, 2021 at 11:30

The Messages table in the Chromium Edge 103.0.1264.71 Developer Tools for a web socket may appear empty depending on the size of the tool's window, only showing a horizontal scroll bar and the "Select message to browse its content." window taking all the space. Pull the bottom of the scroll bar to see the messages. Google Chrome Canary 106.0.5202.2 shows at lease a one message. – Rowdy 26/7, 2022 at 19:9

How does chrome websocket monitor filter message by keyword? – Broadloom 19/3, 2023 at 4:34

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:

Rochdale answered 23/12, 2021 at 2:3 Comment(0)

Recommended topics

Hot tags