loading...
Cover image for 2 Console Commands You Might Forget About
platformOS

2 Console Commands You Might Forget About

pavelloz profile image Paweł Kowalski ・2 min read

This post was inspired by "How to use console command effectively" in which Trishul presents some effective methods of using console logging. Read that post to learn about various logs, styling, time, assert, and count.

I want to add a couple more to that list that I found useful in my career:

  • groupCollapsed
  • table
  • the combination of groupCollapsed + table

console.groupCollapsed

Let's say you have a function that is doing something on every link on a webpage. For debugging purposes, you are logging every time it does its thing:

const showLinks = () => {
  const links = [...document.querySelectorAll('a[href]')];

    links.forEach(el => {
    console.log(el.href);
  });
}

Some websites have a lot of links, so to not pollute console too much, you can encapsulate those logs under an expandable group.

console.groupCollapsed('Links')

showLinks();

console.groupEnd('Links');

What's important here is where you execute the function, not where it is defined.

Result:

Collapsed

Expanded (for an MDN website, cut off, because there were too many links to fit on the screen):

Expanded

console.table

Table is a console tool that allows you to display structured data in a visually pleasing way.

Logging collections:

const cars = [
  { maker: "Honda", model: "CRX", year: 1989 },
  { maker: "Opel", model: "Corsa", year: 1998 },
  { maker: "Honda", model: "Civic", year: 1999 },
  { maker: "Subaru", model: "Forester", year: 2006 },
  { maker: "Peugeot", model: "406", year: 2001 },
]

console.table(cars);

Results:

Table 1

You can decide which column should be logged:

Table 2

Logging plain arrays (including nested):

Table 3

Read more on console.table

Combining groupCollapsed and table

You can even use them in tandem, which is pretty nice if you use logging extensively:

const cars = [
  { maker: "Honda", model: "CRX", year: 1989 },
  { maker: "Opel", model: "Corsa", year: 1998 },
  { maker: "Honda", model: "Civic", year: 1999 },
  { maker: "Subaru", model: "Forester", year: 2006 },
  { maker: "Peugeot", model: "406", year: 2001 },
  { maker: "Honda", model: "CRX", year: 1989 },
  { maker: "Opel", model: "Corsa", year: 1998 },
  { maker: "Honda", model: "Civic", year: 1999 },
  { maker: "Subaru", model: "Forester", year: 2006 },
  { maker: "Peugeot", model: "406", year: 2001 },
  { maker: "Honda", model: "CRX", year: 1989 },
  { maker: "Opel", model: "Corsa", year: 1998 },
  { maker: "Honda", model: "Civic", year: 1999 },
  { maker: "Subaru", model: "Forester", year: 2006 },
  { maker: "Peugeot", model: "406", year: 2001 },
]

console.groupCollapsed('Cars');

console.table(cars);

console.groupEnd('Cars');

Results:

Combination - Collapsed

Expanded:

Combination - Expanded

Happy logging!

Posted on by:

pavelloz profile

Paweł Kowalski

@pavelloz

Performance, JavaScript, Serverless, and Testing enthusiast.

platformOS

Gives you the flexibility to customize every aspect of your digital build

Discussion

markdown guide