When we think of debugging in JavaScript, the first thing that pops into our minds is probably console.log()
β right? But what if I told you that console.log()
is just the tip of the debugging iceberg? π§
In this post, we're diving deep into some super underrated yet powerful console methods that can take your debugging skills from basic to beast mode. π§ π₯
Here are just a few console gems you need in your toolkit:
π 1. console.table()
Make your arrays and objects readable AF. Just look:
console.table([{ name: "React" }, { name: "Vue" }, { name: "Svelte" }]);
π§ 2. console.trace()
Want to see where a function was called from? This one shows the call stack:
function foo() {
console.trace("Tracing function call:");
}
foo();
π 3. console.group()
/ console.groupCollapsed()
Neatly nest your logs β perfect for large outputs!
console.group("App Init");
console.log("Loading config...");
console.log("Connecting to DB...");
console.groupEnd();
β±οΈ 4. console.time()
/ console.timeEnd()
Measure how long stuff takes β because performance matters.
console.time("Loop Time");
for (let i = 0; i < 1000000; i++) {}
console.timeEnd("Loop Time");
β 5. console.warn()
/ console.error()
Color-coded for clarity. Perfect when scanning logs.
console.warn("This is a warning!");
console.error("This is an error!");
π 6. console.count()
Log how many times something runs β handy for loops and conditionals.
function apiHit() {
console.count("API Call Count");
}
apiHit();
apiHit();
And guess what? Thereβs even more like:
-
console.clear()
π -
console.dir()
π -
console.assert()
β β -
console.info()
π‘
π‘ Ready to supercharge your debugging game?
π Iβve covered even more cool tricks, advanced techniques, and real-world use cases in my full write-up on Medium. Trust me, you donβt want to miss it!
π Read the Full Post on Medium β
π Let's Connect
Have any favorite debugging tricks of your own? Drop them in the comments!
π₯ Trending Hashtags:
#javascript
#webdev
#beginners
#debugging
#consolelog
#frontend
#productivity
#devtools
#100DaysOfCode
#codeNewbie
Let me know if you'd like to customize the Medium URL or add some visuals or memes to make the dev.to post even more engaging!
Top comments (0)