Styling console.log() output

It is possible to style console.log() output by utilising the %c format specifier and passing a string of styles.

console.log('%ctest', 'font-size: 40px; color: red; text-transform: uppercase');

Example of styled console log output

This can be useful for a number of things:

  • Warning users against copying and pasting code into the console. Facebook currently log such a warning with some obvious styling.
  • Making specific log messages stand out for debugging purposes.
  • Companies used to leave job advert and easter egg comments hidden in HTML to target developers who were using view-source. In an age of minification, perhaps leaving these in the console could be a new approach!

Happy logging!

JavaScript
SCROLL TO TOP