How to create console log groups in JavaScript

Most programmer's are familiar with a browser's built in debugging tools. This includes the standard Inspector used to view the DOM elements, and to the Console terminal in which you can run commands and see output.

And that's what I will be covering today. The browser console is more complex than most programmer's realize. There is alot that you can do with it in terms of styling, formatting and even in how you organize your console output statements.

Most programmer's are familiar with the following JavaScript commands:

console.log('hello world');

console.log(2 + 4) // 6 :)

console.log(var1); // undefined

The console.log() command is incredibly useful for quickly getting a glimpse at a moment in a JavaScript functions life cycle.

But if you find yourself working on large and somewhat complex projects, then you will notice that eventually they will accumulate and clutter up your code.

Lucky for us the browser developers have thought of a solution to help us get organized.

What is console.group()?

You can now organize your console.log()'s into their own individual named groupings. What does that mean exactly?

Well, anything inside of a particular console group will appear together in the console under it's own heading section.

Here is an example of a simple console group declaration:

console.group("Group 1");

console.log("I'm in group 1");

console.log("As am I");

console.groupend();

Any console.log's after the initial group() method call and before the groupend() call will appear under the same heading in the console window.

The browser will also add a toggle icon to the left of each group so that you can open and close each group accordingly.

Unnamed groups

If you noticed from the screenshot above, it is possible to have unnamed groupings as well.

I tend to use this approach more often as having to come up with descriptive names for each group takes some level of time and extra effort and sometimes the name just doesn't add any extra value.

Before using console groups, I would typically divide my console.log's using the following approach.

console.log("**********************");

console.log("Hello world");

console.log("***********************");

Not the cleanest method to be perfectly honest, but it worked. The issue of course is that having multiple sections like this makes the console window difficult to read. Using an unnamed group gives me the exact same functionality without the need for character dividers.

Embedded groups

And lastly, you can also embed groups within other groups. For example:

console.group("Parent group");

console.log("Belongs to parent");

console.group("Child group");

console.log("Belongs to child");

That code snippet would produce the following output on the console:

While you have the option to embed as many groups as you'd like, this inevitably can also lead to challenges with readability.

However you find yourself using groups though, they can indeed help to visually make sense of your command line output, as that isn't always the most clear from a programming perspective.