2 Console Commands You Might Forget About
Tags: javascript, beginners
Published: 2020-07-03 11:19:41

This post was inspired by "[How to use console command effectively](https://dev.to/trishul/how-to-use-console-command-effectively-371b)" in which Trishul presents some effective methods of using console logging. Read that post to learn about various logs, styling, `time`, `assert`, and `count`.

{% link trishul/how-to-use-console-command-effectively-371b %}

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:

```js
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.

```js
console.groupCollapsed('Links')

showLinks();

console.groupEnd('Links');
```

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

Result:

![Collapsed](https://dev-to-uploads.s3.amazonaws.com/i/mwhscb4pu6jvdknkpi9y.png)

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

![Expanded](https://dev-to-uploads.s3.amazonaws.com/i/cn5jzhwr47m9tme0su7i.png)

## console.table

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

Logging collections:

```js
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](https://dev-to-uploads.s3.amazonaws.com/i/8pyzzaj77icn0zaaqovp.png)

You can decide which column should be logged:

![Table 2](https://dev-to-uploads.s3.amazonaws.com/i/6e3eg0r2li59bnwo2p6r.png)

Logging plain arrays (including nested):

![Table 3](https://dev-to-uploads.s3.amazonaws.com/i/wutohxz5s0fwv0n5r9ia.png)

[Read more on console.table](https://developer.mozilla.org/en-US/docs/Web/API/Console/table)

## Combining groupCollapsed  and table

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

```js
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](https://dev-to-uploads.s3.amazonaws.com/i/21fry81hz1m7mpb85sll.png)

Expanded:

![Combination - Expanded](https://dev-to-uploads.s3.amazonaws.com/i/xnfl5m0kou41it5bm8gl.png)

Happy logging!

## Read more

If you are interested in more performance oriented content, follow me and I promise to deliver original, or at least effective methods of improving your website. 

{% link https://dev.to/platformos/using-webp-in-your-existing-webpage-809 %}

{% link https://dev.to/platformos/optimizing-images-for-the-web-18gc %}

{% link https://dev.to/platformos/3-tips-on-preserving-website-speed-5g0c %}