Console should pretty-print values

[outoftime]

The JavaScript console should pretty-print values:

• Values should be syntax highlighted
• We should print all values in a reasonable way, including functions, complex objects (e.g. jQuery collection), etc.
• As a baseline, the printing behavior for a given object should be at least as good as it is in the current built-in Chrome console

I suspect https://github.com/cvadillo/js-object-pretty-print will be of use—I’m thinking we will probably want to actually load this into the preview environment and just pass an already-pretty-printed string through the postMessage.

[alessbell]

Started looking into some tools that might help us here and came across this post by LogRocket which led me to react-inspector.

Looks promising, going to play around with it as soon as I can. I think the hardest part might actually be handling jQuery objects...

[outoftime]

@alessbell react-inspector looks awesome! one potential hurdle—we won’t have access to React inside the preview frame, but some values (such as function objects) can’t be sent over the postMessage interface (as far as I know). any idea how we might bridge the divide?

[outoftime]

So for a bare-bones implementation of pretty-printing I went with object-inspect which has good default behavior in most cases. However, I think we might want to move to javascript-stringify, mainly because it allows us to define a custom visitor function; I think we’ll need to write custom behavior to really get this right.

We might just be able to skip that step and go straight to react-inspector, though—could use something like serialize-javascript to send values across the frame boundary without losing functions/DOM/etc.