DEV Community

Cover image for Fun with console.log() 💿

Fun with console.log() 💿

Alicia Sykes on November 20, 2022

If you've ever developed a web app, you'll be familiar with console.log(...), the method which prints data to the developer console; useful for deb...
Collapse
 
iamjaydev profile image
iamjaydev •

I was looking for something like this...
Really great post!
Thanks 🙏🏻

Collapse
 
fnh profile image
Fabian Holzer •

Very valuable write-up and a reminder that learning the standard API yields high returns, because it's a safe bet that something like the Browser Console API stays around (and stable) for a - at least for from a developer's time scale - long time.

Collapse
 
dendihandian profile image
Dendi Handian •

This is 🔥🌊🍃⛰️

Collapse
 
kissu profile image
Konstantin BIFERT • • Edited

The dir one is quite useful for sure!
The styled ones are super dope too, love the effort put into styling them haha. 🤩

The Special Browser Methods is super welcome IMO because it's still quite unknown to most people + reminder that those are not secure in any way.

One other cool thing with the devtools is the fact that you can filter to keep only some pieces, and even have a negative filter to remove some of them (can be done with a right click too via hide messages from [...]).

Collapse
 
equiman profile image
Camilo Martinez •

Excellent article. I would like to add that this snippets extension has a lot of these console shortcuts.

marketplace.visualstudio.com/items...

Collapse
 
j471n profile image
Jatin Sharma •

This is cool no cap. However, How many people really use conosle.log like that?

P.S. - I was talking about colorful console.log not the other methods of console like warn, error and so on.

Collapse
 
lissy93 profile image
Alicia Sykes •

There's not many real-world uses for that one, I must admit. It's often used as part of a fun Easter egg, or to highlight something important for devs.

For example, if you go to facebook.com, and open the console, you'll see:

Image description

Or if you search "Text Adventure" in Google, you'll get a well formatted text-game
Image description

Collapse
 
j471n profile image
Jatin Sharma •

This was fun😂 and I didn't know about the Facebook one.

There's not many real-world uses for that one, I must admit.

That was my whole point.

Collapse
 
foxonthe1 profile image
Fox Scarlett •

Make certain stuff stand out etc

Collapse
 
tqbit profile image
tq-bit •

This post is going to be my week's favourite. Thanks for sharing 👍

Collapse
 
cerchie profile image
Lucia Cerchie •

What a fun thing to learn today! Thanks Alicia.

Collapse
 
lissy93 profile image
Alicia Sykes •

No problem :D

Collapse
 
pistolario profile image
Marcos Pérez •

hi!
Excellent article but, what browsers support each of these features? from which version?

Collapse
 
lissy93 profile image
Alicia Sykes •

Good question - it's a global standard (defined in here) so all modern browsers should support it, but here's the full breakdown.

Also, the Can I Use? website is very useful for checking which browsers support specific features :)

Collapse
 
sambayour profile image
Samuel Olubayo •

This is unbelievable. Thank you @lissy93 for sharing

Collapse
 
shaonkabir8 profile image
Shaon Kabir •

Awesome 🔥🔥

Cool 🎉
Image description

Collapse
 
itsraghz profile image
Raghavan alias Saravanan Muthu •

Good one. I really see the "table" is more worthy and the "dir" stuff. Also, you had clearly indicated the very important advice - as the last statement of your post :)

Collapse
 
olsard profile image
olsard •

Great post! Thanks a lot for sharing.

Collapse
 
bobbyiliev profile image
Bobby •

That is awesome!

Collapse
 
madza profile image
Madza •

This was an interesting read, thanks 👍💯✨

Collapse
 
andrewbaisden profile image
Andrew Baisden •

Wow, you made the console so much more fun than just simple debugging 😁 Pretty cool.

Collapse
 
dil2010 profile image
Dilan Udawattha •

This is very informative blog. Thank you.

Collapse
 
anderspersson profile image
Anders Persson •

So usefull thanks for this, a great pice,

Collapse
 
masekere profile image
Gift Masekere •

Great post, Though we usually use console.log(), sometimes assertion, counting, time stamping, etc. are useful

Collapse
 
foxonthe1 profile image
Fox Scarlett •

Awesome! Thank you , have a follow!

Collapse
 
jrazap profile image
Mohamed Elazap •

Awesome!

Collapse
 
rizkytegar profile image
🎉 Rizky Tegar Pratama •

great, I bookmarked this article

Collapse
 
vjnvisakh profile image
Visakh Vijayan •

Lovely article. Really appreciate the effort.

Collapse
 
sarma_akondi_746f338b83b7 profile image
Sarma Akondi •

Thanks a ton for sharing 🙌

Collapse
 
davepile profile image
davepile •

Great post. Thanks for reading the doco for me....

And then telling me I should read the doco

:)

Collapse
 
meganpaffrath profile image
Megan Paffrath •

🔥🔥🔥

Collapse
 
elyakub profile image
El-yakub •

Very good nice to read.

Collapse
 
jhonatasmatos profile image
Jhonatas Matos •

I believe we need to read more the documentation hahahhaha
I didnt know about that. It is really good!!!

Collapse
 
jorgezepeda profile image
Jorge Zepeda •

Great post!

Collapse
 
lee_tut profile image
Lee Twito •

Awesome! Thanks for sharing
time method definitely gonna save me some time

Collapse
 
raguram90 profile image
RamR •

thank you, it is very useful

Collapse
 
michburkhalter profile image
michburkhalter •

Awesome post, thanks a lot!

Collapse
 
elizcarvalho profile image
ElizCarvalho •

Incredible!!! 🙌🙌🙌🙌🙌
Thanks so much for sharing with us.

Collapse
 
pterpmnta profile image
Pedro Pimienta M. •

Great post. I didn't even know abot this feature.

Collapse
 
abdoka profile image
useBrain •

Very useful.
Thanks !

Collapse
 
victoreke profile image
Victor Eke •

How to use log commands like a pro. Nice article. ✨🙂

Collapse
 
aaronlyy profile image
Aaron Levi •

really nice post, thank you!

Collapse
 
koushikweb profile image
koushik chatterjee •

Wow! this is fantastic. I've never seen such things we can do with console.log() except dubbiging. Love it.

Collapse
 
hernanex97 profile image
hernanex97 •

So cool!

Collapse
 
zholadev profile image
zholadev •

Great!

Collapse
 
ff6k profile image
JoyL!fe.ff6k •

Great posts, learnt a lot, thanks.

Collapse
 
nigelreign profile image
Nigel Bongani Zulu •

this is amazing...thank you sharing

Collapse
 
asadheidari profile image
AsadHeidari •

so cool ✌️