Better console.logs

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! 😊

Comments

[Amir]

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

[Yair Even Or]

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

github.com/yairEO/console-colors

[Alex]

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

[Amir]

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]

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]

Do not forget "console.group"!

enriquemorenotent.com/post/differe...

[jmscavaleiro]

Short, simple and easy! Thanks!

[David Wickes]

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]

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

[Manoj Barman]

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

[Derrick Camerino]

Cool! Didn't know about the styling/coloring

[Kelvin Wangonya]

Glad you learnt something :)

[Jonathan Boudreau]

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.