10 Tips for Javascript Debugging Like a PRO with Console

Yotam Kadishay
Feb 11, 2018 · 4 min read
Image for post
Image for post

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.

Image for post
Image for post

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().

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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!

Image for post
Image for post

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.

Image for post
Image for post

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).

Image for post
Image for post

Tip #9 console.clear()

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

Image for post
Image for post

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

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store