Using groups in the console

Ah yes, console.log() - we use it more than we should, but it’s just so handy! But could we use it better when debugging loops in our code?

Let’s give ourselves a trivial example

for (let i = 0; i < 3; i++) {
  for (let j = 10; j <= 15; j++) {
    console.log(String.fromCharCode(65 + i), String.fromCharCode(65 + j));
  }
}

If we were debugging this we could add a quick console.log():

for (let i = 0; i < 3; i++) {
  for (let j = 10; j <= 15; j++) {
    console.log(i, j);
    console.log(i, String.fromCharCode(65 + i), String.fromCharCode(65 + j));
  }
}

But now look at this mess!

We can clean this up a bit with console.group().

for (let i = 0; i < 3; i++) {
  console.group();
  for (let j = 10; j <= 15; j++) {
    console.log(i, j);
    console.log(String.fromCharCode(65 + i), String.fromCharCode(65 + j));
  }
  console.groupEnd();
}

Note that a group has to be paired, any group() should have a groupEnd() or things will get weird!

Now we can see some summaries, and even collapse groups that we’re not interested in. ‘console.group’ isn’t a helpful label, so you can provide an alternative that gives an indicator of state in this interaction of the loop.

for (let i = 0; i < 3; i++) {
  console.group('i is ' + i); // <<< Show something more interesting that console.group
  for (let j = 10; j <= 15; j++) {
    console.log(j);
    console.log(String.fromCharCode(65 + i), String.fromCharCode(65 + j));
  }
  console.groupEnd();
}

It’s easier to diagnose any issues now. But wait! The powers of console.group() don’t end there. You can nest groups!

for (let i = 0; i < 3; i++) {
  // Collapse the parent groups by default
  console.groupCollapsed('i is ' + i);
  for (let j = 10; j <= 15; j++) {
    console.group('j is ' + j);
    console.log(String.fromCharCode(65 + i), String.fromCharCode(65 + j));
    console.groupEnd();
  }
  console.groupEnd();
}

See that with console.groupCollapsed() you can have the groups start collapsed instead of expanded, which is the default.

Next time you find your loops are driving you loopy and the console is running to hundreds of lines, consider the group functions!