Different Use Cases of Console.Log — You Should Use When Debugging Javascript

Fatema T. Zuhora
Jul 24, 2020 · 5 min read
Different Use Cases of console.log — You should use when debugging JavaScript
Different Use Cases of console.log — You should use when debugging JavaScript
Better console.log — Tips & Tricks

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);
})();
plain JS console.log
plain JS console.log
Plain JS console.log

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()');
})();
common usage of the console.log
common usage of the console.log
Common usage of the console.log

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.

console.log-img3
console.log-img3
Image — 3

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.

console.log-img4
console.log-img4
Image — 4

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);
})();
console.log-img5
console.log-img5
Image — 5

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();
})();
console.log-img6
console.log-img6
Image — 6

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");
console.log-img7
console.log-img7
Image — 7

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");
console.log-img8
console.log-img8
Image — 8

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`);
})();
console.log-img9
console.log-img9
Image — 9

Let’s write a code snippet that lets us use “our own” log directly with different colors:

gist.github.com/fatematzuhora -> console.js

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');
console.log-img10
console.log-img10
Image — 10

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:

console.log-img11
console.log-img11
Image — 11

However, with console.table() we get:

console.log-img12
console.log-img12
Image — 12

Let’s look at an object:

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

With console.log we get:

console.log-img13
console.log-img13
Image — 13

While console.table gives us:

console.log-img14
console.log-img14
Image — 14

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"}
];
console.log-img15
console.log-img15
Image — 15

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"]);
console.log-img16
console.log-img16
Image — 16

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!

The Startup

Get smarter at building your thing. Join The Startup’s +786K followers.

Sign up for Top 10 Stories

By The Startup

Get smarter at building your thing. Subscribe to receive The Startup's top 10 most read stories — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Fatema T. Zuhora

Written by

Self-taught programmer, quick learner & Software Engineer with a can-do attitude.

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +786K followers.

Fatema T. Zuhora

Written by

Self-taught programmer, quick learner & Software Engineer with a can-do attitude.

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +786K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store