fskzdw
Last Updated: July 14, 2017
·
26.76K
· anasnakawa
Bd178bca43aaf1ebd472633932a19b6e

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;');

Picture

extra styling

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

Picture

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

Picture

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'
].join(';');

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

Picture

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
Say Thanks
Respond

3 Responses
Add your response

15242
F123ebaa984a6a24717d1547056e6984

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 ·
25003
None

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 ·
27517
Avatar progm

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

over 1 year ago ·