With a bunch of console.log statements sometimes it's a bit hard to track which one is printing out in the console and even with console.log('name of var ==>', var) approach sometimes it's easy to get lost, so how about we will add our own custom method to console and pimp it up a bit with styles?
Since we can do it with default .log method by doing:
console.log('%cbanana','font-family:helvetica;color:white;font-weight:bold;font-size:3em')
And of course it is annoying to type all of these every time we want to console.log something, we are going to add our custom method to console and call it instead.
First we will add a method to the console prototype and make it a function, taking the data to be printed out as an argument and returning the styled output:
console.__proto__.me = (what)=>{return console.log(`%c${what}`, 'font-family:helvetica;color:white;font-weight:bold;font-size:3em')}
Now we can print stuff by doing:
console.me('banana')
And the output would be this:
Hard to miss, huh?
Cheers!
Top comments (0)