How to Improve Your Workflow Using the Javascript Console

From WikiHTP

As a web developer, you should know very well the need to debug your code. We often use external libraries for records, 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 of the console, the first thing that comes to mind and the console.log, right? But there are many more methods than we imagine. Now we will see how to get the most out of the useful consoles, and I will give you some tips to make these methods more readable.

What is the Console?[edit]

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

  • View a log of errors and warnings that occur on a web page.
  • Interact with the web page using JavaScript commands.
  • Debug applications and traverse the DOM directly in the browser.
  • Inspect and analyze network activity
  • Basically, it allows you to write, manage, and monitor JavaScript directly in your browser.

Console.log, Console.error, Console.warn, and Console.info[edit]

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 into a space-delimited string, but in the case of objects or arrays, you can navigate between their properties.

Console.group[edit]

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

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

Console.count, Console.time, and Console.timeEnd[edit]

These three methods are the Swiss army knife for every developer who needs to debug. The console.count counts and emits the number of times that count() has been invoked on the same line and with the same label. The console.time starts a timer with a specified name as an input parameter, and it can run up to 10,000 simultaneous timers on a given page. Once started, we use a call to console.timeEnd to stop the timer and print the elapsed time in the Console.

Console.trace and Console.assert[edit]

These methods simply print a stack trace from where it was called. Suppose you are creating a JS library and you want to inform the user where the error was generated. In that case, these methods can be very helpful. The console.assert is like the console.trace but it will only print if the condition passed has not passed.

As we can see, the output is exactly what React (or any other library) would show us when we raise an exception.

Delete all consoles[edit]

The use of consoles often forces us to eliminate them. Or sometimes we forget about building production (and we only realize it by mistake days and days later). Of course, I do not advise anyone to abuse consoles where they are not needed (the console on the shift input handle can be erased after seeing that it works). You should leave error logs or trace logs in development mode to help you debug. I use Webpack a lot, both at work and in my own projects. This tool allows you to delete all consoles that you do not want to remain (by type) from the production structure using the uglifyjs-webpack-plugin.

About This Tutorial

This page was last edited on 8 August 2020, at 23:46.