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…Great
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!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.great list!
Thank you for your useful tips
Really useful!
Thanks for this
Thanks so much! <3
Great Article!
Thanks so much for your posting.
*-)
I really like console.table()
I like this post!
this is very helpful, thank you!
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 interesting
very nice, a loot thanks
You are welcome!
Console.log("GEM")
I only knew the
console.logand used it for everything, good article, you open my eyes :)Awesome.. ! :)
This is so cool!
Insightful to read!
This so cool!
Wow, that's cool. I saved it.
Thank you!
WOW, I didn't know about that at all.
Great content, I will definitely use it during my work
Wow, definetly going to make use of that!
Thanks
Great 👌,I don't use console.table before
I love this great
Thank you!
I always eat and drink with console.log() when debugging.. Thanks for the tip
nice!
Very helpful. 💪🏼
Cool! Didn't use console.dir() and console.table(). It looks very useful!
nice
Wow! Super useful, thanks for sharing! :D
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...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
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.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.
I'm done with
console. loghaha nice!
Nice list! Also, recently a port of the Console API was developed for PHP, quite interesting!
nice!
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 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.
Good to know about console.clear i had no idea i could control that
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!
Thank you !👍
its useful..
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.
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.
Thanks. You've just expanded my knowledge on console.log()
You are welcome.
Very informative
These are very useful. They would make solving algorithms with JavaScript easier. Thank you so much @alishgiri
You are welcome! Elizabeth
Awesome content
Great. But I use “Console Ninja” to see my console on the IDE on the go.
Nice!
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.👍 Great
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!
good info
This is indeed useful if you are trying to debug in the consoles and etc. Great!
This is helpful
console.dir(["apples", "oranges", "bananas"]);
Is terminator important?
Yes, it is.
I am new one that's why I am asking
Thank you!