Console Methods In JavaScript

Introduction

Most developers limit their JavaScript console usage to the log method which is used to display the output in the browser console. Although the log method can get the job done the Console object comes bundled with a number of other features that remains unutilized.

In this tutorial, we'll go through 10 such features.

console.clear method

Let's start with a simple one. As the name suggests, the clear method is used to "clear" the console i.e. it removes all the previous output displayed on the console.

console.clear()

After executing the above code, it'll clear everything from the console output. And the text "Console was cleared" will appear.

10 JavaScript Console Tricks That You Didn't Know

console.count method

The count method is used to determine the number of times a specific instance of the count method was called. It accepts an optional parameter "label" in form of a string which is printed every time the method is called. If the user doesn't provide a label it simply prints default as the label.

for(let i = 0; i < 5; i++) {
console.count('i')
}

The above code will produce the following output on the screen,

Console objects also come bundled with a countReset method which as the name suggests resets the count.

for(let i = 0; i < 5; i++) {
if (i === 2) {
console.countReset('i');
}
console.count('i');
}

In the above code once the value of i reaches 2, it'll reset the counter.

console.table method

The table method is used to display an array in tabular format. This method accepts an array as parameters and displays that array in the console.

const countries = ['India', 'Russia', 'Canada', 'Australia'];
console.table(countries);

The above code snippet will produce the following output in the browser console.

You could also provide an array of objects to the table method.

const users = [
{ name: 'John', age: 20 },
{ name: 'Mike', age: 22 },
{ name: 'Harry', age: 30 },
{ name: 'Sarah', age: 25 },
{ name: 'Chris', age: 28 },
];
console.table(users);

The above code will produce the following output in the console window.

console.group and console.groupEnd methods

The group and the groupEnd methods are used to create collapsable groups of output displayed on the web browser console. The group method accepts an optional parameter called a label. The label is used to name the group.

console.group('Countries');
console.log('India');
console.log('Russia');
console.log('Canada');
console.log('Australia');
console.groupEnd();

The above code snippet will produce the following output,

You could also create nested groups,

console.group('Countries');
console.log('India');
console.group('Cities');
console.log('Pune');
console.log('Mumbai');
console.groupEnd();
console.log('Russia');
console.group('Cities');
console.log('Moscow');
console.log('Kazan');
console.groupEnd();
console.log('Canada');
console.group('Cities');
console.log('Waterloo');
console.log('Vancouver');
console.groupEnd();
console.log('Australia');
console.group('Cities');
console.log('Sydney');
console.log('Perth');
console.groupEnd();
console.groupEnd();

The above code will result in,

console.assert method

The assert method is used to conditionally display an error in the console. The first parameter to the method is an assertion and the second argument will be the message or object that needs to be displayed in the console if the assertion fails. If the result of the assertion is true nothing will be thrown at the console. However, if it's false the second argument passed to the assert method will be displayed with an error.

for (let num = 0; num <= 5; num++) {
console.assert(num % 2 === 0, `The ${num} is not even`);
}

In the above code snippet, the assertion will fail at 1, 3, and 5 since those are not even numbers.

console.time and console.timeEnd methods

As the name suggests time method starts the timer and the timeEnd method stops the timer. Both methods accept a parameter called the label. This label appears along with the time log in the browser console.

console.memory property

The memory property in the console object stores the heapSize. Could prove to be useful while debugging performance issues.

console.trace method

The trace method can be used to track down the function stack. When called it outputs the complete stack tree in the console of your web browser.

console.dir method

The dir method displays an interactive list of properties in a hierarchical format. This could be more useful if you're trying to view HTML elements in the console.

console.log method with CSS properties

As most of us already know the log method simply displays the value passed to it in the browser console.

But, what most people don't know is the log method also supports some amount of styling properties that could be applied to the text we want to display in the console.