Do you always use console.log in your projects during development?
And even though we will keep using console.log, there are other alternatives th...
For further actions, you may consider blocking this person and/or reporting abuse
Great list! When I'm debugging I often put a
console.trace()within aconsole.group(). This lets me provide identifying information at the group label, and be able to open the group to get to the detailed trace information without it blowing up the console.Haven’t heard about
console.trace(), that’s a gem! The more you know…There are many like
the article of 2024. 🤦♂️
There's also console.info() which is increasingly almost exactly the same as console.log(). Yes, now it seems, exactly the same on Chrome. Gets a blue icon in Safari. And gets a ⓘ icon in Firefox. (I usually use emojis to mark different log msgs - more variety.)
Great tips, I love them and I'll start using them every day.
Loved it! The console.table is really helpful!
I am surprised this existed
this is very helpful, thank you!
Thank you for your useful tips
This so cool!
Really interesting
Thanks for this
Wow, that's cool. I saved it.
Really useful!
nice!
Very helpful. 💪🏼
Cool! Didn't use console.dir() and console.table(). It looks very useful!
nice
Wow! Super useful, thanks for sharing! :D
I just prefer to stop with a breakpoint and observe elements in the DevTools
Yeah, that is also a great way to debug. Thanks for mentioning Oskar.
There are many more, maybe you can make a follow up article? :)
Yeah sure! Thanks.
The
profilefunction is great: developer.mozilla.org/en-US/docs/W...I did not know about console.dir, thats super cool cause you know sometimes the terminal shows [Object] or [Array]
Yes, it does. Glad it helped Gregg!
Actually i am wrong, it still logs out Array and Object, so a pretty useless log for nested data:
I guess you are logging your data in a terminal and not a browser. So if it helps, I actually stringify my data using
JSON.stringify(your_data, null, 2)and useconsole.log()on that converted data in cases like these. Finally, you can then copy and paste that log in VSCode to format it depending on the size of the log.Console.dir not working same here :(
Are you using this on a backend?
No. Frontend 🙂
It should work, actually. Tried all of them, and they worked perfectly.
I'm done with
console. loghaha nice!
debugger;statement in our code to pause execution and inspect the state of variables and execution flow directly within our browser's developer tools or IDE debugger.Nice. Thanks for sharing!
Remembering to use all of this when working on a project might be impossible but I found this really helpful especially the
console.time()&console.timeEnd()Yeah lol I can relate. Glad it was helpful! Thanks.
Thanks! ❤️
You are welcome Aatmaj!
Thanks
You are welcome.
I didn't know about any of this. Great to know. This is very very helpful thank you! I usually only use console.log and I can see with your post what a bad idea actually is to only use that.
Thanks for sharing.
Very Helpful list. The article would have been complete if you shared the screen shot of output for console.group and console.time
Thank you. I have added screenshot of them.
These are very useful. They would make solving algorithms with JavaScript easier. Thank you so much @alishgiri
You are welcome! Elizabeth
These are the Well Good! But If you are working on server-side development or web dev development you can not use to debug you line of code.
Yes, when it comes to backend I prefer using
JSON.stringify(your_data, null, 2)and useconsole.log()on that converted data.What is group(), time() and time end() ?
group(): It will create different level of logs. It can be used when you are logging different section of the app and want to mark them separately by grouping them together.
time() & timeEnd(): It starts a timer to track how long an operation takes.
If you try the examples on a project that you are working on then it will be easier to understand.
Awesome content