To use HTML span elements to style different portions of a console.log message, check out this code: jsfiddle.net/yg6hk/5
– HansMay 8 '13 at 10:00

7

Not to be beating a 'dead horse', but what about styling a specific part of the message? As in: console.log('Oh my %cheavens!%c Now we are talking.', 'background: #222');
– JakeTheSnakeSep 19 '13 at 14:06

Hahaha, times of blackOnWhite console logs are away now!! Time of logs on LSD starts:D
– Hermann BierMay 30 '16 at 14:33

1

I know it's been a long time, but I'm curious how the CSS for this type of text was generated. It's clearly done programatically; anyone know of a good tool for generating css like this?
– Kyle BakerMay 3 '18 at 20:17

You can use a custom stylesheet to color your debugger. You can put this code in C:\Documents and Settings\<User Name>\Local Settings\Application Data\Google\Chrome\User Data\Default\User StyleSheets\Custom.css if you are in WinXP, but the directory varies by OS.

I wanted to style the entire line, not just the text, so I remove the .console-message-text class. Also, the most pleasing background colors I found were #ffece6 for errors, #fafad2 for warnings, and #f0f9ff for normal.
– Matthew ClarkNov 9 '12 at 18:07

2

Keep in mind this stylesheet applies to all pages that you visit in Chrome, so if you remove a class to decrease the specificity, you may find a website using your styles on a message popup or something like that.
– Charlie SchliesserJul 21 '13 at 16:03

Older versions of Chrome do not allow you to get console.log()s to show in a specific color programmatically, but calling console.error() will put a red X icon on error lines and make the text red, and console.warn() gets you a yellow ! icon.

You can then filter console entries with the All, Errors, Warnings, and Logs buttons beneath the console.

It turns out Firebug has supported custom CSS for console.logs since 2010 and Chrome support has been added as of Chrome 24.

"When %c appears anywhere in the first argument, the next argument is used as the CSS to style the console line" Correction "When %c appears anywhere in any argument, the next argument is used as the CSS to style the the console line output following the %c. e.g. i.imgur.com/msfPNbK.png
– ChrisJJDec 9 '16 at 13:23

Unlike most of the other solutions, this allows for coloring string-containing variables as well.
– max pleanerJul 15 '16 at 18:39

2

Actually this is not really supported for example you cant currently do this console.log(`this is inline ${'red'.red.bold} and this is more text`.grey) the styling would stop after the first styled item
– Chad SciraJul 15 '16 at 19:02

2

Even though there's no "inline" coloring it's still possible to do things like var txt = "asd"; txt.red or `${txt}`.red + `${txt}`.green. I'm not aware of a way to do this with the %c syntax others are recommending. So thanks for building the library
– max pleanerJul 15 '16 at 19:24

I know It's a bit late to answer but as the OP asked to get custom color messages in console for different options. Everyone is passing the color style property in each console.log() statement which confuses the reader by creating complexity in the code and also harm the overall look & feel of the code.

What I suggest is to write a function with few predetermined colors (e.g success, error, info, warning, default colors) which will be applied on the basis of the parameter passed to the function.

It improves the readability and reduces the complexity in the code. It is too easy to maintain and further extend according to your needs.

Given below is a JavaScript function that you have to write once and than use it
again and again.

I had in mind an implementation that was more log.info("this would be green"), etc. Close enough.
– Kyle BakerApr 26 '17 at 17:55

Cool, but consider that standard approach with console.error(), console.warn(), console.info() seems better in this scenario, as it also 1) provides semantics that we lose here, which allows to filter messages by severity in console 2) use colors that is best for user's configuration, eg. browser in dark mode, or high contrast mode
– Paweł BulwanOct 20 '17 at 13:36

console.info() and console.log() shows the same standard log and you can't differentiate with only looking at the output. But yeah console.warn() and console.error() can be used to filter messages later on. As the OP asked; how to print color logs in console. I think the answer is best according to the question asked by the OP. We are not filtering messages but we are focusing on printing color logs. I really do appreciate your suggestion and the example can be enhanced further to meet your requirements as well.
– Suhaib JanjuaOct 20 '17 at 14:38

While this code snippet may solve the problem, it doesn't explain why or how it answers the question. Please include an explanation for your code, as that really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion.
– Luca KiebelSep 8 '18 at 19:39