DEV Community

loading...
Cover image for Mastering the JavaScript Console

Mastering the JavaScript Console

rahxuls profile image Rahul ・2 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);
Enter fullscreen mode Exit fullscreen mode

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');
Enter fullscreen mode Exit fullscreen mode

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!');
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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');
Enter fullscreen mode Exit fullscreen mode

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});
Enter fullscreen mode Exit fullscreen mode

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( ); 
}
Enter fullscreen mode Exit fullscreen mode

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!' );
Enter fullscreen mode Exit fullscreen mode



⚡Happy Coding

Discussion (2)

pic
Editor guide
Collapse
shrihankp profile image
Shrihan Kumar Padhy

console.trace() method is useful, magnificently useful, especially while debugging (yes i know that debugging is not like that, but still). It logs the value of a variable with a minimal representation of the call stack at the time when the function is called.

Collapse
rahxuls profile image
Rahul Author

Amazing bruh!!!