The Power of Browser Console

ByDiego Pinho in

The console is an incredible tool. Whether to run a code on the fly, inspect or interact with elements of a page, or even to check for error messages. The tool is a great and easier to use. After all, who ever used a console.log() to validate your code?

But while it is such a useful tool, few people know how to utilize their full potential. In this article, we’ll show you some of the cool features on the console that may come in handy in your day to day life.

Screen messages

The log method is by far the most famous method of the console and serves to display messages. However, along with the log, there are three more functions that do this:

  • warn
  • error
  • info

The difference is that each function displays the message in a different color format. In Google Chrome, for example, warn is yellow, error is red and info display in blue. This varies by browser.

Arrays in tables

A very recurring task when developing applications for the web is asking the console to display an array. We were able to use the log method (or any of the others we just saw) to do this, but with the table method we got a much better view.

Message grouping

Another very useful feature is grouping messages. With it, we can give better contexts to the messages that are displayed on the console by encapsulating them in groups. To do this, we simply use the group and groupEnd function, passing as a parameter to both the corresponding group name.

Metrics

One way to measure the efficiency of our algorithms is by measuring the time it takes to run. The console has a function exactly for that, the time. It works much like the group. We pass as argument the name of the identifier of that measure in the team and the end in the timeEnd function.

Conclusion

These were just a few examples of features that the browser console has and few know about. There are a number of other features that have not been addressed, such as using template strings, page editing, event monitoring, etc. We will explain them in another article.

To learn more about the console, visit the specification website here.

Leave a comment! 0

read more