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
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?
Launch Chrome Developer tools. Load your page and initiate the WebSocket connections. Click the Network Tab. Select the WebSocket connection from the list on the left (it will have status of "101 Switching Protocols".
# Open the Issues tab Open DevTools. Click the Go to Issues button in the yellow warning bar. Alternatively, select Issues from the More tools menu. Once you're on the Issues tab, click the Reload page button if necessary.
At this point, you can do whatever you want with the frames. I used the console. save utility from https://bgrins.github.io/devtools-snippets/#console-save to save the frames as a JSON file (included in the snippet below). This will save all incoming socket frames to your default download location.
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
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 :)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With