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.
After executing the above code, it'll clear everything from the console output. And the text "Console was cleared" will appear.
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.
%c is used to specify the starting point from where CSS rules will be applied.
You could also add %c in the middle of a string.
Multiple styles could also be added by appending multiple %c to string.
Apart from the color property log method supports many more CSS styles.
- let rules = [
- 'color: #ff0000',
- 'background: #000000',
- 'font-size: 30px',
- 'padding: 100px',
- 'text-shadow: 1px 1px #808080',
- ].join(';');
-
- console.log('%c Hello World', rules);
The above code snippet will produce the following output on the browser console.
That's it! I hope you enjoyed this article, in case you've any queries or feedback, feel free to drop a comment.
Jayeshkumar SahaniPosted Feb 8, 2021, 6:25 AM
It is very helpful
Rijwan AnsariPosted Feb 6, 2021, 3:47 PM
Wow, we use console only for log. Good to know that we can many other things.
Alok UniyalPosted Jan 20, 2021, 10:34 AM
Nice tutorial. Thanks.
Madhan ThuraiPosted Jan 19, 2021, 6:11 AM
Simply awesome. (Y)