The console.log() is a function in JavaScript which is used to print any kind of variables defined before in it or to just print any message that needs to be displayed to the user.

Syntax: console.log(A);

Using console.log One of the easiest ways to debug anything in JavaScript . The following article will cover other methods provided by the console that can help you to debug better.

Let’s get started.

The very basic use case is to log a string or a bunch of JavaScript objects. Quite simply,

console.log('Is this working?');

Now, imagine a scenario when you have a bunch of objects you need to log into the console.

console.log('Is this working?');

The most intuitive way to log this is to just console.log(variable) one after the other. The problem is more apparent when we see how it shows up on the console.

No variable names visible

As you can see, no variable names are visible. It gets extremely annoying when you have a bunch of these and you have to expand the little arrow on the left to see what exactly the name of the variable is. Enter computed property names. This allows us to basically club all the variables together in a single console.log(variable) and the output is easily visible. This also reduces the number of console.log(variable) lines in our code.

console.table()

We can take this a step further by putting all of these together in a table to make it more readable. Whenever you have objects with common properties or an array of objects use console.log(variable) . Here we can use console.log(variable) and the console shows:

console.table in action

console.group()

This can be used when you want to group or nest relevant details together to be able to easily read the logs.

This can also be used when you have a few log statements within a function and you want to be able to clearly see the scope corresponding to each statement.

For example, if you’re logging a user’s details:

console.log('Is this working?');

Grouped logs

You can also use console.log(variable) instead of console.log(variable)if you want the groups to be collapsed by default. You would need to hit the descriptor button on the left to expand.

console.warn() & console.error()

Depending on the situation, to make sure your console is more readable you can add logs using console.log(variable) or console.log(variable) . There’s also console.log(variable) which displays an ‘i’ icon in some browsers.

warning and error logs

This can be taken a step further by adding custom styling. You can use a console.log(variable)directive to add styling to any log statement. This can be used to differentiate between API calls, user events, etc by keeping a convention. Here’s an example:

console.log('Is this working?');

You can also change the console.log(variable) , console.log(variable) and other CSS things.

Styling console.log statements

console.trace()

console.log(variable) outputs a stack trace to the console and displays how the code ended up at a certain point. There are certain methods you’d only like to call once, like deleting from a database. console.log(variable) can be used to make sure the code is behaving the way we want it to.

console.time()

Another important thing when it comes to frontend development is that the code needs to be fast. console.log(variable) allows timing of certain operations in the code for testing.

console.log('Is this working?');

console.time() output for loops

Hopefully, the article provided some information on various ways to use the console.

#javascript #web-development