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