Colors in JavaScript console

Question

Can Chrome\'s built-in JavaScript console display colors?

I want errors in red, warnings in orange and console.log\'s in green. Is that possible?

Answer 1

I wrote a reallllllllllllllllly simple plugin for myself several years ago:

To add to your page all you need to do is put this in the head:

<script src="https://jackcrane.github.io/static/cdn/jconsole.js" type="text/javascript">

Then in JS:

jconsole.color.red.log('hellllooo world');

The framework has code for:

jconsole.color.red.log();
jconsole.color.orange.log();
jconsole.color.yellow.log();
jconsole.color.green.log();
jconsole.color.blue.log();
jconsole.color.purple.log();
jconsole.color.teal.log();

as well as:

jconsole.css.log("hello world","color:red;");

for any other css. The above is designed with the following syntax:

jconsole.css.log(message to log,css code to style the logged message)

Answer 2

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.

console.log('%c Oh my heavens! ', 'background: #222; color: #bada55',
            'more text');

When %c appears anywhere in the first argument, the next argument is used as the CSS to style the console line. Further arguments are concatenated (as has always been the case).

Answer 3

This library is fantastic:

https://github.com/adamschwartz/log

Use Markdown for log messages.

Answer 4

I doubt that anyone will actually see it but I have a simple solution for those who want to mix several colors in the same line:

export enum Colors {
    Black = '\033[30m',
    Red = '\x1b[31m',
    Green = '\x1b[32m',
    Yellow = '\x1b[33m',
    Blue = '\033[34m',
    Magenta = '\033[35m',
    Cyan = '\033[36m',
    White = '\033[37m'
}


function color(text: string, color: color: Colors) {
    return `${color}${text}\x1b[0m`;
}


console.log(`This is ${color('green text', Colors.Green)} but this is black. This is red ${color('red', Colors.Red)} etc`);

Answer 5

Google has documented this https://developers.google.com/web/tools/chrome-devtools/console/console-write#styling_console_output_with_css

The CSS format specifier allows you to customize the display in the console. Start the string with the specifier and give the style you wish to apply as the second parameter.

One example:

console.log("%cThis will be formatted with large, blue text", "color: blue; font-size: x-large");

Answer 6

template system, useful if you want to create colorful line text without creating full style for every block

var tpl = 'background-color:greenyellow; border:3px solid orange; font-size:18px; font-weight: bold;padding:3px 5px;color:';
console.log('%cNo #1' + '.%cRed Text' + '%cBlue Text', 
             tpl+'magenta', tpl+'red', tpl+'blue');