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
Displaying a subset of the total comments. Please sign in to view all comments on this post.
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.Great
That's a neat debugging technique! Using
console.trace()withinconsole.group()sounds really efficient for organizing and accessing detailed trace information without cluttering the console. Thanks for sharing this tip—it's definitely going to be useful in my debugging toolkit!Nice
There are many like
thanks for sharing
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.)
Thanks for pointing that out! It's interesting to see how
console.info()has become so similar toconsole.log()across different browsers. Using emojis to differentiate log messages is a great idea—adds a bit of fun and clarity to debugging!I'm a big fan of emojis in log messages, makes it so much easier to skim through console output
Great tips, I love them and I'll start using them every day.
the
JSON.stringifylife pro tip could also be applied to the browser environment when you're trying to log out something that has lost its reference due to garbage collection (for example, you try to log some value of an object before a page unload)Thanks for mentioning!
Great points! While
console.logis a go-to for many developers, exploring alternatives can significantly enhance productivity. Usingconsole.dir()for detailed hierarchical listings andJSON.stringify(your_data, null, 2)for formatted logs in the terminal are excellent practices. These methods improve readability and help prevent the clutter often associated with complex objects. Thanks for sharing these tips!Loved it! The console.table is really helpful!
I am surprised this existed
thanks for the post. So many
console.'s I didn't know about. I really likeconsole.group()to make the logs more readable.Wow, that's cool. I saved it.
Also
console.performce()it's quite useful :)very nice, a loot thanks
You are welcome!
I just prefer to stop with a breakpoint and observe elements in the DevTools
That's a smart approach! Using breakpoints in DevTools is a great way to inspect elements and understand their behavior step by step. It allows for precise debugging and ensures a thorough understanding of the code's execution. Happy debugging!
GGreat
Yeah, that is also a great way to debug. Thanks for mentioning Oskar.
Nice
Nice
Really useful!
Thank you for your useful tips
nice article 👍
Json.stringfy was a good catch for logging error instead of [object object] !
Thanks for this
this is very helpful, thank you!
This so cool!
great list!
Really interesting
Thanks so much! <3
Console.log("GEM")
Great Article!
Thanks so much for your posting.
*-)
I really like console.table()
This is so cool!
Awesome.. ! :)
I only knew the
console.logand used it for everything, good article, you open my eyes :)Insightful to read!
I like this post!
Thank you!
Wow, definetly going to make use of that!
Wow! Super useful, thanks for sharing! :D
I always eat and drink with console.log() when debugging.. Thanks for the tip
WOW, I didn't know about that at all.
Great content, I will definitely use it during my work
nice
Cool! Didn't use console.dir() and console.table(). It looks very useful!
Very helpful. 💪🏼
nice!
Great 👌,I don't use console.table before
Thanks
Mah GAWWDD!!
Didn't ever know these things existed in JS.
console.group is terrific
I love this great
Thank you!
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...Thanks for this hint!
I think that trying these options within the Turbo Console Log vscode extension can be an interesting combo too!
Nice. Thanks for sharing.
A few more have been covered in the below article:
medium.com/@abhinavnigam2207/conso...
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.As seasoned web developers, relying solely on console.log() limits our ability to gain comprehensive insights during debugging. Thankfully, there are more sophisticated logging techniques and tools that enable us to go beyond basic logs, offering enhanced error tracking and performance monitoring to improve overall development efficiency
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.
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.
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!
I'm done with
console. loghaha nice!
Nice list! Also, recently a port of the Console API was developed for PHP, quite interesting!
nice!
Good to know about console.clear i had no idea i could control that
Great
Thank you !👍
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.
Thanks
You are welcome.
Thanks! ❤️
You are welcome Aatmaj!
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.
its useful..
This is indeed useful if you are trying to debug in the consoles and etc. Great!
This is helpful
Great. But I use “Console Ninja” to see my console on the IDE on the go.
Nice!
helpful
Idk if I am right? Is it to make the website least vulnerable?
Actually, these are just to make development easy and has nothing to do with website vulnerability.
These are very useful. They would make solving algorithms with JavaScript easier. Thank you so much @alishgiri
You are welcome! Elizabeth
Awesome content
Quick and straight to the point, I like it! I'll be using console.group() from now to keep the console more organized :)
Glad it helped!
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.
Very informative
👍 Great