Different types of consoles.

Yes, that's true. there are many types of consoles in javascript, as we mostly use console.log. and all other types of consoles are also very useful as .log

Let’s check the most useful console types.

1. console.log()

conosle.log is very useful for debugging the code. we can print the dynamic variable value in the browser console with some static highlighters.

let’s see an example of it:

var data = ['a', 'b', 'c'];
for(var i=0; i< data.length; i++){
  console.log('data loop is = ', data[i]);
}

the output will be in the console of the browser like below:

Similarly, you can use it for any data if it response comes from api that also we can do.

2. console.error()

console. error is used to print error messages in the console. it is helpful in identifying and fixing errors in code.

it will show like error in the console. the major difference between log and error is the level of severity of the message being logged.

var data = ['a', 'b', 'c'];
for(var i=0; i< data.length; i++){
  console.error('data loop is = ', data[i]);
}

the output will be:

if there are multiple logs in the application then we can easily highlight logs like errors as it's in red color and exceptional situations.

from here we can differentiate log levels, so can find them easily.

3. console.warn()

console. warn is used to print warning messages in the console. it is helpful in identifying and fixing warnings in code.

it will show like warning in the console. the major difference between log, warning, and error is the level of severity of the message being logged.

var data = ['a', 'b', 'c'];
for(var i=0; i< data.length; i++){
  console.warn('data loop is = ', data[i]);
}

the output will be:

as I have shown previously we can filter consoles as well.

4. console. clear

console. clear is used to clear consoles. it will use where we have added multiple consoles and want to see new fresh consoles just need to clear first and add fresh consoles.

also, we can use clear in index.js file in react. as it will clear all the consoles from the application only in one line. a clear method of the console is very useful and cool, isn’t it?

console.clear();

once we run this code for a clear console in the console we can see the message like this:

5. console. timeEnd

console.timeEnd is very useful for optimizing the code. it is used to measure the time for the execution of the code.

console.timeEnd();

the output will be like this. For now, I have passed it directly in the console so it gives very little time but when we do it in our code it will give time accordingly. so we can get time for the execution of code so we can optimize based on it.

6. console. table

console. table method is used to print data in table format with index in the console, so we can read it very clearly and debug the code based on it.

let’s see the example it will clear your all doubts.

console.table(['a', 'b', 'c']);

the output will be:

It shows the total array with index in table format very clearly. it is great to debug a large array of data and find issues very quickly.

7. console. count

console. count method is used to count the number of consoles and how many times executed. it is used to count the number of times a particular expression is evaluated.

console.count();

you can see the output, it will help you to see how many times the console is printed in the browser console.

7. console. group, console.groupEnd, console.groupCollapsed

console. group helps to group the consoles in levels. it is used to group related log messages together. This can be helpful for keeping the console organized.

let’s see the example directly without any other explanation so that you guys can understand better:

let’s see the example for the console.groupCollapsed, groupCollapsed method name can say the use of it itself.

you can see in the above example that I have written console.groupCollapsed(), and that group of console is collapsed by default.

8. console.assert()

console. assert is the method that returns logs of the conditions like check number is even or odd.

for example, let’s check number is even or not, if it is not even number the console will look like in error type and whatever we have added message for it.

let’s see an example:

For example, you can we are getting error logs on 1,3,5,7,9 which are not even numbers.

So guys here are the console methods.

I can say for sure that this is a very useful console method for large applications or projects. it is very useful for debugging the code and we can find errors or solutions quickly using these other console methods.

If you have any questions about Javascript, React, and Redux, angular. Please comment below. will create a blog on it in detail.

Thanks for reading my blog. Hope this will help you to know the different methods of consoles in a better way. Follow me to learn more about javascript in a better and easier way.

Happy coding … :)