DEV Community

Cover image for All about console logging in JavaScript
John Doe
John Doe

Posted on

All about console logging in JavaScript

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);
Enter fullscreen mode Exit fullscreen mode

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

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

console.log(obj);
Enter fullscreen mode Exit fullscreen mode

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

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;
}
Enter fullscreen mode Exit fullscreen mode

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!');)
}
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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`);
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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!");
Enter fullscreen mode Exit fullscreen mode

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");
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

«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
Enter fullscreen mode Exit fullscreen mode

Stack tracing 🏎

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

foo();
Enter fullscreen mode Exit fullscreen mode

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

bar
foo
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)