Even though the most common practice while debugging javascript is to use a simple console.log
statement, and despite it gets the work done, there are more functional ways to do the task.
📍 Use warning & errors
This is the most simple yet effective way to differentiate among the debug messages, instead of using the console.log
statement, it is better to use console.warn
and console.error
console.warn("Message")
console.error("Message")
This would be the result:

📍 Add styles
Yes, it is possible to add styles on the debug messages
console.log('%c message', 'color: orange; font-size: 20px;')
As a result, the message outstand more among the others:

This can be applied to warn and error statements as well
console.error('%c message', 'color: green; font-size: 20px');
console.warn('%c message', 'color: pink; font-size: 20px');
They are really easy to spot

📍 Print a table
Instead of print a regular log, error or warn statement, objects, and arrays can be printed in a table to make it easier to analyze
character = {name: "Rick", lastname: "Sanchez", age: 70, job: "Scientist"}
console.table(character)
And that would show a cleaner result:

For arrays things get more interesting, it is possible to print several arrays in the same table:
sports = ['⚽️', '🥎', '🏉']
animals = ['🐰', '🐱', '🐶']
vehicles = ['🚗', '🚜', '🚚']
console.table([sports, animals, vehicles])
The table would show indexes and values of all of them

📍 Conclusion
The usual console.log
statement gets things done but for some cases is better to try other solutions, improving the debugging process is also part of to grow as a developer.