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!");

🖥️ 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);

🖥️ 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");

🖥️ Output:

loadData: 4.56ms

(The number will vary depending on performance.)


4. 🧭 console.trace()

function first() {
  second();
}
function second() {
  third();
}
function third() {
  console.trace("Stack trace");
}
first();

🖥️ Output:

Stack trace
    at third (...)
    at second (...)
    at first (...)

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();

🖥️ Output:

▶ User Details
   Name: Prachi
   Role: Backend Dev

(Collapsible in browser console!)


6. 🧪 console.assert()

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

🖥️ Output:

Assertion failed: ❌ User is not logged in!

(No output if the condition is true.)


7. 🧼 console.clear()

console.clear();

🖥️ 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 🧙‍♀️