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");

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.

Exactly the same as 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");

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

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!");

This is how it looks on Chrome:

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!");

This is how it looks on Chrome:

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 }]);

How it looks on Chrome:

Or with an Object instead of an Array:

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();

How it looks on Chrome:

⭐ Bonus: `console.groupCollapsible()`



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

How it looks on Chrome:

Note: Isn't it elegant?

7. `console.time()`

Measure execution time.



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

How it looks on Chrome:

Note: Super useful.

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

Happy ~~coding~~debugging! 🚀

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

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.