10 Tips for Javascript Debugging Like a PRO with Console

I must admit it for the first time, and I’ll use this platform to clean up the skeletons from my development closet. Sometimes, the magic I do — which some call “coding” — is not as perfect as the outcome might appear to my colleagues when the magnificent results are shown to them. Yes, I said it - sometimes, I use the old trial and error we all call debugging :)

Don’t judge a SaaS platform by its cover. Our frontend team goes deep with some of the latest system designs. >>See our open roles

For the past decade, one of my passions is front-end development (especially javascript). As a craftsman, I love learning new tools of the trade. In this story, I’m going to give you some awesome tips for debugging like a pro, using the good old console.

Yes, we all know its basics:
console.log(‘Hello World!’); //log a message or an object to console
console.info(‘Something happened…’); //same as console log
console.warn(‘Something strange happened…’); //same as console log but outputs a warning
console.error(‘Something horrible happened…’); //same as console log but outputs an error

So hopefully now, I can give you some tips which you didn’t know before, and which will make you a PRO debugger.

Tip #1 console.trace()

If you want to know where the log is being prompted from use console.trace() to get the stack trace with the logged data.

Tip #2 console.time() && console.timeEnd()

If you are trying to find a sneaky performance issue, start counting time with console.time() and print with console.timeEnd().

Tip #3 console.memory

If your performance issue is even trickier, and you are looking for a sneaky memory leak, you might like to try and utilize console.memory (property, not a function) to check out your heap size status.

Tip #4 console.profile(‘profileName’) & console.profileEnd(‘profileName’)

This is not standard, but is widely supported. You can start and end a browser performance tool - performance profile from the code using console.profile(‘profileName’) and then console.profileEnd(‘profileName’). This will help you profile EXACTLY what you want, and prevents you from having to be mouse-click, timing dependent.

Tip #5 console.count(“STUFF I COUNT”)

In a case of recurring function or code, you can use console.count(‘?’) to keep count of how many times your code is read.

Tip #6 console.assert(false, “Log me!”)

Yes, conditional logging without wrapping your logs with if-else :)
You can use console.assert(condition, msg) to log something when the condition is falsy.
*disclaimer — in Node.js this will throw Assertion Error!

Tip #7 console.group(‘group’) & console.groupEnd(‘group’)

After writing so many logs, you might want to organize them. A small and useful tool for that is the console.group() & console.groupEnd(). Using console group, your console logs are grouped together, while each grouping creates another level in the hierarchy. Calling groupEnd reduces one.

Tip #8 String substitutions

When logging, you can incorporate variables using string substitutions. These references should be types (%s = string, %i = integer, %o = object, %f = float).

Tip #9 console.clear()

Well, having written so many logs, it’s now time to clear your console a little.

Tip #10 console.table()

Saving the best for last, this is a true gem in my opinion! You can actually print a very nice table with the objects you log using the console.table()

I really hope these tips make your debugging a bit more productive, and even a little fun!

If you love playing with technology, join us!

The above was investigated & implemented while creating my Tel Aviv Top Restaurant website.

This story was translated to Spanish by Javier Font.