Arjun Vijay Prakash

Posted on Mar 21

console.log() is OLD! Use These 5 Console Hacks! 😎

#webdev #javascript #programming #beginners

Are you still using console.log for all your JavaScript needs in 2024?

It's time to upgrade.

If you console.log() the console object, the following would be the output -

Your first time seeing this many functions inside the console object, right?

One of the biggest problems with using just console.log is that it's not very informative on its own.

It just outputs the value of whatever you pass to it without any context or additional information.

In this post, let us explore some of them, which can actually replace the need to use console.log().

[not really, this classic function is just way, way better than others]

1️⃣ console.error();

Outputs an error message to the console.

console.error("ERROR");

2️⃣ console.warn();

Outputs a warning message to the console.

console.warn("WARNING");

3️⃣console.table();

Outputs a warning message to the console.

console.table([{ name: 'John', age: 30 }, { name: 'Jane', age: 25 }]);

4️⃣ console.assert();

Logs a message to the console only if an expression evaluates to false.

console.assert(2 + 2 === 5, "Error: Math is broken!");

console.assert(2 + 2 === 4, "Error: Math is broken!");

5️⃣ console.info();

Outputs an informational message to the console.

To be honest, this is a console.log() in disguise.

console.info("Informational message");

BONUS: 6️⃣ console.log( {} );

Try to put an object inside the console.log() parameter. It will make the output more readable.

Just see the difference!

🙌 Final Thoughts

In 2024, don’t just use console.log - there are many more powerful and valuable functions available.

From console.table() to console.assert(), these methods will help you make it easier to troubleshoot and fix problems in your code.

Develop your debugging skills in 2024 by trying these techniques! (Your future self will definitely thank you.)

And also, share your favourite web dev resources to help the beginners here!

Connect with me @ Linktree.

Happy Coding! 🚀
Thanks for 23957! 🤗

Top comments (17)

Angela Caldas • Mar 22

Nice! I have never paid attention to console.assert(), it's news to me.

One nice thing about console.log() is that you can add some styles to the message, like colors and font-sizes, by using the specifier %c and an inline style or style object:

// Inline style
console.log('%cHello world', 'color: green; background: orange; font-size: 32px');

// style object
const styles = [
  'color: green',
  'background: orange',
  'font-size: 32px',
  'border: 1px solid tomato',
  'text-shadow: 2px 2px brown',
  'padding: 16px',
].join(';');

console.log('%cHello There', styles);

Akash Pattnaik • Mar 22

Wow, this is the first time I'm seeing this. This is really amazing

Angela Caldas • Mar 22

I've only learned about it recently, it's a really nice feature for messages, warnings and stuff :)

Arjun Vijay Prakash • Mar 24

This is some crazy thing!

I didn't knew this existed. Thanks for the knowledge for reading this article!

Best Codes • Mar 22 • Edited

Seems like I made a post about this really recently…

🚀 You just use console.log? Buckle up, console newbie! 🤯

Best Codes ・ Mar 20

#webdev #javascript #beginners #programming

Arjun Vijay Prakash • Mar 25

I really admire your writing skills, keep up the good work!

Best Codes • Mar 25

Thank you!

Camilo Martinez • Mar 23

Wow, excellent visual explanation 👏👏👏.

I would like to recommend this vscode extension. It also includes wrapping some console functions like profile, time, and group wrappers.

marketplace.visualstudio.com/items...

Arjun Vijay Prakash • Mar 24

Glad you liked it!

This seems pretty cool, thanks for sharing.

lionel-rowe • Mar 22 • Edited

Even though it's just console.log in disguise, I find console.info is quite useful if you use the following convention:

console.log should never make it to production. It shouldn't be committed, and if it's found in a pull request, it won't pass review (this can also be supported by linter rules etc).
Everything that's intended to be printed to the console in production uses console.info. For typical web apps this is usually very little, and for libraries it should usually be nothing at all. For CLI apps, it might be used much more liberally. But in all cases, it's easy to distinguish from temporary log statements used for debugging.

Arjun Vijay Prakash • Mar 25

Oh, didn't knew that! Thanks for the explanation and for reading!

Jéan-Pierre Schutte • Mar 23

I'm a weird, console fan boy, so this post attracted my attention. Great article, but if i may, I'd also suggest console.trace and console.group. These bad boys are super helpful when debugging.

When a common, usually helper function, gets called from different parts. Console.trace has been a life saver.

When console logging invidiual steps in a forloop (and you don't want to use debugger) then console.group becomes super useful at grouping your logs.