Pretty print console logs

[RubenSandwich]

Describe the Feature

Now that console.log is forwarded to the CLI, we should think about formatting those logs to be easily readable in the terminal.

Possible Implementations

Here is an idea of displaying arrays and objects to the console using some basic ASCII graphics. (The format below is loosely based upon console.table and csvkit.)

I tried to make to design this formatting style with nesting in mind, as it is very common to nest JS objects.

console.log([true, false]);

(index) | Values
0       | true
1       | false

console.log({firstName: "Erica", lastName: "Smith"});

(index)    | Values
firstName  | "Erica"
lastName   | "Smith"

console.log([{firstName: "Monica", lastName: "Johnson"}, {firstName: "Erica", lastName: "Smith"}]);

(index) | firstName | lastName
0       | "Monica"  | "Johnson"
1       | "Erica"   | "Smith"

console.log([22, {firstName: "Erica", lastName: "Smith"}, 34]);

(index) | Values
0       | 22
1       | firstName: "Erica"
        | lastName: "Smith"
2       | 34

Related Issues

Log console invocations to the terminal

[thymikee]

Thanks for filing this feature request!

I'm really not sure if this is more readable than running logs through Prettier or util.format, especially the last example (I'm already confused by reading it). What if you log some really nested object, with a depth of at least 5 with obscure prototypes etc?

We could have this formatting for console.table, however it's currently not supported (not only by the middleware, it's filtered out on the RN client side).

cc @cpojer

[RubenSandwich]

@thymikee I did not think of using Prettier.

I looked around the JS ecosystem again and found pretty-format which is what Jest uses for snapshot tests: https://github.com/facebook/jest/tree/master/packages/pretty-format.

As for using util.format; I think it would be more difficult to read deeply nested objects then the pseudo console.table output I defined above. But I have no evidence to back up that claim. 🤷‍♀

[thymikee]

Logs are controlled by Metro. Please check if this is still an issue and if it is, file it there: https://github.com/facebook/metro