Kelvin Wangonya

Posted on Oct 18, 2018

Better console.logs

#webdev #javascript #devtips #learning

If you work with javascript a lot, you probably often need to use console.log() to output some info as you go along.

It's usually just the plain old way though:

(() => {
    // do stuff
    console.log('Success!')
})()

Here are a few ways you could make your logs a bit more visually informative, and interesting 🙂

Use `console.error()` for error logs

(() => {
    // do stuff
    console.error('Oops, something went wrong!')
})()

Use `console.warn()` for warning logs

(() => {
    // do stuff
    console.warn('Warning! Something doesnt seem right.')
})()

[Edit] Use `console.table()` for iterable objects

Thanks to @shoupn and @squgeim for pointing this out in the comments :)

function Person(firstName, lastName) {
  this.firstName = firstName
  this.lastName = lastName
}

const me = new Person('John', 'Smith')

console.table(me)

Add your custom styles

(() => {
    // do stuff
    console.log('%c%s',
            'color: green; background: yellow; font-size: 24px;','Success!')
})()

You can have a custom function in your code that lets you use "your own" log with colors directly

function customLog(message, color='black') {
     switch (color) {
         case 'success':  
              color = 'Green'
              break
         case 'info':     
                 color = 'Blue'  
              break;
         case 'error':   
              color = 'Red'   
              break;
         case 'warning':  
              color = 'Orange' 
              break;
         default: 
              color = color
     }

     console.log(`%c${message}`, `color:${color}`)
}

customLog('Hello World!')
customLog('Success!', 'success')
customLog('Error!', 'error')
customLog('Warning!', 'warning')
customLog('Info...', 'info')

Here's the pen.

Hope you found this useful and happy debugging! 😊

Latest comments (42)

Amir • Jul 10 '21

It was useful. Good job.
I've published a tiny package about this topic.
npmjs.com/package/havecoolconsole

Yair Even Or • Jan 3 '21 • Edited

I've authored "console colors", a tiny package which allows easy fun coloring:

github.com/yairEO/console-colors

Alex • Jul 17 '19

Is it possible to console.log within a width, so for example the entire width of the console?

Amir • Jul 10 '21

Absolutely yes.
Just set display: block; & width: 100vw;

console.log('%c%s', 'display:block;width:100vw;background-color:#cff1de;color:green;font-size:25px','Hello Console!');

jules manson • Nov 25 '18 • Edited

As a temporary measure for writing quicker console.log()'s just put the following in a temporary file (for polluting the global namespace) and link it to the top of your web application then unlink it when no longer needed:

const log = (...args) => console.log(...args);

Now you can easily do...

log(message, ' : ', func.name, func(arg));

Error at nameOfFunc : undefined // example output

This is especially useful when logging multiple test cases in a single run. Similarly can be done with the other console methods. And if you really want to go crazy, this can also be done with Object.prototype.methods but you must often bind the function to the calling object's scope by setting the context with Function.prototype.bind or Function.prototype.call. I think ES5 and ES6 have made Function.prototype.apply obsolete so I don't use it or recommend it anymore. But only do this on very small projects or inside created objects.

Enrique Moreno Tent • Nov 9 '18

Do not forget "console.group"!

enriquemorenotent.com/post/differe...

jmscavaleiro • Oct 26 '18

Short, simple and easy! Thanks!

David Wickes • Oct 23 '18

That's great - I didn't know about console.table. That's some very cool web-fu.

BUT!

Remember - all this debugging is as nothing to the power of good automated tests. A debug line should be ephemeral - an automated test is for life!

Shubham Battoo • Oct 21 '18

@itsmanojb something we were talking about the other day, what was that video you shared?

Manoj Barman • Oct 21 '18

That was from Angular firebase. Here the full video youtu.be/Mus_vwhTCq0

Derrick Camerino • Oct 19 '18

Cool! Didn't know about the styling/coloring

Kelvin Wangonya • Oct 19 '18

Glad you learnt something :)

Jonathan Boudreau • Oct 19 '18

I'm a big fan of the debug module. For debug logs that you don't remove afterwards it is very nice.

Another nice thing is console.trace, which also prints out a stack trace where the log is called. Useful if you're trying to debug a function which is being called in several critical areas.

Nathaniel Blackburn • Oct 18 '18 • Edited

I have gone about this via namespacing my debug logs so it assigns a colour based on that namespace.

debug('cache:set', {}) // cache:set +1ms {}

The namespace here being cache which is mapped against an array of colours using the following code...

let log = 'cache:set';
let colors = [];

const hash = data => {
    let hash = 0;

    for (let index = 0; index < data.length; index++) {
        hash = ((hash << 5) + hash + data.charCodeAt(index)) & 0xffffffff;
    }

    return hash;
};

let namespace = log.substring(0, log.indexOf(':'));
let color = colors[Math.abs(hash(namespace)) % colors.length];