Stop using default console.log, check this instead
Tags: javascript, webdev, typescript, node
Published: 2020-05-21 11:27:10

So, you are always using `console.log` to debug your application, right?
In this post, I will show you alternatives to better debugging.

## Interpolating
How are you interpolating your console.log with variables? Are you doing something like this?
```javascript
const a = 'World';
console.log('Hello ' + a);
```

That is not wrong, but there are better ways to do that.

#### The % Operator
The first way is using the % operator.
I believe it works almost like any other programming language that allows you to do that.

So, you can use it like this:
```javascript
console.log('Hello %s', a);
```

There are other options, too, like **%i** for integers or **%f** for float numbers.
Google that, and you will see a lot of other options ;)

#### Template String
Template String is called when you wrap a string with backticks, e.g.:
```javascript
const a = `This is a template string`;
```

But that is unnecessary if you are not interpolating variables on it, it is preferable to use single/double quotes in this case.

To use template string, you must wrap your variables in `${}`, let's see how your console.log would look like:

```javascript
const a = 'World';
console.log(`Hello ${a}`);
```

Looks clean, right?!

## Styled
Did you know you can apply style to a console.log?
<img src="https://i.pinimg.com/736x/80/21/28/80212898d905b9342175ab35a24d3497.jpg" />

To do that, you need to start your console.log string with `%c`, and the second argument should be the "inline" CSS. Check this out:

```javascript
console.log('%c I am a great text!', 'font-size: 26px; color: blue;');
```

Copy and paste that in your console and check what you get.
That's awesome, huh?

## Warning
When you need to add a warning, you can do it using `console.warn`.

To do that, use:
```javascript
console.warn('This is some warning');
```

## Error
Yeah, I know, it's sux to have some error in our application.
But when we are trying to debug the errors to fix them, why not display an error instead of a default log?

To do that, use:
```javascript
console.error('This is some error');
```

## Info
Sometimes you just want to show some information differently.
Using `console.info`, it will display a little "info icon" before your log.

To do that, use:
```javascript
console.info('Just a simple information');
```

## Assert
You can use assert to test something.
In the first argument, you pass what you want to test, and the second argument is what to show in case the assert fails.
If the assert returns true, it won't display anything.

```javascript
console.assert(1 !== 1, '1 is equal to 1');
```

## Viewing DOM Elements
Let's say you have something like:
```javascript
const p = document.querySelector('p');
```

So, you have the variable `p` as the first `<p>` of your page.
If you `console.log` it, you will probably get just the DOM element, but you can't know it's properties, et cetera.

BUT, we have the brave `console.dir` to save us!

```javascript
console.dir(p);
```

It will log the DOM element as an object so that you can check all its properties, events, et cetera! AWESOME! \o/

## Grouping
Sometimes you are logging things inside an array, and it becomes spamming in your console, right?

Take this as an example:
```javascript
const dogs = [
  { name: 'Ricota', age: 2 },
  { name: 'Gorgonzola', age: 8 }
];

dogs.forEach(dog => {
  console.log(`Dog: ${dog.name}`);
  console.log(`Dog: ${dog.name} is ${dog.age} years old`);
  console.log(`Dog: ${dog.name} is ${dog.age * 7} years old for real`);
})
```

Yep, I know, it's not that easy to read your console this way.
BUT we can group them!

We have two options.

#### console.group()

`console.group` will group it and shows it initially open (but you can close them)

Let's see an example:

```javascript
dogs.forEach(dog => {
  console.group(dog.name); // This is the group title
  console.log(`Dog: ${dog.name}`);
  console.log(`Dog: ${dog.name} is ${dog.age} years old`);
  console.log(`Dog: ${dog.name} is ${dog.age * 7} years old for real`);
  console.groupEnd(dog.name); // To end the group, you MUST pass the same as you are using in your group title
});
```

#### console.groupCollapsed()

`console.groupCollapsed` will group it too, but initially shows it closed, so you can open what you want only.

Let's see an example:

```javascript
dogs.forEach(dog => {
  console.groupCollapsed(dog.name); // This is the group title
  console.log(`Dog: ${dog.name}`);
  console.log(`Dog: ${dog.name} is ${dog.age} years old`);
  console.log(`Dog: ${dog.name} is ${dog.age * 7} years old for real`);
  console.groupEnd(dog.name); // To end the group, you MUST pass the same as you are using in your group title
});
```

- For both, you need to close it with `console.groupEnd()`.
- For both, you need the same title when creating the group and when ending the group.

## Table
You can generate a table in your console, oh yes, you really can!

Using the same dogs data example, try this in your console:
```javascript
const dogs = [
  { name: 'Ricota', age: 2 },
  { name: 'Gorgonzola', age: 8 }
];
console.table(dogs);
```

It will show you a table with index, name, and age headers.

## Clear
Now you did a lot of stuff in your console, why don't you clear it before continue testing another stuff?

Yes, you can clear it by using:
```javascript
console.clear();
```

And right now you have a new and fresh console right up to you!

That's all folks!
I hope you guys enjoy it, and keep learning!