Web App Development

Using console.group to make logs more readable

When you’re monitoring a lot of values and events in a program the output in the console can become difficult to read.

console.group in Chrome let’s you group and collapse a set of console messages.

To make sure your messages are collapsed before you start interacting with them use groupCollapsed.

console.groupCollapsed("Animals")
console.groupCollapsed("Mammals")
console.log("Panda")
console.log("Horse")
console.groupEnd()
console.groupCollapsed("Birds")
console.log("Owls")
console.log("Pigeon")
console.groupEnd()
console.groupEnd()

Expanding console grouped logs in Chrome

You can’t append new messages to an existing group of logs.

In Firefox

Firefox doesn’t support collapsing groups, but it still shows the messages as nested and grouped together:


Follow me on Twitter
I'm building monitoring tool for site speed and Core Web Vitals.
➔ Start monitoring your website or run a free site speed test