by Yash Agrawal

How to use the JavaScript console: going beyond console.log()

zk96rNzoZkr6d0CVsUaJoNmkMBNsiarbBvRm

One of the easiest ways to debug anything in JavaScript is by logging stuff using console.log. But there are a lot of other methods provided by the console that can help you 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.

const foo = { id: 1, verified: true, color: 'green' };const bar = { id: 2, verified: false, color: 'red' };

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.

c220lbTo-NzOW5Q3jZr-sPJBZv5HeGad2Xx-
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({ foo, bar }); and the output is easily visible. This also reduces the number of console.log 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.table() . Here we can use console.table({ foo, bar}) and the console shows:

Wv3Q2yinN6TXt9ZHxRhcE8QSTlCVhyvMBizE
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.group('User Details');console.log('name: John Doe');console.log('job: Software Developer');
// Nested Groupconsole.group('Address');console.log('Street: 123 Townsend Street');console.log('City: San Francisco');console.log('State: CA');console.groupEnd();
console.groupEnd();
IRUQRsXWEuhhPwrr7H5IzT3nvvtmxY3axklR
Grouped logs

You can also use console.groupCollapsed() instead of console.group()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.warn() or console.error() . There’s also console.info() which displays an ‘i’ icon in some browsers.

7mhbJuMysLPrDtYAXvN7HDdbDFNTe64ZlK3D
warning and error logs

This can be taken a step further by adding custom styling. You can use a %c 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('%c Auth ',             'color: white; background-color: #2274A5',             'Login page rendered');console.log('%c GraphQL ',             'color: white; background-color: #95B46A',             'Get user details');console.log('%c Error ',             'color: white; background-color: #D33F49',             'Error getting user details');

You can also change the font-size , font-style and other CSS things.

1O8gEl3YMYTaBA6JAfXI-ZQY0x9LVBasnzKF
Styling console.log statements

console.trace()

console.trace() 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.trace() 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.time() allows timing of certain operations in the code for testing.

let i = 0;
console.time("While loop");while (i < 1000000) {  i++;}console.timeEnd("While loop");
console.time("For loop");for (i = 0; i < 1000000; i++) {  // For Loop}console.timeEnd("For loop");
x1xRANcn-DekwoMEL6tYgWmdZcNp7JKMNxOp
console.time() output for loops

Hopefully, the article provided some information on various ways to use the console. If you have any questions or want me to elaborate please leave me a note below or reach out to me on twitter or email.