All about console logging in JavaScript
Tags: javascript, webdev, beginners, tutorial
Published: 2020-05-23 20:17:35

In this article I want to collect all the information about logging in the console. Do you want to pump your skill in this and surprise familiar developers? Then let's get started! ✨

## console.log()

This is probably one of the most frequent commands that we use when debugging the application. However, even this command has chips you may not be aware of. For example, you can pass several arguments:

```jsx
const address = 'dev.to';
const protocol = 'HTTPS';

console.log(protocol, address);
```

In addition, you can transfer objects, arrays or functions:

```jsx
const obj = { name: 'John', lastname: 'Doe' };

console.log(obj);
```

## console.warn() & .error() & .debug() & .info()

This is a very interesting logging feature, which should not be abandoned and can be used daily.

Some of the most important advantages of using: entities are separated, warnings or errors during logging can be recognized immediately, you can make a filter of the desired type.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vj205l64i3it6m7togj8.png)

### console.warn() ⚠

Using `console.warn()`, you can display a warning if something suddenly goes wrong, but, for example, it does not greatly affect the main operation of the application.

```jsx
const a = 3;
const b = -5;

const multiply = (a, b) => {
	b < 0 ? console.warn('Ooops. b is less than zero!') : null;

	return a * b;
}
```

### console.error() 🌋

Obvious use: when something seriously went wrong. More informative and immediately visible, unlike `console.log()`.

```jsx
const firstName = 'John';
const secondName = undefined;

const concatNames = (firstName, secondName) => {
	return firstName && secondName ? `${firstName} ${secondName} : console.error('Something goes wrong!');)
}
```

### console.debug() 🐛

It is very convenient to use the application for debugging, since then you can go through the entire code and remove it if you suddenly forgot. 🧹

```jsx
const car = {
	model: 'Audi',
	year: 2020
	price: 132043
}

console.debug(car);
```

### console.info() ℹ

It can be used to display some kind of reference information, for example, the execution time of a specific code / function.

```jsx
console.info(`Code executed ${time} seconds`);
```

## Variables and special values

When using string values, you can specify variables that are declared with the following arguments. Be sure to specify the type of value: string, number, and so on.

```jsx
console.log("Hello, my name is %s and I'm %d years old!", "Daniil", 22);
```

In the example above, we made two variables with different types: string and number.

In addition, you can use tabs or newlines. The main thing is not to forget the escape of the character :)

```jsx
console.log("\tThat tabs!");
```

Now you can smoothly switch to using CSS in the console and create beautiful output 🎉

## Using CSS in console! 🎨

We came to the most interesting. Using a special directive `%c`, you can set CSS properties for a string. Pass the styling itself as the second argument (most styles are supported). Let's look at an example right away.

```jsx
console.log("This is %cCSS", "color: aqua");
```

Now in the example, «CSS» will be displayed with aqua color.

Who uses VS Code there is a special extension that will help with this.

[VS Code Extension: Colored Console Log](https://marketplace.visualstudio.com/items?itemName=rehfres.colored-console-log)

## Output grouping

For ease of reading the logs, they can be grouped. This will help if you have a large amount of data that can be combined.

```jsx
console.group("That console group!");
	console.log("Info in group #1");
console.groupEnd();
```

## «Assert» values

In short, `console.assert()` displays an error message if the statement is false. Let's see an example.

```jsx
const foo = undefined;

console.assert(foo, "Foo is not set now");

// Assertion failed: Foo is not set now
```

## Stack tracing 🏎

```jsx
function foo() {
  function bar() {
    console.trace();
  }
  bar();
}

foo();
```

In the console, we get the function call stack in the following order:

```
bar
foo
```

## Try it out!

I prepared a small sandbox where you can test all of the listed use cases (grouping in this sandbox is not supported at the time of writing).

[Codesandbox](https://codesandbox.io/s/console-advanced-logging-jmiww)

I will be glad to see examples of your use of logging in the comments :)