Going beyond the old and boring console.log()

Every dev that has ever used JS / TS has used at least once in his life the famous console.log(), either to just go step by step of the code, to show a return message and more, but you there, did you know that there's much more than just the console.log() ?

Below you will find so options that can even help us when developing our code. But just making it clear, those are not all the options that exist. Let's check them out!👇

🤔 console.assert

The console.assert() is for checking some expression we pass and if it is false, we return a message in the terminal / console.

🧹 console.clear

This option is for, as the name suggests, clearing our console / terminal.

The console.clear() can be very nice at the end of our code where we can clear the terminal and not worry about it later.

➕ console.count

We can use console.count() to count how many times a function has been executed / called or how many times we have gone through that code already etc.

In this example, we just called console.count() 5 times, the result of this in our terminal will be as follows:

Another example is the following, where we can pass a text that will be displayed on the terminal along with the default count from the console.count() itself (this text is one of the parameters we can pass):

The result of this code in the terminal will be as follows:

⚠️ console.warn

We use console.warn() to pass warnings to the user or just to identify something that is not going well, in this case the text itself gets the color yellow.

And the result is:

In this case we manually execute the code by going to the browser console, but this command can be given in your JS code and be executed after the user does some action on your HTML page, for example sending forms or clicking on some button.

❌ console.error

Almost like console.warn the console.error serves precisely to show us possible errors on the console / terminal, this time the text will be colored red.

And the result is:

❓ console.info

Almost identical to the traditional console.log() that we normally use, in this case we can use the console.info() to really know that it is necessary information and better understand the code, because otherwise there are no differences like the previous examples where the color of the letters and other things end up changing. In Firefox and Chrome, a little “i” icon can be displayed next to the console log items.

📋 console.table

The console.table() can be a great help when we want to better visualize some information on the console, precisely by using the console.table() we will create a table on the console where we will see the information we pass to it.

And the result is:

It creates a table with two columns, one with the index of each element in the array and the data that is in each of those indexes.

Another example that we can explore is passing an object instead of array to console.table():

And the result is:

👥 console.group

With the console.group() we can group some information to be able to visualize it in the best way, in a way that we delimit these groups (in the following examples we will see this) and also to help the messages will be indented inside our console.group() to help our visualization even more.

And the result is:

🕑 console.time

Have you ever thought about seeing how long it takes for a certain part of your code to run completely? That’s what console.time() is for, it will show you at the end of everything how long it took to reach the end from the console.time() call to the console.timeEnd() call.

Inside console.time() we pass as parameter a name for our timer, so to speak, and in console.timeEnd() we pass the same name to indicate that the time counting should be finished.

And the result is:

🛣️ console.trace

With console.trace() we can trace how the code is executing, step by step.

In the example below, we will just create 2 functions, one function called func1 that will call the other function func2, which in turn will have a console.trace() .

And the result is:

We can notice that as commented it shows a trail of which functions have been called.

Conclusion

If you have any questions or want to share any tips, please leave a comment below. I would love to read your opinion and feedback!

Thanks for reading! Follow me in this platform to read more programming content. Have a great day, see you soon! 👋