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

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