Indexing Console Outputs Using console.group in Chrome DevTools

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.

Syntax

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(label);

Parameter

The 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.

Why console.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:

console.log(“Error Occurred”);

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.

Using console.group

With 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() :

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.

Nesting Related Groups in the Console

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:

Collapsible Groups

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() method.

    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:

Conclusion

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.