console in JavaScript

Web console

A Web console is a tool which is mainly used to log information associated with a web page like: network requests, javascript, security errors, warnings, CSS etc. It enables us to interact with a web page by executing javascript expression in the contents of the page.

Console object

In javascript, the console is an object which provides access to the browser debugging console. We can open a console in web browser by using: Ctrl + Shift + K for windows and Command + Option + K for Mac. The console object provides us with several different methods, like :

  • log()
  • error()
  • warn()
  • clear()
  • time() and timeEnd()
  • table()
  • count()
  • group() and groupEnd()

Let’s look at all these methods one by one.

console.log()

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

filter_none

edit
close

play_arrow

link
brightness_4
code

// console.log() method
console.log('abc'); 
console.log(1);
console.log(true);
console.log(null);
console.log(undefined); 
console.log([1, 2, 3, 4]); // array inside log
console.log({a:1, b:2, c:3}); // object inside log

chevron_right


Output:

console.error()

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

filter_none

edit
close

play_arrow

link
brightness_4
code

// console.error() method 
console.error('This is a simple error'); 

chevron_right


Output:

console.warn()

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

filter_none

edit
close

play_arrow

link
brightness_4
code

// console.warn() method 
console.warn('This is a warning.'); 

chevron_right


Output:

console.clear()

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

filter_none

edit
close

play_arrow

link
brightness_4
code

// console.clear() method 
console.clear(); 

chevron_right


Output:

console.time() and console.timeEnd()

Whenever we want to know the amount of time spend by a block or a function, we can make use of the time() and timeEnd() methods provided by the javascript console object. They take a label which must be same, and the code inside can be anything( function, object, simple console).

filter_none

edit
close

play_arrow

link
brightness_4
code

// console.time() and console.timeEnd() method 
console.time('abc');
 let fun =  function(){
     console.log('fun is running');
 }
 let fun2 = function(){
     console.log('fun2 is running..');
 }
 fun(); // calling fun();
 fun2(); // calling fun2();
console.timeEnd('abc');

chevron_right


In the above code sample, we can see that the label is ‘abc’ which is same for both the time() and the timeEnd() method. If we increase the amount of code inside the block defined by these methods, then the time will increase. It is also worth remembering that the time returned to the console will be in milliseconds and might be different each time we refresh the page.
Output:

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

// console.table() method
console.table({'a':1, 'b':2});

chevron_right


Output:

console.count()

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


output:

console.group() and console.groupEnd()

group() and groupEnd() methods of the console object allows us to group contents in a separate block, which will be indented. Just like the time() and the timeEnd() they also accepts label, again of same value.

filter_none

edit
close

play_arrow

link
brightness_4
code

// console.group() and console.groupEnd() method
console.group('simple');
  console.warn('warning!');
  console.error('error here');
  console.log('vivi vini vici');
console.groupEnd('simple');
console.log('new section');

chevron_right


Output:



My Personal Notes arrow_drop_up

Executive Software Developer at Cavisson Systems

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.