Stop using console.log for everything 🙄. I have seen and continue to see many developers regularly use the console object’s log method in a way that I think is incorrect.
Using console.log for debugging
Many developers still use the log method to debug their application. For example, to make sure that the code goes somewhere or that a variable has the right value at a given time.
There are several downsides to this.
You have no view on the whole life cycle of your application, only on the value of a variable at a given time or the assurance or not that your code is following its logical flow.
It often happens that console.log are forgotten in several places in the code, which besides a hypothetical loss of performance (tiny, but whose size varies according to the data called through the log method), is not very clean.
The solution is to use the debugging tools provided by your browser. It may take a little bit of learning, but the rewards outweigh the effort 🚀.
This way you will have full control over the life cycle of your code and avoid forgetting your console.log in your code.
See: Debug JavaScript with the Chrome DevTools or Use the JavaScript debugger by Mozilla Firefox.
Using only the method log
Again, many developers use console.log to display any kind of message: information, error, warning, etc.
The console object that gives access to the debugging console of the browser has many methods with very specific uses.
Here is an exhaustive list of the most frequently used methods:
console.error → Shows an error message
console.warn → Shows a warning message
console.info → Shows an informative message (special rendering on Firefox, but technically identical to log method)
console.log → Shows a global message
console.debug → Shows a message to the console with the log level debug
console.table → Shows data of an array/object as a table
console.time (with console.timeEnd) → Allows you to set a timer to see how long a task needs to be completed.
The specific case of the debug method
Personally, I consider the use of the debug method in three different situations.
In the first case, we want to display a piece of information quickly on the screen (e.g. the value of a variable). Even if it is not optimal, the logging level of this method makes the message remain “hidden” by default to the user (except if the verbose mode of his console is activated).
In the second case, we want to use the method as an anchor to our source file (we can use the debugger statement too if you want but personally I don’t like it).
In the third case, we want to use an on-demand debugging log system in production. For example, a function registered directly in the window object can trigger a log display in the user’s console. This use case can be useful when we don’t have pre-production environments at our disposal and when a bug raised by a customer is difficult to reproduce in a development environment.
Remove console.debug from production
Except if you are in the third case we just saw, I advise you to use something like a git pre-commit hook or plugin to check methods or keywords you don’t want to appear before the production release.
You can use UglifyJS to filter on these keywords.
Thank you for reading 🙏.
Feel free to share and/or follow this account. It would be very helpful 😁
Written by: benlmsc
