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
 
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
 
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
 
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
 
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
 
cerchie profile image
Lucia Cerchie

What a fun thing to learn today! Thanks Alicia.

Collapse
 
lissy93 profile image
Alicia Sykes

No problem :D

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
 
andrewbaisden profile image
Andrew Baisden

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

Collapse
 
madza profile image
Madza

This was an interesting read, thanks 👍💯✨

Collapse
 
olsard profile image
olsard

Great post! Thanks a lot for sharing.

Collapse
 
bobbyiliev profile image
Bobby Iliev

That is awesome!

Collapse
 
raguram90 profile image
RamR

thank you, it is very useful

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
 
elyakub profile image
El-yakub

Very good nice to read.

Collapse
 
aaronlyy profile image
Aaron Levi

really nice post, thank you!

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
 
meganpaffrath profile image
Megan Paffrath

🔥🔥🔥

Collapse
 
jorgezepeda profile image
Jorge Zepeda

Great post!

Collapse
 
elizcarvalho profile image
ElizCarvalho

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

Collapse
 
abdoka profile image
useBrain

Very useful.
Thanks !

Collapse
 
davepile profile image
davepile

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

And then telling me I should read the doco

:)

Collapse
 
victoreke profile image
Victor Eke

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

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
 
pterpmnta profile image
Pedro Pimienta M.

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

Collapse
 
michburkhalter profile image
michburkhalter

Awesome post, thanks a lot!

Collapse
 
rizkytegar profile image
🎉 Rizky Tegar Pratama

great, I bookmarked this article

Collapse
 
foxonthe1 profile image
Fox Scarlett

Awesome! Thank you , have a follow!

Collapse
 
jrazap profile image
Mohamed Elazap

Awesome!

Collapse
 
lee_tut profile image
Lee Twito

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

Collapse
 
nigelreign profile image
Nigel Bongani Zulu

this is amazing...thank you sharing

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
 
ff6k profile image
JoyL!fe.ff6k

Great posts, learnt a lot, thanks.

Collapse
 
zholadev profile image
zholadev

Great!

Collapse
 
hernanex97 profile image
hernanex97

So cool!

Collapse
 
asadheidari profile image
AsadHeidari

so cool ✌️