Last Updated: October 23, 2018
· anasnakawa

Colorful console.log

sometimes, various console logging methods log, info, error & warn are simply not enough, especially when you are debugging a huge application with tons of logs going on in the browser console

in Firebug you can apply your own styling to the log message, by prefixing the message with %c flag, and provide a string of css style properties as a second parameter to the log method as follows:

console.log('%c the green hulk got mad!', 'color: green; font-weight: bold;');


extra styling

console.log('%c a colorful message', 'background: green; color: white; display: block;');


Taking it further

you might want to create your own set of logging methods, each color for a specific component / module in your application, so whenever a colored message appeared, you'll know to which part it is related


CSS3 ?

yup, you can spice up your messages with some CSS3 awesomeness

var styles = [
    'background: linear-gradient(#D33106, #571402)'
    , 'border: 1px solid #3E0E02'
    , 'color: white'
    , 'display: block'
    , 'text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3)'
    , 'box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 5px 3px -5px rgba(0, 0, 0, 0.5), 0 -13px 5px -10px rgba(255, 255, 255, 0.4) inset'
    , 'line-height: 40px'
    , 'text-align: center'
    , 'font-weight: bold'

console.log('%c a spicy log message ?', styles);


Browser Compatibility

  • currently you can do this on Firefox using Firebug plugin
  • on Chrome Canary's Developer Tools, soon will be available on the Chrome stable channel

3 Responses
Add your response

So cool, thank you for sharing! I recognized this was possible after noticing that Facebook did it when I was building a Page Tab and wondered how.

over 1 year ago ·

Is it also possible to add your own custom icons to the styling? I've tried to make that work but to no avail so far

over 1 year ago ·

I always wonder how could facebook style it's own console. Simply wow! :D

over 1 year ago ·