Chrome Developer Tools are great for debugging JavaScript code. The step-by-step debugger and the console are great tools, and very helpful. Logging small amount of data with console.log() is pretty much ok. However, working on a medium to large scale web applications mostly means dealing with objects and arrays containing a nifty bit of data. And the thing is that the log method could not be much of help in this case. The console will get messy due to the unreadable amount of data, leaving us scrolling up and down through it trying to locate a piece of data.

Logging Data While Looping

Let's write a for loop to create a hundred random numbers between 0 and 100, check if the number is greater than fifty then log "the number is greater than 50", otherwise, log "the number is less than or equal to 50".

for (var i = 0; i <= 100; i++) {
  var n = Math.random() * 100;
  console.log('The number is %d', n);
  (n <= 50) ? console.log('the number is less than or equal to 50') : console.log('the number is greater than 50');
}

The output is overwhelming and unreadable.
Plain log

Using console.group()

The group method will do a great job grouping and nesting the output in a readable and more elegant way.

for (var i = 0; i <= 100; i++) {
  var n = Math.random() * 100;
  console.group('The number is %d', n);
  (n <= 50) ? console.log('the number is less than or equal to 50') : console.log('the number is greater than 50');
  console.groupEnd();
}

That gave a nice nested collapse structure.

Grouping

Note: the group method could be used without specifying any input.

Collapsible and Nested Groups

Nested group could be added in case of a need to group more output in the parent group.

for (var i = 0; i <= 100; i++) {
  var n = Math.random() * 100;
  console.group('The number operation');
  console.log('The number is %d', n);
  console.group('Compared to 50');
  (n <= 50) ? console.log('the number is less than or equal to 50') : console.log('the number is greater than 50');
  console.groupEnd();
console.groupEnd();
}

Nested group

Note: console.groupEnd() will close the closest console.group().

While this nested group is beneficial, I would like it to be collapsed initially. This way if I needed to check it, I could expand it. And that is achievable by replacing group with groupCollapsed.

for (var i = 0; i <= 100; i++) {
  var n = Math.random() * 100;
  console.group('The number operation');
  console.log('The number is %d', n);
  console.groupCollapsed('Compared to 50');
  (n <= 50) ? console.log('the number is less than or equal to 50') : console.log('the number is greater than 50');
  console.groupEnd();
  console.groupEnd();
}

Collapseable

The method groupCollapsed is pretty handy while dealing a huge amount of data in a hierarchical view.