DEV Community

Cover image for There's more than just console.log()....other useful ways to use the console in javascript

There's more than just console.log()....other useful ways to use the console in javascript

Buddy Agyin 🦁 on September 30, 2020

Update: After some requests from some of you I also added some ways for you to style your console outputs. Check out Facebook's console to see styl...
Collapse
 
andrea_dispe profile image
Andrea Disperati

Hi, this article is going to be very useful, thank you.
I do have a question though. I encountered this problem not a long time ago but I couldn't find an answer to it.
When I run this on the Chrome console:

console.time("Timer1: ")
for(let i=0; i<100000; i++){
   console.log('test')
}
console.timeEnd("Timer1: ")
Enter fullscreen mode Exit fullscreen mode

it takes around 35 seconds to display on Chrome console the result which is around 5000 ms.
Does this mean that while the (V8?) takes 5 seconds to run the code, Chrome console is much slower to show the result of all iterations?

Collapse
 
matthewpardini profile image
Matthew Pardini • Edited

Printing to the console is slow. Yes. Have you tried the same thing without a .log in the loop? Probably much much faster

Collapse
 
andrea_dispe profile image
Andrea Disperati

Yep, just tried as you suggested and it turned out that an addition without console.log() is roughly 2500 times faster. I got it, thank you.

Thread Thread
 
matthewpardini profile image
Matthew Pardini

This isn’t specific to chrome

Collapse
 
mrzacsmith profile image
Zac Smith

Excellent, I love .table() and now I have some new console tools to use! Great job and great clarity in your style.

Collapse
 
developer_buddy profile image
Buddy Agyin 🦁

.table() has become one of my new favorites, it makes viewing datasets much easier

Collapse
 
tassoman profile image
Tassoman

Using console.info('my message') you can deliver my message πŸ˜†

Collapse
 
ipanardian profile image
Ipan Ardian

Nice info

Collapse
 
matthewpardini profile image
Matthew Pardini • Edited

I love using css colors and sizing in my logging when I have a lot of noise. console.log(β€œ%cMy Message”, color: β€œred”) will print a red colored My Message.

Thanks for the tips

Collapse
 
developer_buddy profile image
Buddy Agyin 🦁

This is something I actually didn't know was possible, thanks for that tip. I'll actually update the post to include this as well

Collapse
 
matthewpardini profile image
Matthew Pardini

Looks like I forgot my quotation marks around the color:red part. Check out facebook’s console sometime. It’s decked out (or at least it used to be, I don’t have fb anymore)

Collapse
 
simerca profile image
Ayrton

Can you expend your post with color syntaxes ?
Thank you so much, .table save my mind now ! πŸ˜‚

Collapse
 
developer_buddy profile image
Buddy Agyin 🦁

Yes, working on an update to include color syntax as well

Collapse
 
a_sandrina_p profile image
Sandrina Pereira

TIL about console trace and assert! Thank you!

Collapse
 
dilipchalamalasetty profile image
Dilip Chalamalasetty

Thanks for .table()😁

Collapse
 
katrinadierking profile image
Katrina Dierking

This is great information. I honestly had no idea. Thank you so much for sharing this.

Collapse
 
danielo515 profile image
Daniel RodrΓ­guez Rivero

I come here to see all the methods I already know, not expecting anything new, but I actually saw some that I didn't knew, so thank you.

Collapse
 
developer_buddy profile image
Buddy Agyin 🦁

I'm glad you were able to find some new methods on here

Collapse
 
martincleto profile image
S. MartΓ­n-Cleto

Thanks for that overview, console object is definitely underused. I also write 'console.count()' to get the times a function is called.

Collapse
 
hemalr profile image
Hemal

Fantastic - bookmarked!

Collapse
 
dionnyprensa profile image
Dionny Prensa

It is also possible to use console.log with JSON.stringify(someObject, null, 2)
Example

Collapse
 
alejandrowebdev profile image
Ale

My mind has been blown.

Great article indeed.

I actually learned stuff.

I did not know FB had styled the console like that!

Very useful console functions.

Thanks!

Collapse
 
andrea_dispe profile image
Andrea Disperati

the code is not the reason why it froze, it runs smoothly.

Collapse
 
rajasekharguptha profile image
Rajasekhar Guptha

Recently I accidentally came to know about these from MDN reference and thinking of making a post on this...
Anyway Nice post 🀍