CODEWITHSUNDEEP
google-chromewebsocketformattingsignalrgoogle-chrome-devtools
Dinko Pehar
Dinko Pehar

Reputation: 6071

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.

Upvotes: 3

Views: 2101

Answers (2)

Jason Landbridge
Jason Landbridge

Reputation: 1442

The character you are seeing at the end of every message (\u001e, ASCII "Record Separator", hex 0x1E) is used by SignalR as a message delimiter. This is not a bug or a mistake; it's a design choice to help the SignalR client library distinguish between different messages when they are received.

The delimiter exists because SignalR needs a way to indicate where one message ends and the next begins, especially when multiple messages are sent over a single connection. This is especially useful in environments where messages can be chunked or concatenated together.

Ideally, Chrome would hide delimiters and then the display of formatted messages should work.

Upvotes: 2

SamB
SamB

Reputation: 9229

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!

Upvotes: 3

Related Questions