Grouping Logs Together with Console Group JS

Console grouping in JavaScript lets you bundle related console messages into sections. It is useful when normal logging turns into a long wall of text.

In browser DevTools, groups are expandable. That lets you scan the main labels first, then open the details only when you need them.

The Three Methods

Console grouping uses one method to open a group, one to open a collapsed group, and one to close the current group.

Every opened group must have a matching ending call. Think of them like opening and closing tags.

A Basic Group

Here is the simplest use: wrap related logs in a labeled group.

javascript

console.group("User Profile");
console.log("Name: Alice");
console.log("Role: Admin");
console.groupEnd();

In browser DevTools, this appears as a group labeled "User Profile" with the two messages nested inside. Click the arrow next to the label to expand or collapse it.

Using a Collapsed Group

A collapsed group starts closed in browser DevTools. Use it for detail you do not always need to see.

javascript

console.log("Rendering dashboard...");
 
console.groupCollapsed("Loaded assets");
console.log("main.js: 45 KB");
console.log("styles.css: 12 KB");
console.groupEnd();
 
console.log("Dashboard ready.");

The visible console shows the start message, a collapsed "Loaded assets" group, and the ready message. The asset details stay tucked away until you expand the group.

This keeps the console clean while still making the information available.

Nesting Groups

Groups can nest inside each other to show hierarchy. Keep nested examples short, or the console becomes hard to scan again.

javascript

console.group("API Request");
console.log("Endpoint: /api/users");
 
console.group("Response");
console.log("Status: 200 OK");
console.groupEnd();
 
console.groupEnd();

The output becomes a small tree. You can expand "API Request" to see the endpoint, then expand "Response" to see the status.

A Practical Use

Console groups shine when you want to trace data as it moves through a few steps:

javascript

function processOrder(order) {
  console.group(`Processing order #${order.id}`);
 
  const subtotal = order.items.reduce((sum, item) => sum + item.price, 0);
  console.log("Subtotal:", subtotal);
  console.log("Tax:", subtotal * 0.08);
 
  console.groupEnd();
  return subtotal * 1.08;
}

This function logs the subtotal and tax inside one labeled order group. The final return value is the total, but the grouped logs show how that total was built.

Call it with a small order to see the grouped output:

javascript

processOrder({
  id: "ORD-001",
  items: [
    { name: "Book", price: 15 },
    { name: "Notebook", price: 8 },
  ],
});

The subtotal is 23, the tax is 1.84, and the function returns 24.84. Grouping keeps those related values together.

Common Mistakes

Forgetting the Ending Call

Every opened group needs a matching ending call. If you forget one, later console messages can appear inside the wrong group.

javascript

console.group("Section A");
console.log("Inside A");
// The ending call is missing here
 
console.group("Section B");
console.log("Inside B");
console.groupEnd();

Write the ending call immediately after opening the group, then fill in the logs between them.

Grouping a Single Message

A group around one message adds visual noise without much benefit:

javascript

console.group("User");
console.log("Alice");
console.groupEnd();

For one value, a plain log is cleaner: console.log("User: Alice").

When to Use Console Groups

Use groups when several messages belong to one operation. Skip them when you only need to check one value.

Good uses include request details, multi-step calculations, loop iterations, and verbose data that you want collapsed by default. Simple checks are better as normal logs.

One runtime note: Node.js supports these grouping methods, but current Node documentation describes the collapsed version as an alias for the normal group method. Treat true collapse behavior as a browser DevTools feature unless your logging tool says otherwise.

Once you have organized logs, the next step is learning how to execute JavaScript in Chrome DevTools and how to read JavaScript stack traces when the console points to an error.