Preamble
Debugging is an essential process in software development regardless of language or platform. With JS, too, surely you are familiar with the basic syntax as below:
1 2 3 4 5 | console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> ‘Hello World <span class="token operator">!</span> ’ <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">//log a message or an object to console</span> console <span class="token punctuation">.</span> <span class="token function">info</span> <span class="token punctuation">(</span> ‘Something happened…’ <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">//same as console log</span> console <span class="token punctuation">.</span> <span class="token function">warn</span> <span class="token punctuation">(</span> ‘Something strange happened…’ <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">//same as console log but outputs a warning</span> console <span class="token punctuation">.</span> <span class="token function">error</span> <span class="token punctuation">(</span> ‘Something horrible happened…’ <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">//same as console log but outputs an error</span> |
However, there are some more useful functions and attributes with Console that you may not know, let’s find out in this article.
Tip # 1: console.trace ()
If you want to know the details of the Log, you can use console.trace()
to trace the stack with the data recorded in the Log.
Tip # 2 console.time () and console.timeEnd ()
If you are concerned about performance, you can calculate the runtime with console.time()
and print it with console.timeEnd()
Tip # 3 console.memory
If performance is becoming more important and you are looking for memory usage details, you can use console.memory
to check HEAP device status.
Tip # 4 console.profile (‘profileName’) & console.profileEnd (‘profileName’)
This is not a standard, but it is widely supported. You can run or stop the browser performance evaluation tool, by running console.profile('profileName')
and then console.profileEnd('profileName')
. This helps you set up exactly what you want, and prevents time-consuming mouse clicks.
Tip # 5 console.count (“STUFF I COUNT”)
In case a function or code is called multiple times, you can use console.count('?')
To count the number of times the function or code has been run.
Tip # 6 console.assert (false, “Log me!”)
You can use console.assert(condition, msg)
to print an error message on the console, if condition is false.
Tip # 7 console.group (‘group’) & console.groupEnd (‘group’)
When printing too many logs, you might want to group them. A useful way is to use console.group()
& console.groupEnd()
Tip # 8 String substitutions
When printing a log, you may need to combine the values of some variables. You can use the following. Example:% s = string,% i = integer,% o = object,% f = float
Tip # 9 console.clear ()
When you’ve logged too much, you want to delete it, console.clear()
is a solution.
Tip # 10 console.table ()
You can print an object into an intuitive table with console.table()
References
https://medium.com/appsflyer/10-tips-for-javascript-debugging-like-a-pro-with-console-7140027eb5f6