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