First of all, I must admit that I will use this platform to clean up the skeleton (outline) from my development environment. Sometimes, the "magic" I do (some call it "coding") is not as perfect as my colleagues see when they show them these magnificent results. Yes, I said: sometimes, I use the old-fashioned trial and error method, which we all call "debugging" :)
One of the things I've been passionate about over the past decade has been front-end development (specifically Javascrip{filtering}t). As a "craftsman", I like to learn new tools on the market. In this story, I'm going to give you some great, more professional tips on how to use the "old" console.
Yes, we all know its basic usage:
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, I hope now I can give you some tips that you didn't know before, and those ways to play that can make you a more professional debugger.
Tip #1 console.trace()
If you want to get the hint location for log information, you can use console.trace() to get a stack trace with log data.
Tip #2 console.time() && console.timeEnd()
If you're trying to find a more insidious performance issue, use console.time() to start calculating the time, and then use console.timeEnd() to print.
Tip #3 console.memory
If your performance issues are more tricky and you're looking for a hidden memory leak, you might want to try and utilize console.memory (which is a property, not a function) to check your heap size state.
Tip #4 console.profile(‘profileName’) & console.profileEnd(‘profileName’)
This is not a standard approach, but it is widely supported. You can use console.profile('profileName') and then console.profileEnd('profileName') to start and end the browser performance tool - "performance profile" from the code. This will help you analyze exactly what you want and avoid you clicking the mouse, which depends on the program execution time.
Tip #5 console.count(“STUFF I COUNT”)
In the case of recurring functions or code, you can use console.count('?') to count the number of times your code has been read.
Tip #6 console.assert(false, “Log me!”)
Yes, conditional logging doesn't wrap your logs with if-else :)
You can use console.assert(condition, msg) to log something when the condition is false.
Disclaimer: In Node.js, this will throw an Assertion Error!
Tip #7 console.group(‘group’) & console.groupEnd(‘group’)
After writing so many logs, you may want to organize them. A small but useful tool is console.group() and console.groupEnd(). Use console groups to organize console logs together, each grouping creating another level in the hierarchy. Calling groupEnd() to reduce by one level (back to the previous level).
Tip #8 String substitutions
When logging, you can use strings to replace merge variables. These references are (%s = string, %i = integer, %o = object, %f = float).
Tip #9 console.clear()
So, having written so many logs, it's time to clean up your console.
Tip #10 console.table()
In my opinion, this is a real "gem"! You can use console.table() to print a very beautiful table!
|
Posted on 8/7/2018 1:29:40 PM
|
|
|
|
