In web browser Console is a tool that help us to log information associated with a web page like: error, warning, network request etc. In javascript, the console is an object which provides access to the browser debugging console.
The console object provides us several different methods, like :
console.table(tabledata, tablecolumns)
- It prints data in a tabular form.
- tabledata - It should be either Object or Array.
- tablecolumns - It specify the name of the array property to print in table.It is an optional field and it's used only with Array of object.
console.table([{ name : "Nikhil", language : "Javascript" },
{ name : "Karkra", language : "Python" }]);
- If you see the below example we are passing the
name
as the tablecolumn. So, the table print only withname
property.
console.table([{ name : "Nikhil", language : "Javascript" },
{ name : "Karkra", language : "Python" }], ["name"]);
console.time(label) & console.timeEnd(label)
-
console.time()
method starts a timer in the console view. -
console.timeEnd()
method is used to end the timer and display the result in the console. - label - This parameter is use to give a name to the timer and it's an optional field.
function callApi(){
console.time('API TIMMER')
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => response.json())
.then(json => {
console.timeEnd('API TIMMER') //prints time taken by the API
console.table(json) // prints the response of API
})
}
callApi()
console.log(message)
- It prints message to the browser console. It is useful for testing.
console.log('Hurray!! We are JS developer')
console.warn(message)
- It prints a warning message to the browser console. It is very useful to warn for something like this API is deprecating in future or this attribute is required for accessibility.
console.warn('img elements must have an alt prop, either with meaningful text, or an empty string for decorative images')
console.error(message)
- It prints an error message to the browser console.
console.error('Server is not running!!')
console.info(message)
- It prints an information message to the console.
console.info('React 17 is available!!')
console.count(label)
- It prints the number of time this
console.count()
is called. It is very helpful to make sure if your particular function is called once or twice. You can add a label that will be included in the console. By default the label "default" will be added.
console.clear()
- It clears the console.Once this method get called it prints a message in the console: "Console was cleared".
console.clear()
console.assert(expression, message)
- It prints the message to the console if an expression evaluates to false
console.assert(2>3, '2 is not greater than 3')
console.group(label) & console.groupEnd(label)
-
console.group()
It indicated the start of a message group -
console.groupEnd()
It indicated the end of a message group - label - This parameter is use to give a name to the group and it's an optional field.
//First group
console.group("URL Details");
console.log("Request URL: https://dev.to");
console.log("Request Method: GET");
console.log("Status Code: 200")
console.groupEnd("URL Details");
//Second group
console.group("Author Details");
console.log('Author name: Nikhil karkra')
console.groupEnd("Author Details");
console.groupCollapsed(label)
- This is similar to
console.group
but it prints the collapsed message group. All messages print inside the group.
//First collapsed group
console.groupCollapsed("URL Details");
console.log("Request URL: https://dev.to");
console.log("Request Method: GET");
console.log("Status Code: 200")
console.groupEnd("URL Details");
//Second collapsed group
console.groupCollapsed("Author Details");
console.log('Author name: Nikhil karkra')
console.groupEnd("Author Details");
Top comments (16)
๐ง
developer.mozilla.org/en-US/docs/W...
and
console.spec.whatwg.org/
Are worth a read.
You missed out
console.dir()
, which is also quite a lot of fun.Nice post. Definitely some great console methods to know!
Logpoints are also pretty useful depending on your debugging style.
They've been available in VS Code since June of last year, but they also got introduced in Chrome 73, and added in FireFox 67.
How about console.log("%cWarning message", "font: 2em sans-serif; color: yellow; background-color: red;"); You could use colors in log.
I have use fee of them but I wasn't aware of
console.group
. Thanks for sharing.This post is really informative! Thanks for making this post.
Thank you..
Thank you, this is so helpful ๐๐ป
Wow. I literally knew one of these. console.log() Today I learned.
I just started using table few days back but this group looks even more interesting I'll start using it now
Very interesting, indeed. I'll try to give some of these a try when doing some work on JS