Q:

Newline not working correctly when using with console.log styling in chrome

I hope I'm not doing something daft but I'm writing this out in the devtools in Chrome:
console.log('%c{\n  a: %c1 %c2%c,\n}', 'color:grey;', 
    'color:red;', 'color:green;', 'color:grey;');

and I would expect to see this:
{
    a: 1 2,
}

But actually I get this:
{      ,
 a: 1 2 }

Which makes absolutely no sense to me...?

A:

Well, it seems like all styled texts in console are some kind of inline-blocks, stacked side-by-side.
So, in fact, if we'll add background-color to your code, we'll be able to see the true layout of your text:

So, to get the image, that you want, it seems like you have to consider this "column-based" layout. For your example, it would be:
console.log('%c{\n  a: \n}%c1\n  %c2\n %c,\n ', 'color: grey;', 'color: red;', 'color:green;', 'color:grey;');

Here is the result of above code:

Unfortunately, I couldn't find any solution, to make them stack as blocks, instead of inline-blocks. So, it seems like your only option is to use console.log() for each line. If it's critical for you to generate one line - you can write a function to split this line by \n character and console.log() each part of the string.

