Mastering the JavaScript Console

Mastering the JavaScript Console

·

3 min read

The console object provides access to the browser's debugging console. The specifics of how it works varies from browser to browser, but there is a de facto set of features that are typically provided.⁣⁣ ⁣⁣ Today we'll be looking at the following methods:⁣⁣

  • console.log()⁣⁣
  • console.warn()⁣⁣
  • console.error()⁣⁣
  • console.clear()⁣⁣
  • console.time() & console.timeEnd()⁣⁣
  • console.table()⁣⁣
  • console.count()⁣⁣
  • console.group() & console.groupEnd()⁣⁣

console LOG

Mainly use to log(print) the output the console. We can put any type inside the log(), be it a string, array, object, boolean, etc.

console.log('@rahxul')
console.log(30);
console.log(true);

console WARN

Used to log warning message to the console. By default, the warning message will be highlighted with yellow colour.

console.warn('warn in console');

console ERROR

Used to log error message to the console. Useful in the testing of the code. By default, the warning message will be highlighted with red colour.

console.error('error in console!');

console CLEAR

Used to the clear console. In the case of chrome, a simple overlayed text will be printed like : 'Console was cleared' while in firefox no message is returned.

console.clear();

console TIME & TIMEEND

Whenever we want to know the amount of tie spend by a blog or a function, we can make use of the time() and timeEnd() methods provided by the console.

console.time('time');
const func = ( ) => console.log('func is running...'); 
const func2 = ( ) => console.log ('func2 is running...');
func();
func2();
console.timeEnd('time');

console TABLE

This method allows us to generate a table inside a console. The input must be an array or an object which will be shown as a table.

console.table( {a:1, b:2, c:3});

console COUNT

This method is used to count the number that the function hit by this counting method.

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

console GROUP & GROUPEND

These methods of the console object allow us to group contents in a separate block, which will be intended.

console.group( 'Group 1' ); 
     console.log( 'Simple log in a group' );
     console.group( 'Group1.1' );
          console.log( 'LSimple log in a subgroup' );
     console.groupEnd( 'Group1.1' );
console.groupEnd( 'Group 1' )
console.log( 'Outside the group!' );


⚡Happy Coding

Did you find this article valuable?

Support Rahul by becoming a sponsor. Any amount is appreciated!