10 Tips for Javascript Debugging Like a PRO with Console

Yotam Kadishay
Feb 11, 2018 · 4 min read

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.

AppsFlyer

AppsFlyer Engineering

Yotam Kadishay

Written by

Full-Stack Software Engineer | Self-Proclaimed Food, Wine, and Movies Critic

AppsFlyer

AppsFlyer

AppsFlyer Engineering

More From Medium

More from AppsFlyer

More from AppsFlyer

My journey from Python to Go

2.6K

More from AppsFlyer

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade