How to access websocket frames

2,096 views
Skip to first unread message

Riv

unread,
Sep 4, 2018, 7:54:45 AM9/4/18
to Chrome DevTools
Websocket view in network tab only displays text frames - all binary frames are shown as "Binary Frame (Opcode 2)", with no additional information. Is there any reason for this limitation?

Anyhow, to debug my app, I need to see the frame contents, and ideally parse it into a human readable structure. The only way I've been able to do this so far is to open devtools for the devtools window, and place a breakpoint in the line where it adds frame entries (where, conveniently enough, all the binary data is easily accessible).

However, it is quite a hassle, and I'd also like to apply complex parsing logic to the data. Ideally this would be done in the form of an extension, but all I can find in devtools extension docs is how to get requests in HAR format (which is just a plain JSON object, pretty useless).

Looking at devtools frontend code, it's getting frames via `webSocketFrameSent`, which isn't referenced anywhere else in the code. Where's it getting called from, and how can I get access to it in an extension?

Riv

unread,
Sep 4, 2018, 5:55:19 PM9/4/18
to Chrome DevTools
Okay, I managed to make an extension using debugging API. It's currently tuned to my specific application, but I can publish a generic version with just the hex viewer if anyone's interested.

ChessMess

unread,
Sep 4, 2018, 6:15:16 PM9/4/18
to google-chrome-...@googlegroups.com
Sounds great Riv! Will you open source the extension so we can contribute to it?


On Tue, Sep 4, 2018 at 5:55 PM Riv <d07...@gmail.com> wrote:
Okay, I managed to make an extension using debugging API. It's currently tuned to my specific application, but I can publish a generic version with just the hex viewer if anyone's interested.

--
You received this message because you are subscribed to the Google Groups "Chrome DevTools" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-chrome-develo...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-chrome-developer-tools/7f6f0505-def0-47b1-aa2c-02efe248b921%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Riv

unread,
Sep 6, 2018, 11:12:28 AM9/6/18
to Chrome DevTools
Done.

Currently does not support iframes (there seems to be an issue with debugger `Targets` module privileges atm, preventing us from attaching to related targets).
HTML based HexViewer has significant performance issues on large frames (10K+), so a canvas based replacement might be a good idea.


(On a side note, why does pressing the Post button warn me that unsubscribe e-mail was found in the message?)


On Wednesday, September 5, 2018 at 1:15:16 AM UTC+3, Chris Koerner wrote:
Sounds great Riv! Will you open source the extension so we can contribute to it?


On Tue, Sep 4, 2018 at 5:55 PM Riv <d07...@gmail.com> wrote:
Okay, I managed to make an extension using debugging API. It's currently tuned to my specific application, but I can publish a generic version with just the hex viewer if anyone's interested.

--
You received this message because you are subscribed to the Google Groups "Chrome DevTools" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-chrome-developer-tools+unsub...@googlegroups.com.

ChessMess

unread,
Sep 6, 2018, 11:22:54 AM9/6/18
to google-chrome-...@googlegroups.com
Awesome but for some reason when I select a frame it doesn't actually bring up anything in the window.

Riv

unread,
Sep 6, 2018, 12:47:03 PM9/6/18
to Chrome DevTools
That's odd, you see the list of frames, but clicking them doesn't show anything in the right side? Are there any errors in console?

ChessMess

unread,
Sep 6, 2018, 1:19:56 PM9/6/18
to google-chrome-...@googlegroups.com
Screen Shot 2018-09-06 at 1.19.06 PM.png

This is what I see

--
You received this message because you are subscribed to the Google Groups "Chrome DevTools" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-chrome-develo...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-chrome-developer-tools/10f721fa-9348-4fc9-8ab3-e2fba1779dae%40googlegroups.com.

Riv

unread,
Sep 7, 2018, 7:14:57 AM9/7/18
to Chrome DevTools
Oh, it should have its own list of frames. Did you open it on the right tab, and is the app using iframes?

Riv

unread,
Sep 7, 2018, 7:16:39 AM9/7/18
to Chrome DevTools

Here's how it looks for me

wsviewer.png

Sis vs bro

unread,
Feb 8, 2019, 5:22:36 AM2/8/19
to Chrome DevTools
This is such an awesome tool is thhere anyway we can make it backup this frames info in a txt file to a specified folder on my PC? that would be incredible.
Reply all
Reply to author
Forward
0 new messages