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