Great list! When I'm debugging I often put a console.trace() within a console.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.
That's a neat debugging technique! Using console.trace() within console.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!
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 to console.log() across different browsers. Using emojis to differentiate log messages is a great idea—adds a bit of fun and clarity to debugging!
the JSON.stringify life 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)
Great points! While console.log is a go-to for many developers, exploring alternatives can significantly enhance productivity. Using console.dir() for detailed hierarchical listings and JSON.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!
Software developer of 2+ decades. Mostly backend web tech.
Currently focusing on Python, Learning Rust, and Generative AI.
Subscribe to my weekly AI newsletter for developers; https://devthink.ai
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!
Damilola Oshungboye is a software engineer focused on AI and backend systems, building production-ready LLM apps and workflows. He shares knowledge through talks and communities.
Currently building Litlyx, the simplest way to track website analytics without cookies. AI, FOSS & and Privacy-first. Find out more at Litlyx.com/philosophy. I build for many, not just one.
Name is Gad Iradufasha,
Web developer and System Analyst/Designer
Skills In web development are:
SEO ( Search Engine Optimization),
Building Websites & Web apps.
Visual artist.
Writing short stories based on my experience as a engineer and designer. You can also subscribe to Stef's Dev Notes, where you'll get each article in your inbox as soon as it gets published.
I am always enthusiastic about new technologies. My expertise is in frontend development. I am also eager about machine learning as its name bombers curiosity to new programmers.
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 use console.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()
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.
Programming is easy like riding a bike. Except the bike is on fire and you're on fire and everything is on fire and you're actually in hell (@matixmatix)
I'm a Computer Science enthusiast with a keen interest in Maths. I like to tinker with things around me & practise Sahaja Yoga meditation. Do follow me on GitHub https://github.com/Aatmaj-Zephyr
I'm a software engineer with 10+ years of experience mosty in Java. I'm an OCP11, Spring Professional 2020 and I am a Kong Champion. I am the owner of channel JESPROTECH on YouTube.
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.
I’m a software developer. I enjoy learning about technologies, as each offers a unique perspective to solving problems and challenges me. I find it rewarding to apply what I've learned.
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.
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.performance()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