Do you always use console.log in your projects during development?
And even though we will keep using console.log, there are other alternatives that will make your development more fun and productive.
NOTE: If you are viewing log in a terminal especially if you are a backend developer then you can try
JSON.stringify(your_data, null, 2)and useconsole.log()on the result. This will make sure that you don't get{... value: [Object, Object]}in the log and the log will also be formatted making it easier to read.
console.dir()
For hierarchical listing of arrays and objects.
console.dir(["apples", "oranges", "bananas"]);
console.table()
For rows and columns listing of arrays (might not be suitable for objects).
console.table(["apples", "oranges", "bananas"]);
console.table({"a": 1, "b": 2, "c": 3});
console.group()
console.log('This is the top outer level');
console.group('Task 1');
console.log('Task activity 1');
console.log('Task activity 2');
console.groupEnd();
console.group('Task 2');
console.log('Task activity 3');
console.log('Task activity 4');
console.groupEnd();
console.log('Back to the top outer level');
console.time() & console.timeEnd()
try {
console.time("record-1");
await someAsyncTask();
} catch (error) {
// handle error
} finally {
console.timeEnd("record-1");
}
console.clear()
This will clear the console.
I hope this was helpful! 🚀
Top comments (115)
Great list! When I'm debugging I often put a
console.trace()within aconsole.group(). This lets me provide identifying information at the group label, and be able to open the group to get to the detailed trace information without it blowing up the console.Haven’t heard about
console.trace(), that’s a gem! The more you know…Great
Great
That's a neat debugging technique! Using
console.trace()withinconsole.group()sounds really efficient for organizing and accessing detailed trace information without cluttering the console. Thanks for sharing this tip—it's definitely going to be useful in my debugging toolkit!Nice
There are many like
thanks for sharing
the article of 2024. 🤦♂️
There's also console.info() which is increasingly almost exactly the same as console.log(). Yes, now it seems, exactly the same on Chrome. Gets a blue icon in Safari. And gets a ⓘ icon in Firefox. (I usually use emojis to mark different log msgs - more variety.)
Thanks for pointing that out! It's interesting to see how
console.info()has become so similar toconsole.log()across different browsers. Using emojis to differentiate log messages is a great idea—adds a bit of fun and clarity to debugging!Great tips, I love them and I'll start using them every day.
the
JSON.stringifylife pro tip could also be applied to the browser environment when you're trying to log out something that has lost its reference due to garbage collection (for example, you try to log some value of an object before a page unload)Thanks for mentioning!
Great points! While
console.logis a go-to for many developers, exploring alternatives can significantly enhance productivity. Usingconsole.dir()for detailed hierarchical listings andJSON.stringify(your_data, null, 2)for formatted logs in the terminal are excellent practices. These methods improve readability and help prevent the clutter often associated with complex objects. Thanks for sharing these tips!Loved it! The console.table is really helpful!
I am surprised this existed
thanks for the post. So many
console.'s I didn't know about. I really likeconsole.group()to make the logs more readable.great list!
Some comments may only be visible to logged-in visitors. Sign in to view all comments.