DEV Community

Cover image for Use Javascript console like pro

Use Javascript console like pro

Suprabha on May 16, 2021

Every JavaScript developer has used `console.log("message")` . It provides a simple debugging console that is similar to the JavaScript console me...
Collapse
 
5alidshammout profile image
5alidshammout • • Edited

after I did this, my chrome went into a proplem

setInterval(() => {console.count()}, 0)

Collapse
 
sudarshansb143 profile image
sudarshan •

You will get dangerous email from Sundar Pichai :)

Collapse
 
5alidshammout profile image
5alidshammout •

what do you mean?

Thread Thread
 
iswiboni profile image
ISWIBONI •

its a joke

Collapse
 
mojosef profile image
mojosef •

3 days on — what’s the count?

Collapse
 
sunflower profile image
sunflowerseed •

lucky you are not spawning threads or processes

Collapse
 
steebe profile image
Stephen Bass •

It seems you found & implemented, and then rewrote this featured original article on Hacker News: news.ycombinator.com/item?id=26779800

If this is the case, I'm glad you got something from this, but why not credit the original author given how similar your post is?

Additionally, the post I'm linking to above is one of many similar articles that started getting popular in 2017/2018 (on the same note as @ra1nbow1 's comment here). At some point we have to acknowledge when we're steering away from the spirit of sharing information in pursuit of internet points.

Collapse
 
z2lai profile image
z2lai •

Great screenshots, the examples are very clear!

Your console screenshot for using console.dir() seems like it returns the same object format as using console.log(), instead of returning JSON. Is that how JSON looks like in the console? I'm not too sure what the difference is between console.dir() and console.log() on an object.

Collapse
 
brianarn profile image
Brian Sinclair •

console.dir isn't technically emitting JSON, it's more that it's providing a way to interactively navigate through that object's properties.

It's the default approach that console.log will use on objects, but you can see a clear distinction when you use a DOM node instead.

If you were to console.log(document.body), you get an interactive version of the DOM in the console, because the console standard says to use an optimally useful format, which for the DOM is the same as console.dirxml(document.body).

But, if you console.dir(document.body) instead of getting the DOM representation, you get an Object representation and can navigate through the properties of the Object.

Collapse
 
z2lai profile image
z2lai •

Thank you so much for the explanation, that is incredibly useful! I've always struggled with trying to read DOM element representations in console.

Collapse
 
ra1nbow1 profile image
Matvey Romanov •

One more post about JS console

Collapse
 
sunflower profile image
sunflowerseed •

ah... Javascript is spelled JavaScript... not that important but thought if we use it for 10 years, then may as well know the official name... I know... macOS, MacBook... it is all confusing...

Collapse
 
rishitkhandelwal profile image
Rishit Khandelwal •

cool methods, I must remember to use these

Collapse
 
enriqueedelberto profile image
Edelberto Enrique Reyes •

Thanks for sharing.

Collapse
 
__manucodes profile image
manu •

Wow! Never even knew most of these functions!
Thanks for sharing!

Collapse
 
steps0x29a profile image
Stefan Matyba •

Thanks, I didn't know most of that, but I'll remember for the next JS project

Collapse
 
suprabhasupi profile image
Suprabha •

I am really glad you find this post useful ☺️

Collapse
 
acahuiche profile image
Alberto Cahuiche •

Thanks, great info

Collapse
 
hasanmainul profile image
Hasan-Mainul •

it's really nice

Collapse
 
ghedwards profile image
Gareth Edwards •

what about console.trace() ?

Collapse
 
5alidshammout profile image
5alidshammout •
Collapse
 
suprabhasupi profile image
Suprabha •

mmmm, I haven't covered all console methods. There are few more methods, I just though to cover which I see using mostly in daily life

Collapse
 
zenel_bobi profile image
Zenel Bobi • • Edited

I usually just do this :

for ex.
console.log('user data =>' , userData);

Never needed the other ones :P

Collapse
 
yaireo profile image
Yair Even Or • • Edited

👉 github.com/yairEO/console-colors

Made this some years ago, to awesomely make colorful logs

🔥 Please checkout all my other 50+ repos which are also awesome and you shouldn't miss.

Collapse
 
grean profile image
Réan Guillaume •

It's nice until point 5 on ReactNative with Expo 41.
The rest of the console API are not implemented yet!

Collapse
 
chamampi profile image
Chamampi •

Awesome