10 JavaScript Console Tricks That You Didn't Know

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.
  1. 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.
  1. for(let i = 0; i < 5; i++) {  
  2.     console.count('i')  
  3. }  
The above code will produce the following output on the screen,
 
10 JavaScript Console Tricks That You Didn't Know
 
Console objects also come bundled with a countReset method which as the name suggests resets the count. 
  1. for(let i = 0; i < 5; i++) {  
  2.     if (i === 2) {  
  3.         console.countReset('i');  
  4.     }  
  5.     console.count('i');  
  6. }  
In the above code once the value of i reaches 2, it'll reset the counter.
 
10 JavaScript Console Tricks That You Didn't Know
 

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.
  1. const countries = ['India''Russia''Canada''Australia'];  
  2. console.table(countries);  
The above code snippet will produce the following output in the browser console.
 
10 JavaScript Console Tricks That You Didn't Know
 
You could also provide an array of objects to the table method.
  1. const users = [  
  2.     { name: 'John', age: 20 },  
  3.     { name: 'Mike', age: 22 },  
  4.     { name: 'Harry', age: 30 },  
  5.     { name: 'Sarah', age: 25 },  
  6.     { name: 'Chris', age: 28 },  
  7. ];  
  8. console.table(users);  
The above code will produce the following output in the console window.
 
10 JavaScript Console Tricks That You Didn't Know
 

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.
  1. console.group('Countries');  
  2. console.log('India');  
  3. console.log('Russia');  
  4. console.log('Canada');  
  5. console.log('Australia');  
  6. console.groupEnd();  
The above code snippet will produce the following output,
 
10 JavaScript Console Tricks That You Didn't Know
 
You could also create nested groups,
  1. console.group('Countries');    
  2. console.log('India');    
  3. console.group('Cities');    
  4. console.log('Pune');    
  5. console.log('Mumbai');    
  6. console.groupEnd();    
  7. console.log('Russia');    
  8. console.group('Cities');    
  9. console.log('Moscow');    
  10. console.log('Kazan');    
  11. console.groupEnd();    
  12. console.log('Canada');    
  13. console.group('Cities');    
  14. console.log('Waterloo');    
  15. console.log('Vancouver');    
  16. console.groupEnd();    
  17. console.log('Australia');    
  18. console.group('Cities');    
  19. console.log('Sydney');    
  20. console.log('Perth');    
  21. console.groupEnd();    
  22. console.groupEnd();    
The above code will result in,
 
10 JavaScript Console Tricks That You Didn't Know
 

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.
  1. for (let num = 0; num <= 5; num++) {  
  2.     console.assert(num % 2 === 0, `The ${num} is not even`);  
  3. }  
In the above code snippet, the assertion will fail at 1, 3, and 5 since those are not even numbers.
 
10 JavaScript Console Tricks That You Didn't Know
 

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.
 
10 JavaScript Console Tricks That You Didn't Know
 

console.memory property

 
The memory property in the console object stores the heapSize. Could prove to be useful while debugging performance issues.
 
10 JavaScript Console Tricks That You Didn't Know
 

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.
 
10 JavaScript Console Tricks That You Didn't Know
 

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.
 
10 JavaScript Console Tricks That You Didn't Know
 

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.
 
10 JavaScript Console Tricks That You Didn't Know
 
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. 
 
10 JavaScript Console Tricks That You Didn't Know
 
%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.
 
10 JavaScript Console Tricks That You Didn't Know
 
Multiple styles could also be added by appending multiple %c to string.
 
10 JavaScript Console Tricks That You Didn't Know
 
Apart from the color property log method supports many more CSS styles. 
  1. let rules = [  
  2.   'color: #ff0000',  
  3.   'background: #000000',  
  4.   'font-size: 30px',  
  5.   'padding: 100px',  
  6.   'text-shadow: 1px 1px #808080',  
  7. ].join(';');  
  8.   
  9. console.log('%c Hello World', rules);  
The above code snippet will produce the following output on the browser console.
 
10 JavaScript Console Tricks That You Didn't Know
 
That's it! I hope you enjoyed this article, in case you've any queries or feedback, feel free to drop a comment. 


Recommended Ebook

Voice of a Developer: JavaScript From Scratch

Download Now!
Similar Articles