‘Debugging’ is the process without which, development of applications would only be possible by the perfect programmers, and we all know there are no such programmers who don’t make a mistake or simply are ‘PERFECT’.
In the early stages of JavaScript, we used to call alert() to debug and get a variable’s value, whereas now we have the CONSOLE OBJECT.
“The console object provides access to the browser’s debugging console” – MDN Web Docs.
When talking about the Console API, usually developers use only some functions like console.log(), console.warn(),or console.error()to debug their application, but these aren’t the only weapons in the arsenal of CONSOLE. Often there are many other methods that can perfectly implement our requirements and improve debugging efficiency.
Earlier, I personally used only console.log() and no other methods, but one day I was introduced with different methods of the console, and the first thought that came into my mind was “where were you, all this time?!?” … This Blog Post is made to introduce other developers, with the most interesting console methods which I personally use in my daily life as a ‘JavaScript Developer’ to debug the code.
In this blog, we’ll get to know about several methods that the console object provides-
console.table(data, columns);
- Prints out Data in Tabular Form.
- data: a mandatory argument which should be of type array or object.
- columns: an optional argument which is an array containing the names of columns to include in the output.
Let’s understand with an example:
In the above example, we simply passed data and voila! Now let’s use the second argument column on the same data to see its use-
If you see the above example, we are passing the name as the column. So, the table print only with the name property.
console.time(‘label’), console.timeLog(‘label’) and console.timeEnd(‘label’)
- console.time(‘label’): It starts a timer you can use to track how long an operation takes.
- console.timeLog(‘label’): Logs the current value of an already initialized timer.
- console.timeEnd(‘label’): Stops that particular timer and shows the time elapsed in milliseconds.
- label: an optional argument which helps in unique identification of the timer among thousands of timers.
- The above example gives out the total time taken to run a loop from 1 to 100 and add the values.
- It logs a value at the half point when I === 50;
console.assert(condition, data)
- When you’re too lazy to use an if() statement.
- condition: a mandatory argument, it prints the data to the console if the condition fails
- data: the data you want to print when the assertion fails
- In the first example condition given is 2>3 which is false, so the message or data is logged to the console.
- In the second example condition given is 3>2 which is true, so the message or data is not logged.
- This method is very useful when you conditionally want to log data or a message.
console.count(‘label’)
It’s a very important method to find out how many times a code block is executing.
- Logs the number of times that this particular call to count() has been called.
- label: an optional argument that can be passed to uniquely identify the count(), otherwise a default “default” label is used.
- In the above example, foo() function is declared with a call to count and foo() has been called 4 times, as soon as console.count(‘foo’) executes a count is logged on the console.
console.group(‘label’), console. groupCollapsed(‘label’) & console.groupEnd(‘label’)
- Using console.group, your logs are grouped together, while each grouping creates another level in the hierarchy.
- Calling groupEnd reduces one level.
- console.groupCollapsed creates a collapsed group unlike console.group which creates an expanded group.
- label: an optional argument that can be passed to uniquely identify the group, it acts as a group header.
- In the example above we can see a hierarchy of logs, which brings a lot more clarity to a whole bunch of ill-arranged and ambiguous logs.
console.warn(data) & console.error(data)
- warn: Outputs a warning message to the Web Console.
- error: Outputs an error message to the Web Console.
- data: the message or data you want to log as a warning or error.
- It can also be used to remove the ambiguity and enhance the visibility from already existing logs.
console.trace(data)
Since JavaScript is not a very structured language, it can sometimes be hard to get an overview of what happened and when. This is when console.trace (or just trace in the console) comes handy to be able to debug JavaScript.
- This will show you the call path taken to reach the point at which you call console.trace() or simply the stack trace.
- data: an optional argument. It acts like a simple console.log as well by printing out the data when it is called.
- Many times, it happens that we get stuck in the situation of detecting the callable function and its parameter values, but with console.trace() we can easily see how things are going down (in a stack “pun intended”).
Also you can read - Promises in JavaScript(An Introductory Guide).
Playing a little with the legend itself ‘console.log’
- Log values with Property Names, by wrapping the properties in ‘{ }’.
- The above-mentioned way helps us to easily identify what values are being printed, and no additional strings need to be passed with it to uniquely identify as we would not need it anymore.
- Include Custom Styling:
- In the above example we can see that we can use custom CSS styling by using %c substitution for style, and also various other substitution expressions like %s for string, %i for integer, %O for object %f for float, etc.
- We can create global methods for console.log with different types of styles to be used throughout the project.
Last but not the least- ‘console.clear’
- Yeah, you guessed it right. It clears the console.
You can see my project developed in this article for a more interactive explanation. Lastly, I want to say that incorporating these methods in your day to day coding practice, will definitely make your work efficient and debugging slight hassle-free and less painful.