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!

Messy console log output

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();
}

Grouped output

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();
}

Using with labels

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();
}

Nested groups

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!

Using groups in the console

info

categories

tags