DEV Community

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

Arjun Vijay Prakash on March 21, 2024

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

Read full post

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.