61

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

  1. Open DevTools
  2. Go to https://websocket.org/echo.html
  3. Go to Network tab, filter on WS, go to Frames tab
  4. 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?

enter image description here

David Dehghan
  • 22,159
  • 10
  • 107
  • 95
zenocon
  • 1,597
  • 1
  • 17
  • 24
  • Related: https://stackoverflow.com/a/37414271/1426227 – cassiomolin Aug 30 '17 at 11:09
  • It could have been as simple as creating an issue for it with the Chromium team... Which is what I did and guess what: [a fix is on the way.](https://bugs.chromium.org/p/chromium/issues/detail?id=895548) – Sylvain Girard Oct 17 '18 at 06:57

3 Answers3

186

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

Ray Foss
  • 3,649
  • 3
  • 30
  • 31
18

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 :)

enter image description here

zenocon
  • 1,597
  • 1
  • 17
  • 24
4

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:

  1. Open Chrome devtools
  2. Upper right of the devtools, click on the Settings icon
  3. 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

ickyrr
  • 1,963
  • 1
  • 14
  • 14
  • 2
    Mine Chrome did not show any details for websockets only a grey blank panel. Restore to def helped to fix it. – niio Sep 02 '22 at 08:48