Using console.group, console.groudEnd and console.groupCollapsed

In the continuation of my previous blog, we will be looking at three more useful console methods which are as follows:

  • console.group()
  • console.groupEnd()
  • console.groupCollapsed()

In many situations where you have too many log messages, it gets messier to figure out the exact console.log statement you are looking for. To make the console outputs more organized in a heirarichal way we have the above 3 listed methdos. Lets see there use in the example:

console.log('User 1');
console.group();
console.log('Username: Suroor');
console.log('Password: ***********');
console.groupEnd();
console.log('User 2');
console.group();
console.log('Username: Michael');
console.log('Password: ***********');
console.groupEnd();

You can see the output of the above code below:

console.group

As you can see the logs look more organized and its easier to go through them. A very useful thing indeed when you are debugging. You can also create nested groups.The disclosure button enables us to expand or collapse any number of groups.

console.groupCollapsed()

As per the documentation available on the web, console.groupCollapsed works same as console.group() and the only difference is that the group is collapsed by default needing you to use the disclosure button to expand it.

Hope it helps!

comments powered by Disqus