Get in touch
Featured image for Advanced Console Logging - Styling

Advanced Console Logging - Styling

Posted on 10th October 2017 at 11:30am by Chris Snowden in Code, Tutorials, Web

Ever felt that your browser console output was too plain and boring? Never fear, Pixel Pixel are here to help you fix that!

Console Styling:

Sometimes it makes sense to want your console output to be a little more colourful:

  • Make error messages more readable.
  • Distinguish between object types.
  • Improve clarity and accessibility.
  • Spice up an internal tool.
  • Add recruitment messages, sponsor messages etc.
  • Create quirky easter eggs.
  • For fun... :)

It's a good job then that it's super easy to style your console methods with css! The syntax is pretty simple and self-explanatory, but it can be a bit unfriendly to use once you start adding more complicated styles.

We'll take you through how to apply styles, and describe with examples a few different methods of doing so.

Using Styles:

Add a style:

  • Starting with a simple console.log(), the log command should be separated into two sections by a comma - the content section and the style section.
  • The style syntax command is '%c' - this escapes the string and tells the browser to apply your style command.
  • Ensure that you are correctly closing your parameters in quotes.
  • You can access a wide variety of css attributes but not all - have a play around to see what is possible.
e.g.
console.log('%cTesting a colour', 'color:red;');

Adding a style

Multiple styles:

  • You can, of course, use multiple styles in a log.
  • Separate them as if you were writing inline css.
e.g.
console.log('%cUsing multiple styles', 'color: orange; background-color: grey; border: 2px solid orange; padding: 5px; ');

Adding multiple styles

Reset styles:

  • You can also reset your styles or override them with new versions.
  • Using multiple instances of '%c' will allow you to pass multiple style parameters. 
  • These are then acted upon in order.
e.g.
console.log('%cThis is red, %cthis is yellow, %cthis is normal', 'color: red', 'color: yellow','color: inherit');

Resetting styles

Going Further:

Use a variable:

  • It is possible to dynamically choose your colours by passing in variables.
  • Be careful to close your quotes properly - this can be fiddly when you start to pass complicated lists.
e.g.
var a = 'a variable test using the colour ... ';
var b = 'orange';
console.log('%cThis is ' + a + b + '','color:' + b + '');

Using variables to style

Using a style array:

  • If using a lot of styling, it would be best to pass your log message an array of css.
  • Do this as if it was a normal array variable and be careful to use semi-colons to separate the styles.
e.g.
var styleArray = [
'background-color: white',
'color: red',
'border: 2px solid red',
'font-size: 16px',
'padding: 0px 15px 15px'
].join(';');
console.log('%cThis was styled using an array! ', styleArray);

Using a style array


There's plenty more that you can do with the console object and the browser dev tools at large, so have a poke around and see what else you can find. Let us know if you find something exciting :)

Hopefully, our examples here have helped to give you some inspiration. If you need any further help, please feel free to chat to us here.


We love what we do! You will too. Speak to us