DEV Community

Cover image for πŸ” 10+ Console Tricks Every JavaScript Developer Should Know (You're Probably Missing These!)
Raj Aryan
Raj Aryan

Posted on

πŸ” 10+ Console Tricks Every JavaScript Developer Should Know (You're Probably Missing These!)

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" }]);
Enter fullscreen mode Exit fullscreen mode

🧭 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();
Enter fullscreen mode Exit fullscreen mode

πŸ“Š 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();
Enter fullscreen mode Exit fullscreen mode

⏱️ 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");
Enter fullscreen mode Exit fullscreen mode

❗ 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!");
Enter fullscreen mode Exit fullscreen mode

πŸ” 6. console.count()

Log how many times something runs β€” handy for loops and conditionals.

function apiHit() {
  console.count("API Call Count");
}
apiHit();
apiHit();
Enter fullscreen mode Exit fullscreen mode

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)