console is an object which contain lot of useful method which help in debug the code by print the value in the web console.
Every console object method has its own benefits based on the usage factors. For example, if I just want to print something in the console the `log` method will be good.
But if i want to calculate the time taken by particular function then console.time() & console.timeEnd() will be used.
Now you want to open a console in your web browser then We can open a console in a 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()
log() is the most used console` method which you can easily learn to print messages on the web console. I hope everyone is familiar with our all-rounder console.log() method because it can print anything pass to it.
console.log(obj1 [, obj2, ..., objN]); console.log(msg [, subst1, ..., substN]);
But we also have some other methods like console.info(), console.warn(), console.debug() & console.error() which pretty much do the same thing.
But they print will their values in different color which gives us indication of different-different event.
For example, if we want to show an error event on the debugger console then console.error() method taking good care of it because we get a red color output in the debug console.
info() method of console is similar to console.log() as it also do the similar stuff but it outputs a informational message to web console.
As, you can not find any difference in chrome console between info() and log() method but if you check on firefox. You’ll find a small “i” icon to be displayed next to printed message in the Web Console’s log.
console.info(obj1 [, obj2, ..., objN]); console.info(msg [, subst1, ..., substN]);
But console.warn(), outputs a warning message with a small exclamation icon next to them in the Web Console log.
console.warn() method output message layer show in yellow colour.
console.warn(obj1 [, obj2, ..., objN]); console.warn(msg [, subst1, ..., substN]);
console.error() gives similar behavior as console.info() like that it outputs an error message with a small red cross x icon in the circle.
console.error() method output message layer show in red colour.
error() shows the indication to developer to take care of it before go to production level.
console.error(obj1 [, obj2, ..., objN]); console.error(msg [, subst1, ..., substN]);
Only use console.error() method in such a place where your condition or logic fails and not in acceptable condition.
console.debug() method also outputs a message in web console but at “debug” log level Which means that you can not easily see a console.debug() output.
To view a console.debug() output, you need to configure the console to display debug output.
console.debug(obj1 [, obj2, ..., objN]); console.debug(msg [, subst1, ..., substN]);
Let’s copy below code and paste it in debugger console and find out yourself the difference.
console.log('console.log'); console.info('console.info'); console.warn('console.warn'); console.error('console.error'); console.debug('console.debug');
As the name says `clear()` means clear or remove all the web console log which was previously printed if the environment allows it.
console.clear() come in handy when so much mess happens in the web console.
console.table() method is awesome because it provides a better readable presentation of the array or object. So, we always play with the object or array but sometimes it’s difficult to read.
But this method helps to convert an array or an object into a table where keys act as header and data reside in the rest of the table.
It requires mandatory argument data which can be array or object. Here is the syntax
console.count() method is used to log the number of times the call to
count() method executes. The function also accepts an optional argument
label is passed to console.count() method then the count() method logs the number of time it calls with particular
But if no label is passed to then `default` is shown before the count.
console.count(); // default: 1 console.count(); // default: 2 // or console.count('JS Startup'); // JS Startup: 1 console.count('JS Startup'); // JS Startup: 2
As the name suggests countReset that means console.countReset() the method is used to reset the count of a particular label which is incremented by the
It also have an optional argument
label which reset the count of defined label only.
console.count('JS Startup'); // JS Startup: 1 console.count('JS Startup'); // JS Startup: 2 console.countReset('JS Startup'); console.count('JS Startup'); // JS Startup: 1
console.assert() method also writes an error message which is similar to
console.error() and also prints the message with a red layer around it and outputs an error message with a small red cross x icon in the circle.
But it’s a conditional one which means it only prints when
console.assert() receives a
false the argument, but if it’s
true then nothing happens.
console.assert(assertion, obj1 [, obj2, ..., objN]); console.assert(assertion, msg [, subst1, ..., substN]);
console.assert(true === true, "JS Startup"); // Nothing print console.assert(true === false, "JS Startup"); // Assertion failed: JS Startup
console.trace() method shows the stack track to the web console which means how the code ends up at a certain point.
console.trace( [...any, ...data ]);
add calls an another function
sum then console.trace() method help to find out that sum is called from add function
console.time() method help to set a timer to track how long a particular operation takes.
It also has an optional label argument to pin point each timer with a unique name. But if you call console.timeEnd() with the same name pass to console.time() then it outputs the time in milliseconds.
The time which we get is an elapsed time since the timer started by console.time() method.
console.timeEnd() method stops the timer started by
console.time() method and return the elpsed time in milisecond.
We already discuss this in detail in point 11.
console.timLog() method is used to log the current value of defined timer which is started by console.time() method.
It does not interrupt the time but let you know the status of timer. A console.timeLog() also have a label argument.
console.group() method create a group messages. It also indicate the start the group of message.
After calling the
console.group() method, all the message written inside the group. Here is the syntax.
console.groupCollapsed() method is same as
console.group() but the group which is created with this method in the collapsed mode.
So, you need to click on disclosure button in order to show all the group messages. Here is the syntax.
console.groupEnd() method used to exist from the group which was either created by
Here is the syntax.
And last but not the least, don’t forget to like, comment and share. It gives us a morale boost to remain to continue. Also, join our Facebook Page
If you have any questions, please feel free to ask me in the comment section and also let me know if you have any suggestions. As suggestions are always welcome.