10 JavaScript Console Tricks You Probably Didn’t Know

The Console object is one of the most underrated and under utilised features of JavaScript. Most of us don’t go beyond the simple console.log method of this object. However, knowing what you’ve in your arsenal makes a great difference when it comes to debugging you’re application.

For this post, I’ve compiled a list of 10 JavaScript console tricks which you might want to add to your arsenal.

1. console.log

Most of us are familiar with the plain and simple console.log method..

console.log('dead simple console output');

However, very few people know that we can do string interpolation with the console.log method.

const name = 'Harshal';
console.log('My name is %s', name);

The above code will produce following output in the console.

My name is Harshal

With the latest es6 features you can achieve the same result using template literals. The following code will produce exactly same result as the one with previous code.

const name = 'Harshal';
console.log(`My name is ${name}`);

You can also style your text within the console.log method.

console.log('%c My name is Harshal', 'color: #ff0000; font-size: 24px');

The output text produced by above code will have red color and font size of 24 pixels.

console.log usage

2. console.count

As the name suggests, this will count the number of times a particular call to count method has been made.

console.count('India');
console.count('Russia');
console.count('India');
console.count('India');
console.count('India');
console.count('Russia');
console.count('India');
console.count('Brazil');

The above code will produce the following output,

India: 1
Russia: 1
India: 2
India: 3
India: 4
Russia: 2
India: 5
Brazil: 1

3. console.time and console.timeEnd

console.time is used to start a timer and console.timeEnd is used to stop it. These methods can be quite useful when it comes to debugging performance issues.

console.time('myTimer');
setTimeout(() => console.timeEnd('myTimer'), 5000);

As the code suggests, console.time method will start a timer with name myTimer which will be stopped inside the setTimeout method after 5 seconds. The above code will produce an output which looks similar to one given below.

myTimer: 5000.453857421875ms

4. console.dir

console.dir outputs a hierarchical list of the properties of the JavaScript object under consideration.

const body = document.querySelector('body');
console.dir(body);

5. console.info, console.warn and console.error

console.info is used to display informational text to the browser console.

console.info("India is seventh largest country by landmass");

console.warn is used to display warning text to the browser console.

console.warn("you've been warned");

console.error is used to display errors to the browser console.

console.error("Random error just to frustrate you!");

6. console.assert

console.assert used to output an error when a specified condition returns false.

function isAdult (age) {
	console.assert(parseInt(age) >= 18, {"error": "not an adult!"});
}
isAdult(19);
isAdult(17);

In the above code isAdult(17) will throw an error as 17 is less then 18.

console.assert usage

7. console.group and console.groupEnd

group and groupEnd methods are used to organize the console output in different groups. console.group starts a group and console.groupEnd ends it. Both these methods accepts a string argument which serves as the group name.

console.group('India');
console.log('Mumbai');
console.log('Chennai');
console.log('Bangalore');
console.log('Hyderabad');
console.groupEnd('India');
console.group('Nepal');
console.log('Kathmandu');
console.log('Pokhara');
console.groupEnd('Nepal');

The above code will produce following output.

console.group and console.groupEnd usage

8. console.trace

trace can be used to track the whole function call stack.

function funcOne () {
	function funcTwo () {
		function funcThree() {
			console.trace();
		}
		funcThree();
	}
	funcTwo();
}
funcOne();
console.trace usage

9. console.clear

As the name suggests it simply clears the browser console.

console.clear();
console.clear usage

10. console.table

console.table method can be used to print table.

const people = [{name: 'John', age: 28}, {name: 'Brock', age: 19}, {name: 'Mike', age: 31}, {name: 'Ron', age: 59}]

console.table(people)

The above code will produce following output. 

console.table usage

That’s it! These are the console tricks which you can use to make the debugging process more efficient.

If you’ve any feedback or query about this post, feel free to let me know in the comments below.