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