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:

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

console.log(protocol, address);

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

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.

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.

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().

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. 🧹

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.

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.

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 :)

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.

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

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.

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.

const foo = undefined;

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

// Assertion failed: Foo is not set now

Stack tracing 🏎

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

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