When using Chrome DevTools, it can be helpful to have more control over how we log the console output. Learn how to use console.group to easily bundle related content together.
Sometimes we need more flexibility in the way we manipulate the browser console output. To do that, we can apply styles, define errors and warnings, etc. In addition, we can also group the contents we print to the console.
In this post, we’ll demonstrate how we can index the contents we print out to the console using
console.group. Console.group creates a new inline group in the console. As a result, it indents subsequent console messages by an additional level, until
console.groupEnd() is called.
The syntax is fairly understandable and easy to work with. You start with the
console.group() method to specify that you’re trying to log a group of related contents to the console. It takes a String parameter
label, which is just a label that describes the group.
console.group() method takes only one parameter
label. It is optional and does not work with the closing
console.groupEnd() method because, by default, it closes the recently created group.
Traditionally, logging messages to the console is simple and understandable. Hence, there’s no need for an extra layer of functionality like console.group. Take, for instance, logging the “Error Occurred” in an Error callback function. All you need to do is:
That will print the Error message to the console whenever the function is called. It’s that simple. So one might ask why then do we need console.group(). Here’s why: During development, we tend to log just more than String messages to say what happened in a particular function.
Let’s consider a different scenario where we want to log values within a loop. The next best thing to do will be to add a separator at the end of each loop to separate the values of each iteration, but that is still not efficient enough since there are no labels to describe the logs.
console.group it becomes really simple to properly organize related data and represent each group with a definitive group label while logging to the console. Let’s exemplify this concept by logging a student’s data to the console using
console.group("Student Details"); console.log("Name: John Doe"); console.log("Age: 19"); console.log("Class: JS3"); console.log("Best Subject: Economics"); console.groupEnd();
Let’s see the output when we log it in the console:
This is a simple way to group and log our related items. All the data concerning the particular student can be logged in a single student group. What if we wanted to log this student’s test scores alongside his details? That brings us to nesting.
In the last example we logged the details of a particular student to the console using the
console.group method. As an added feature, we can nest related groups together, as we’ll demonstrate shortly, by adding the student test grades to his details group like this :
console.group("Student Details"); console.log("Name: John Doe"); console.log("Age: 19"); console.log("Class: JS3"); console.log("Best Subject: Economics"); console.group("Student Grades"); console.log("Economics: A1"); console.log("Maths: B2"); console.log("Commerce: B4"); console.log("Marketing: A2"); console.groupEnd(); console.groupEnd();
This way, we have added another table
Student Grades inside our previous
Student Details table to display the student’s grades alongside his other details. Let’s log this group to the console and see how it performs:
In some browsers, more like in some recent versions of most browsers, the feature comes by default in the traditional
console.group methods. However, if this isn’t the case for you, each group can be made collapsible by using the
console.groupCollapsed("Student Details"); console.log("Name: John Doe"); console.log("Age: 19"); console.log("Class: JS3"); console.log("Best Subject: Economics"); console.groupCollapsed("Student Grades"); console.log("Economics: A1"); console.log("Maths: B2"); console.log("Commerce: B4"); console.log("Marketing: A2"); console.groupEnd(); console.groupEnd();
How it works is, the groups are all collapsed by default when it is logged in the console. This is particularly handy when you’re logging an awful lot of data — that way, you can log all the data at once and gradually open only the groups you need at the moment. Let’s log the table above and inspect the console for its behavior:
In this post we have demonstrated how we can use the
console.group method to index related items in the console. This is a really powerful feature that allows developers to properly organize related data when logging items to the console. There’s a lot more you can learn about using the console effectively — feel free to check them out to find out more awesome things about the console in the official documentation.
Christian is a Lagos, Nigeria based software developer and developer advocate. He keeps pushing boundaries with/for the Next Billion Users and Next Million Developers through Microsoft.
Subscribe to be the first to get our expert-written articles and tutorials for developers!