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
- View a log of errors and warnings that occur on a web page.
- Debug applications and traverse the DOM directly in the browser.
- Inspect and analyze network activity
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.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.table allows us to visualize these structures inside a beautiful table where we can name the columns and pass them as parameters.
The result is wonderful and very useful in debugging:
These three methods are the Swiss army knife for every developer who needs to debug. The
console.count counts and outputs 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 name specified as an input parameter, and can run up to 10,000 simultaneous timers on a given page. Once initiated, we use a call to
console.timeEnd to stop the timer and print the elapsed time to the Console.
The output will look like this:
These methods simply print a stack trace from the point where it was called. Imagine you are creating a JS library and want to inform the user where the error was generated. In that case, these methods can be very useful. The
console.assert is like the
console.trace but will print only if the condition passed didn’t pass.
As we can see, the output is exactly what React (or any other library) would show us when we generate an exception.
Using consoles often forces us to eliminate them. Or sometimes we forget about the production build (and only notice them by mistake days and days later). Of course, I do not advise anyone to abuse consoles where they are not needed (the console in the change input handle can be deleted after you see 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 the consoles that you do not want to remain (by type) from the production build using the uglifyjs-webpack-plugin 😌
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
var debug = process.env.NODE_ENV !== "production";
minimizer: !debug ? [
// Compression specific options
// Eliminate comments
// remove warnings
// Drop console statements
})] : 
The configuration is really trivial and it simplifies the work, so have fun with the console (but do not abuse it!)