Ever since I upgrade from Chrome 58 => 59 on Mac OS El Capitan, when I use Dev Tools Network inspector to view WebSocket frames, the frames no longer are visible. We build an app that makes heavy use of WS, so I rely heavily on this capability. I thought perhaps it was something maybe we changed in our app -- encoding or protocol that maybe causes it to not show up, so I tried this simple test here: https://websocket.org/echo.html Open DevTools Go to https://websocket.org/echo.html Go to Network tab, filter on WS, go to Frames tab Click Connect in echo app followed by Send Message This results in no frames showing up in DevTools, but the socket messages work fine with the app. I've asked a few other people and some of them do not have this problem. I'm wondering if I either have an extension that is causing this issue, or if I have some other arcane setting that might be blocking the frames from displaying?

The bottom "frame details panel" sometimes hides the "frames list" panel, unless you hover your mouse under a column header and drag down. Update 1: As Sylvain Girard pointed out, this is Chromium issue 895548 Update 4: It's been fixed in Chrome 72, available in stable channel

google-chromewebsocketgoogle-chrome-devtools

zenocon

Reputation: 1657

Chrome 59+ websocket frames no longer visible in DevTools

Ever since I upgrade from Chrome 58 => 59 on Mac OS El Capitan, when I use Dev Tools Network inspector to view WebSocket frames, the frames no longer are visible. We build an app that makes heavy use of WS, so I rely heavily on this capability.

I thought perhaps it was something maybe we changed in our app -- encoding or protocol that maybe causes it to not show up, so I tried this simple test here: https://websocket.org/echo.html

Open DevTools
Go to https://websocket.org/echo.html
Go to Network tab, filter on WS, go to Frames tab
Click Connect in echo app followed by Send Message

This results in no frames showing up in DevTools, but the socket messages work fine with the app. I've asked a few other people and some of them do not have this problem.

I'm wondering if I either have an extension that is causing this issue, or if I have some other arcane setting that might be blocking the frames from displaying?

Upvotes: 62

Answers (3)

ickyrr

Reputation: 2123

In my case, I had to reset the chrome devtools settings to default. Not so pretty, but that helped me with this one.

What I did was:

Open Chrome devtools
Upper right of the devtools, click on the Settings icon
On Preferences tab, there's a "Restore defaults and reload" button at the bottom-right, just click on it.

This happened to me, but hopefully it helps you too! :D

Upvotes: 6

Ray Foss

Reputation: 3883

The bottom "frame details panel" sometimes hides the "frames list" panel, unless you hover your mouse under a column header and drag down.

wonderful websockets ux design

Update 1: As Sylvain Girard pointed out, this is Chromium issue 895548

Update 4: It's been fixed in Chrome 72, available in stable channel

Upvotes: 190

zenocon

Reputation: 1657

Ugh, the UI was pulling the wool over my eyes. The pane that shows new frames was pulled all the way up so I could not see them.

It's a split pane with the frame summary on top, and individual frame inspector on bottom -- but the split divider was pulled all the way to the top. Was tough to see that. Google UI team: would be great to provide a better visual indicator on this :)

Upvotes: 20

Chrome 59+ websocket frames no longer visible in DevTools

Answers (3)

Related Questions