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)