DEV Community

loading...
Cover image for JavaScript developer must know these Console methods.

JavaScript developer must know these Console methods.

karkranikhil profile image Nikhil karkra ・3 min read

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" }]);

Alt Text

  • 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"]);

Alt Text

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()

Alt Text

console.log(message)

  • It prints message to the browser console. It is useful for testing.
console.log('Hurray!! We are JS developer')

Alt Text

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')

Alt Text

console.error(message)

  • It prints an error message to the browser console.
console.error('Server is not running!!')

Alt Text

console.info(message)

  • It prints an information message to the console.
console.info('React 17 is available!!')

Alt Text

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.

Alt Text

console.clear()

  • It clears the console.Once this method get called it prints a message in the console: "Console was cleared".
console.clear()

Alt Text

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')

Alt Text

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

Alt Text

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

Alt Text

References


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

Discussion (16)

pic
Editor guide
Collapse
gypsydave5 profile image
David Wickes

JavaScript Developer Must Know These Console Methods

🧐

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.

Collapse
nickytonline profile image
Nick Taylor (he/him)

Nice post. Definitely some great console methods to know!

The more you 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.

Collapse
akashkava profile image
Akash Kava • Edited

How about console.log("%cWarning message", "font: 2em sans-serif; color: yellow; background-color: red;"); You could use colors in log.

Collapse
delta456 profile image
Swastik Baranwal

This post is really informative! Thanks for making this post.

Collapse
uddeshjain profile image
Uddesh

I have use fee of them but I wasn't aware of console.group. Thanks for sharing.

Collapse
ksaroz profile image
Saroz Kumar

Thank you..

Collapse
pika1998 profile image
Prafulla Raichurkar

Thank you, this is so helpful 🙌🏻

Collapse
the_power_coder profile image
John Dorlus

Wow. I literally knew one of these. console.log() Today I learned.

Collapse
oathkeeper profile image
Divyesh Parmar

I just started using table few days back but this group looks even more interesting I'll start using it now

Collapse
jmmedina00 profile image
Juan Miguel Medina Prieto

Very interesting, indeed. I'll try to give some of these a try when doing some work on JS

Collapse
ianmarkind profile image
Collapse
kleene1 profile image
kleene1

Nice one :) will refer back for this 😄

Collapse
weylar profile image
Collapse
abbiranjan profile image
Alok Ranjan

Very nice article about console.
Thanks a lot.

Collapse
slch profile image
SLCH

Lies, react 17 isn't out yet.

Collapse
karkranikhil profile image
Nikhil karkra Author

It's just a demo...😂