Originally published on freeNodeCamp

As a web developer, you know very well the need to debug your code. We often use external libraries for logs, and to format and/or display them in some cases, but the console of our browsers is much more powerful than we think.

When we think about the console, the first thing that comes to mind and the console.log, right? But there are many more methods than those we imagine. Now we will see how to make the most of using the console, and I’ll give you some tips to make them these methods more readable

What is the Console?

The JavaScript console is a built-in feature in modern browsers that comes with out-of-the-box development tools in a shell-like interface. It allows a developer to:

Basically, it empowers you to write, manage, and monitor JavaScript right within your browser.

Console.log, Console.error, Console.warn and Console.info

These are probably the most used methods of all. You can pass more than one parameter to these methods. Each parameter is evaluated and concatenated in a string delimited by the space, but in case of objects or arrays you can navigate between their properties.



This method allows you to group a series of console.logs (but also error info, and so on) under a group that can be collapsed. The syntax is really very simple: just enter all the console.log we want to group before a console.group() (or console.groupCollapsed()if we want it to be closed by default). Then add a console.groupEnd() at the end to close the group.


The results will look like this:



Since I discovered the console.table my life has changed. Displaying JSON or very large JSON arrays inside a console.log is a terrifying experience. The console.tableallows us to visualize these structures inside a beautiful table where we can name the columns and pass them as parameters.