Different Use Cases of console.log - You should use when debugging JavaScript

Working in JavaScript? Then you're very familiar with console.log(). Like all javascript programmers, I frequently throw a console.log into my code. And I really found it the simplest, faster, and a plain way to log something.

(() => {
    // do stuff
    let msg = 'Success!';
    console.log(msg);
})();

Let's see a few more ways in regards to console logging, that I found a bit more informative, and interesting in my day-to-day development workflow!🙌 😊

1. Common usage: debug(), info(), log(), error(), and warn()

Technically console.debug() console.info() and console.log() are identical - the only difference is that debug messages are hidden by default and log messages are visible in the recent versions of Chrome (to see debug messages, you have to set the log level to Verbose in the Devtools).

(() => {
    // do stuff
    console.debug('console.debug()');
    console.info('console.info()');
    console.log('console.log()');
    console.error('console.error()');
    console.warn('console.warn()');
})();

console.debug Pure black color text
console.info Black color text with no icon
console.log Black color text with no icon
console.error Red Color text with icon
console.warn Yellow color text with icon

2. Stop variable name confusion

When logging many variables, sometimes it’s difficult to understand what log corresponds to which variable.

For example, let’s try the code snippet in below:

const sum = (numOne, numTwo) => {
    // do stuff
    console.log(numOne);
    return numOne + numTwo;
};
console.log(sum(2,3));
console.log(sum(5,8));

When the above code is executed, you’ll see just a series of numbers.

To make an association between the logged value and variable, wrap the variable into a pair of curly braces {numOne}.

console.log({numOne});

Now in your console, you can see the associate variable name with the log.

3. String substitution

If you want a message containing multiple variables, string substitution is useful in this circumstance. It allows us to insert different variables that describe a message and make it clear as exactly what it needs to be.

(() => {
    // do stuff
    const user = 'John';
    const age = 25;
    console.log('%s is %i years old', user, age);
})();

Here is a list of specifiers that can be substituted into the output string:

Data type	Specifier
Objects and arrays	%o or %O
Integers	%d or %i
Strings	%s
Floats	%f

4. console.group() and console.groupEnd()

We can make a group of the related log by surrounding them with the console.group() and console.groupEnd() statements.

(() => {
    // do stuff
    console.group("Details of URL");
    console.log("Protocol: HTTPS");
    console.log("Domain: example.com");
    console.log("Path: details")
    console.groupEnd();
})();

Note: The group created by console.group() is initially opened. If you'd prefer that to be collapsed by default, you can use the console.groupCollapsed() statement instead of console.group():

console.groupCollapsed("Details of URL");

5. console.time() and console.timeEnd()

console.time() and console.timeEnd() are mostly used when you need to check the performance.

console.time("Loop");

for (var i = 0; i < 10000; i++) {
  // do stuff
}

console.timeEnd("Loop");

6. Log with style

By default, console.error() and console.warn() came up with certain different colors to draw attention. Let’s try to replicate this feature in our usual console.log() statement.

(()=>{
    // do stuff
    console.log(`%cThis is an important text`,`background: #FF0000; color: #FFFFFF; padding: 5px`);
})();

Let's write a code snippet that lets us use "our own" log directly with different colors:

Now let's use the above code to write our log:

log.info('console info');
log.warn('console warn');
log.success('console success');
log.error('console error');

7. console.table()

console.table() is exactly what it sounds like. It allows us to log the data to the console as a table.

Let's say we have an array of programming languages:

let languages = ["JavaScript", "TypeScript", "Python", "PHP"]

The console.log() call will give you the following representation of your data:

However, with console.table() we get:

Let's look at an object:

let extensions = {
    javascript: ".js",
    typescript: ".ts",
    python: ".py",
    php: ".php"
}

With console.log we get:

While console.table gives us:

Let's log an array of objects:

let languages = [
  {name: "JavaScript", extension: ".js"},
  {name: "TypeScript", extension: ".ts"},
  {name: "Python", extension: ".py"},
  {name: "PHP", extension: ".php"}
];

You can also restrict the columns that are shown in the table. You have to just pass their keys as an array into the second parameter while throwing the console.table():

console.table(languages, ["extension"]);

That's It!

Hopefully, you found these debugging tricks useful and these will make your JavaScript coding experience more productive.

What logging tips do you use? Write a comment below!

Comments

[olsard]

Great, thanks for sharing!

[DarkteK]

After reading this its funny to see how a Tech Lead told me to use console.info instead of console.log because It is better

[Kostiantyn Ochenash]

thanks for ( {numOne} ); really usefull !