JavaScript developer must know these Console methods.

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 with name 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");

References

https://developer.mozilla.org/en-US/docs/Web/API/Console