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:

Result of using warn & log statement

📍 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:

log statement with styles

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

warn and error statements with styles

📍 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:

Object printed in a table

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

Multiple arrays in one table

📍 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.