CSS in console.log

As a web developer, I sometimes use the JavaScript console to debug my code (though I must admit, I do it less and less; step-by-step debugging is usually more insightful).

I just discovered that you can actually add CSS styling to your console messages! You can change the color, size, underline text… basically make your logs a lot more readable oO

Let’s take a look at how it works, it’s a simple trick that can make a big difference when scanning through console output.

Table of Contents

Styling console output

The %c directive lets you apply CSS styles to the part of the message that follows it. You pass the style as the second argument to console.log():

console.log(
  "Here's a %cslick-looking log message!",
  "font-family: monospace; padding: 8px 12px; margin: 6px 0; border-radius: 4px; font-size: 13px; color: white; background-color: blue;"
);

You can even apply multiple styles in a single console.log() call:

console.log('%cFirst style : %cSecond style', 
    'color: green; font-weight: bold;', 
    'color: yellow; padding: 2px;'
);

For cleaner code, you might define some predefined styles:

const awesomeStyles = {
  error: 'background: #D32F2F; color: white;',  
  warn: 'background: #FE9811; color: white;', 
  log:  'background: #9B19B1; color: white;'  
};

console.log('%c Beautiful error', awesomeStyles.error);
console.log('%c Awesome warning', awesomeStyles.warn);
console.log('%c Great log', awesomeStyles.log);

Using groups in the console

Beyond CSS, the console also supports grouping, which helps structure your output by nesting related logs visually.

To use it, call console.group(). If you want the group to be collapsed by default, use console.groupCollapsed(). To close the current group, call console.groupEnd().

Here’s an example:

console.log("A log outside any group");

console.group("Our First group");
console.log("blah blah");

console.group("Our Second group");
console.log("blah blah");
console.log("Still in the second group");
console.groupEnd();

console.log("Back in our first group");
console.groupEnd();

console.debug("We are out of all groups now");