DEV Community

Cover image for Stop console.log(). There are better ways!
OpenSource for Webcrumbs

Posted on • Edited on

Stop console.log(). There are better ways!

Hey devs! We all love console.log(), but there are other ways to debug in JavaScript. Let's level up!


Want to know more about what we're doing at Webcrumbs? 👀 We're all about JavaScript. Check out our GitHub here or go straight to our Discord. Your choice!


1. console.info()

Use this for general info messages.



console.info("Here's some info");


Enter fullscreen mode Exit fullscreen mode

Note: Mostly interchangeable with console.log(). So why use it? Let's say your company is hiring and want to call attention of devs. You can use console.info(). Then, if you use automation to clean up the console.logs to avoid putting them in production, you can leave the console.info() intact.

This is how it looks on Chrome.
Console info

Exactly the same as log.
Console log

But in some versions or other browsers the message may receive special formatting, such as a small "i" icon next to it. (Mozilla).


2. console.debug()

Perfect for detailed debugging.



console.debug("Debugging details here");


Enter fullscreen mode Exit fullscreen mode

This is how it looks on Chrome. Note that you'll only see it if you choose "All levels" of console log:

Console debug

Note: Since you can choose which ones to show in the level dropdown in your console tab, it's useful to have details as console.debug() instead of console.log(). Then you can show them only when you need them.


3. console.warn()

Highlight warnings.



console.warn("This is a warning!");


Enter fullscreen mode Exit fullscreen mode

This is how it looks on Chrome:

Console warn

Note: Calls a bunch of attention. Use it only when needed. Say there's a condition that you expect being true but shouldn't break if it isn't. You can use console.warn() to let you inspect it further.


4. console.error()

For errors and issues.



console.error("Something went wrong!");


Enter fullscreen mode Exit fullscreen mode

This is how it looks on Chrome:

Console error

Note: If warn calls a bunch of attention, error calls two bunches. Avoid it, except when absolutely needed. Perfect for try { //something } catch (error) { console.error(error) }.


5. console.table()

Display data in a table format.



console.table([{ name: "Alice", age: 30 }, { name: "Bob", age: 25 }]);


Enter fullscreen mode Exit fullscreen mode

How it looks on Chrome:

Console table

Or with an Object instead of an Array:

Console table

Note: This is one of my favorites. I like using it to debug all the variables I passed to a function. E.g. console.table(props).


6. console.group()

Organize your logs.



console.group("User Data");
console.log("User: Alice");
console.log("Age: 30");
console.groupEnd();


Enter fullscreen mode Exit fullscreen mode

How it looks on Chrome:

Console group

⭐ Bonus: console.groupCollapsible()



console.groupCollapsed("User Data");
console.log("User: Alice");
console.log("Age: 30");
console.groupEnd();


Enter fullscreen mode Exit fullscreen mode

How it looks on Chrome:

Console group collapsed

Note: Isn't it elegant?


7. console.time()

Measure execution time.



console.time("Timer");
someFunction();
console.timeEnd("Timer");


Enter fullscreen mode Exit fullscreen mode

How it looks on Chrome:

Console time

Note: Super useful.


Stop spamming console.log() and start using these powerful methods to debug smarter!

Happy codingdebugging! 🚀

GitHub logo webcrumbs-community / webcrumbs

Build, re(use) and share your own JavaScript plugins that effortlessly match your website's style. 🌟 Star to support our work!

We're super excited to announce that we're working on a major overhaul of the repository.
Right now, we're not accepting contributions, but this will change soon! 👀
Star the repository and sign up at webcrumbs.org to be the first to know when we launch



Webcrumbs Logo

Build, (re)use and share your own JavaScript plugins

Sign our newsletter      Join our Discord

Webcrumbs Screen




Vision

WebCrumbs aspires to be an industry-standard solution for modern web development, creating the first open ecosystem of plugins for the JavaScript community and related frameworks (like React, Nextjs, Vue, Svelte, and others). Whether you're a developer or not, you'll find it easy to create, manage, and extend your own websites with our intuitive admin panel and a rich ecosystem of plugins developed by the community.

Diagram



Your Support Matters

If you love what WebCrumbs is doing, consider starring us on GitHub. Your support is key to refining our product and growing our community. Star WebCrumbs on GitHub.

Star our repository


Help Us Grow

  • Star the repository: If you haven't yet (yes, you!), give us a


Top comments (6)

Collapse
 
omril321 profile image
Omri Lavi

Hey, thanks for sharing! I'd really like to know your opinion about when should we use each, and what each output looks like. Also, I wonder, is using these functions considered "non spammy"?

Again, thanks for sharing! :)

Collapse
 
opensourcee profile image
OpenSource • Edited

My opinion... Console (logs or other!) are for development, not production. One use in production I can see is to talk with devs. E.g. when your company is hiring. There's one other that became my favorite and I forgot putting on the list which is groupCollapsed().

Collapse
 
julianm1138 profile image
Julian M

I second this. Clear use cases and examples would be awesome! Thanks for the article.

Collapse
 
opensourcee profile image
OpenSource

Nice! Got it. I will try to make it more clear.

Thread Thread
 
julianm1138 profile image
Julian M

It looks so much better, great job

Collapse
 
gabirell profile image
Gabriel Andrés

Thanks for the info! very informative!