DEV Community

Arjun Vijay Prakash
Arjun Vijay Prakash

Posted on

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

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 -

Image

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");
Enter fullscreen mode Exit fullscreen mode

Image


2️⃣ console.warn();

Outputs a warning message to the console.

console.warn("WARNING");
Enter fullscreen mode Exit fullscreen mode

Image


3️⃣console.table();

Outputs a warning message to the console.

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

Image


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!");
Enter fullscreen mode Exit fullscreen mode

Image


5️⃣ console.info();

Outputs an informational message to the console.

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

console.info("Informational message");
Enter fullscreen mode Exit fullscreen mode

Image


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

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

Image

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)

Collapse
 
sucodelarangela profile image
Angela Caldas

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);
Enter fullscreen mode Exit fullscreen mode

Image description

Collapse
 
akashpattnaik profile image
Akash Pattnaik

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

Collapse
 
sucodelarangela profile image
Angela Caldas

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

Collapse
 
arjuncodess profile image
Arjun Vijay Prakash

This is some crazy thing!

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

Collapse
 
best_codes profile image
Best Codes • Edited
Collapse
 
arjuncodess profile image
Arjun Vijay Prakash

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

Collapse
 
best_codes profile image
Best Codes

Thank you!

Collapse
 
equiman profile image
Camilo Martinez

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

Collapse
 
arjuncodess profile image
Arjun Vijay Prakash

Glad you liked it!

This seems pretty cool, thanks for sharing.

Collapse
 
lionelrowe profile image
lionel-rowe • 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.
Collapse
 
arjuncodess profile image
Arjun Vijay Prakash

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

Collapse
 
jpschutte profile image
Jéan-Pierre Schutte

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.

Collapse
 
arjuncodess profile image
Arjun Vijay Prakash

Yeah! console.time is also a great function.

Thanks for the knowledge and for reading!

Collapse
 
d2g3000 profile image
Danny González

Me encanto el post

Collapse
 
arjuncodess profile image
Arjun Vijay Prakash

Contento de escuchar eso!

Collapse
 
arjuncodess profile image
Arjun Vijay Prakash

welcome!