js-logger icon indicating copy to clipboard operation
js-logger copied to clipboard

Support console colors

Open zacklitzsinger opened this issue 9 years ago • 1 comments

Chrome and Firefox both support colors in console. For example:

console.log('%c console colors', 'background: black; color: yellow');

js-logger should be able to pass this through to the underlying console implementation (as they are just additional parameters).

zacklitzsinger avatar Oct 04 '16 23:10 zacklitzsinger

Chrome, Safari and Firefox provide support for this by %c being present anywhere in the first argument then the second argument will be used as an inline style and further arguments concatenated[0].

The reason it currently doesn't work is because the default formatter will shift the name of the logger as first argument meaning the %c is moved to the second message (and ignored).

A fix would be to introduce a new formatter which detects the presence of %c in the first argument and prefixes it to the logger name.

Given the following user invocation of js-logger:

myLogger.info('%c console colors', 'background: black; color: yellow', 'trailing arg...');

The current formatted produces the following messages array (broken)

[0] [logger_name]
[1] %c console  colors!
[2] background: black; color: yellow
[3] trailing arg...

A revised formatted would need to produce the following output:

[0] %c [logger_name] console colors!
[1] background: black; color: yellow
[2] trailing arg...

My only reservation here is that this will not work in other browsers and you are going to get a bunch of garbage appearing in your logs.

[0] https://stackoverflow.com/questions/7505623/colors-in-javascript-console/7505651#7505651

jonnyreeves avatar Aug 18 '17 16:08 jonnyreeves