google-chromewebsocketformattingsignalrgoogle-chrome-devtools

Display WebSocket message with formatting?

UPDATE: At time of asking this question, this was related to SignalR library and not plain WebSockets. I see correctly formatted messages now.

Is there any way to word-wrap messages in WS tab in Chrome Developer Tools or display JSON with formatting ? It's really annoying to scroll to right to see whole message.

Example with message selected and it's preview doesn't have any formatting or word wrapping applied:

Web Sockets example

Thank you in advance.

Solution

  • It's working fine here on Chrome/78.0.3904.97:

    Screenshot

    What I did:

    1. Go to http://crawl.develz.org/play.htm
    2. Open one of the listed servers
    3. Start devtools
    4. Go to the Application tab and add a cookie called "no-compression" with value "yeah no" to the relevant server. (Any truthy string should work, I just chose the least confusing one I could think of in about a minute.)
      • Otherwise, crawl's webtiles server can end up compressing messages even when browser supports RFC 7692's "permessage-deflate" extension, which ruins the demonstration.
    5. Open the Network tab
    6. Reload the page
    7. Select the "socket" request, switch to the "Messages" tab, and pick a frame.
    8. Start drilling down in the tree view in the bottom pane!