Let’s explore JS consoling
Debugging is a very important part while building an application. It helps you to find the point where you might end up with something unexpected behavior in your code. There are a lot of ways to do that in different languages. Today we gonna play with Javascript debugging. Javascript is a client-side language(also used for backend and many more). So you can use any of the latest browsers to see your debugging result. Let’s start debugging.
While reading this article via any browser you can start your first debugging with the help of your browser. Just right-click on the page and select the ‘Inspect’ option or simply you can hit Control+Shift+I for windows and Linux or Command+Option+I for mac to go there. Then write your first line of debugging:
console.log(“This is my first debugging/log”);
And with that hit the enter button and you will see the below result.
The semicolon(;) is optional at the end of the statement.
Now, let’s see what kind of debugging option is provided by Javascript and how can you use them or when to use them. Go to the console panel of your browser again and start typing console. and you will find a suggestion list something like this:
Let’s explore them one by one.
console.assert()
This method is very helpful when you want to assert something. Assert means comparing something with your expectation. Let’s say somewhere in your code you are expecting a variable to be true. To check that or to verify that you can use the console.assert() method.
As you can see, the .assert() method is checking a condition. If the condition is true it's returning nothing. And if it is false, it is showing an assertion error message. The method takes objects and string as its second parameter. You can pass as many parameters as you want. Traditionally it will override the default error message with the provided one as shown in the example above.
console.clear()
This method simply clears all the logs in your console. This can be very useful in production where you might want to remove all the unwanted logs left during development.
console.count()
The console.count() method logs the number of times that this particular call has been called. It is very useful in the scenario where you might want to know how many times the method/block/variable is getting called. This debug option may save your API call. The method takes a string as its argument which is optional. By default, it shows the output using the ‘default’ keyword. If you want to override that you may pass one.
As you can see, the .count() method showing how many times the method was called with its parameter. Here greet(“John”) was called two times so the counter is showing 2, where greet(‘Jane’) was called once.
console.countReset()
This method is used to reset the counter that is used in the console.count() method.
console.debug()
There are different levels of debugging, like error, warning, debug, etc. This method helps you to print something at the debug level. What you pass in its parameter it will print in the console under debug level. The output will only be shown if your debug level is turned on.
console.dir()
The method console.dir() displays an interactive list of the properties of the specified JavaScript object. It is a great way to see what inside the Javascript object. It will show you all the properties and methods available under a Javascript object.
console.dirxml()
The method console.dir() displays an XML presentation of the specified JavaScript object. It is a great way to see what inside the Javascript object. This is similar to the .dir() method, but rather than printing properties and method list it prints in an XML way.
console.error()
This is one of the most common debugging options in Javascript. This method is used to print any error log to the web console. This method takes multiple parameters and outputs with red text in the console area.
console.group, console.groupEnd() & console.groupCollapsed()
Those methods are used to group your log. Grouping helps you to identify and mark your log with indentation from regular logs. It increases readability along with a nice indentation to find your expected output. To make a group you need to call the console.group() method. It takes the name of the group as its parameter. If no name passed it will be named as ‘console.group’. After calling the .group() method everything after that will be counted as grouped log until or unless you call the console.groupEnd() method. If you have passed any name during calling the .group() method, you need to pass exactly the same name to let the console understand that it's an end to the grouping. And if you didn’t pass any name you can simply call the .groupEnd() method. There is no need to pass any parameter or name.
And if you want to collapse the group you can use the console.groupCollapsed() method instead of console.group() method. What it will do for you is it will hide the grouped logs and a pointer will be shown for clicking. By clicking which you can find your grouped logs.
console.info()
The console.info() method outputs an informational message to the Web Console. In Firefox, a small “i” icon is displayed next to these items in the Web Console’s log.
console.log()
The most used logger used by every Javascript developer. The console.log() method outputs a message to the web console. The message may be a single string (with optional substitution values), or it may be anyone or more JavaScript objects.
console.table()
This method is very useful while printing objects and arrays. This lets you print in a tabular format in your web console. This takes a mandatory parameter which should array or object.
If you have multiple arrays or objects and you want to print a certain column(s) you can pass a second parameter with the name of the column(s) you want to print.
console.time(), console.timeEnd() & console.timeLog()
As like as the .group() and .groupEnd() method, .time() and .timeEnd() are pair. The .time() is used to track the time that is needed to execute the code block. And when you want to turn on the time track, just call the .timeEnd() method. The .time() method optionally takes a label as its parameter. If you don’t pass any, it will be named as ‘default’, To stop the timing you need to call the .timeEnd() method with the label you used for .time() method or blank if you didn’t pass any. The .timeLog() is used to log the time needed before you call the .timeEnd() method.
console.trace()
The console.trace() method outputs a stack trace to the console. It optionally takes a parameter and simply logs as ‘console.trace’ if no argument passed. You can use this to trace a certain point of your code.
console.warn()
This one is used to show a warning to your console saying that this part needs your concern. The warning log doesn’t harm your output, rather than it tells you that you some improvement to your code in a certain place. As like as the .trace() method, it takes a parameter and simply ignores logs if no parameter passed. You can use this to trace a certain point of your code.
That’s all from me today. Enjoy logging/debugging your code to make your code bug free at the production level. And hit claps if you liked it.
