[Feature Request] Support newlines

[lostintangent]

Log messages are expandable when their content represents an object, however, if the content is a string with newlines in it (e.g. a stack), then there doesn't appear to be any support for this, which makes it hard to parse. For example, if you run a failing assert (or console.trace), that will generate a stack log, which Glimpse displays, however, its pretty unreadable:

If you look at the contents of this string within the DOM, it has the expected newlines, but those aren't being correctly handled in the UI in order to make the data more easily readable.

[nikmd23]

Although this bug is being reported against the logging tab, it's probably a generic bug in which we aren't converting Carriage Returns and/or Line Feeds into HTML appropriate line breaks.

Let's figure out a way to fix this universally. I bet (but have no proof) that it affects all the places we display response bodies as well.

[nikmd23]

Thanks for remembering the product review @avanderhoorn. ;)

[nikmd23]

I've done some testing on this, and while it looks like calls to console.trace() are looking better, any other form of new line seem to still be broken.

Here's the testing logic I used:

const os = require('os');
console.log('New \n Line');
console.log('Carriage \r Return');
console.log('R and \r\n then N');
console.log('os.' + os.EOL + 'EOL');
console.trace();

And here's the output I'm getting on master, with the latest version of Chrome:

Note: os.EOL will either output a \n or an \r\n depending on the system it runs on.

I'm putting this back in @avanderhoorn's list to look at.

PS - I show a \r all by itself here in my test. That probably shouldn't have a line break in it, I'm just trying to be detailed in my testing. I also noticed that the white-space:pre-line doesn't seem to be applied to the elements in question. The are white-space:normal.

[nikmd23]

👌

[nikmd23]

This is now available in version 0.14.1. For more information, please see our announcement. If you continue to experience this issue, please let us know. - :heart: the Glimpse team.