DEV Community

Cover image for JavaScript Console Tricks Every Dev Should Know
Prachi Gupta
Prachi Gupta

Posted on

JavaScript Console Tricks Every Dev Should Know

#javascript #console #webdev #programming

The console object in JavaScript is way more than just console.log(). Let's explore some powerful tricks every dev should know—with actual outputs!

1. 🚦 Different Types of Logs 

console.log("General log"); console.info("Informational message"); console.warn("Warning alert"); console.error("Something went wrong!");
Enter fullscreen mode Exit fullscreen mode

🖥️ Output:

  • ✅ console.log: Regular white text
  • ℹ️ console.info: Blue info icon (browser-dependent)
  • ⚠️ console.warn: Yellow warning with a triangle icon
  • ❌ console.error: Red error with a cross icon

2. 📊 console.table() 

const users = [ { name: "Prachi", role: "Dev" }, { name: "Raj", role: "Tester" } ]; console.table(users);
Enter fullscreen mode Exit fullscreen mode

🖥️ Output:

(index) name role
0 Prachi Dev
1 Raj Tester

So clean and readable!

3. ⏱️ console.time() + console.timeEnd() 

console.time("loadData"); for (let i = 0; i < 1000000; i++) {} console.timeEnd("loadData");
Enter fullscreen mode Exit fullscreen mode

🖥️ Output: 

loadData: 4.56ms
Enter fullscreen mode Exit fullscreen mode

(The number will vary depending on performance.)

4. 🧭 console.trace() 

function first() { second(); } function second() { third(); } function third() { console.trace("Stack trace"); } first();
Enter fullscreen mode Exit fullscreen mode

🖥️ Output: 

Stack trace at third (...) at second (...) at first (...)
Enter fullscreen mode Exit fullscreen mode

Gives you the full call stack to debug call flow 🔍

5. 🔄 console.group() + console.groupEnd() 

console.group("User Details"); console.log("Name: Prachi"); console.log("Role: Backend Dev"); console.groupEnd();
Enter fullscreen mode Exit fullscreen mode

🖥️ Output: 

▶ User Details Name: Prachi Role: Backend Dev
Enter fullscreen mode Exit fullscreen mode

(Collapsible in browser console!)

6. 🧪 console.assert() 

const isLoggedIn = false; console.assert(isLoggedIn, "❌ User is not logged in!");
Enter fullscreen mode Exit fullscreen mode

🖥️ Output: 

Assertion failed: ❌ User is not logged in!
Enter fullscreen mode Exit fullscreen mode

(No output if the condition is true.)

7. 🧼 console.clear() 

console.clear();
Enter fullscreen mode Exit fullscreen mode

🖥️ Output:

👉 Console is instantly cleared (poof! ✨)

🌟 Final Words

The console isn't just for dumping data—it's a powerful tool to help you debug smarter, not harder. Try these tricks in your next project, and you'll feel like a true console wizard 🧙‍♀️

Top comments (0)