BAVITHRA GUPTHA

Posted on May 10

🛠 JavaScript Console Logging — Explained with Output

1️⃣ console.log()

console.log("Hello, World!");
console.log({ name: "Alice", age: 25 });

🧾 Output:

Hello, World!
{ name: "Alice", age: 25 }

2️⃣ console.table()

const users = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 30 }
];
console.table(users);

🧾 Output:

(index) name    age
0   Alice   25
1   Bob 30

✅ Easy-to-read tabular view of array/object data.

3️⃣ console.warn()

console.warn("This is a warning!");

🧾 Output:

⚠️ This is a warning!   // in yellow with a warning icon

✅ Highlights potential issues, but doesn't stop execution.

4️⃣ console.error()

console.error("An error occurred!");

🧾 Output:

❌ An error occurred!   // in red with an error icon and often a stack trace

✅ Ideal for actual problems that need fixing.

5️⃣ console.group() and console.groupEnd()

console.group("User Info");
console.log("Name: Alice");
console.log("Age: 25");
console.groupEnd();

🧾 Output:

▼ User Info
  Name: Alice
  Age: 25

✅ Collapsible groups help organize logs logically.

6️⃣ console.groupCollapsed()

console.groupCollapsed("API Response");
console.log("Status: 200 OK");
console.log("Data: {...}");
console.groupEnd();

🧾 Output:

▶ API Response
✅ Output is collapsed by default — neat and expandable.

7️⃣ console.time() and console.timeEnd()

console.time("Fetch Time");
setTimeout(() => {
  console.timeEnd("Fetch Time");
}, 500);

🧾 Output:

Fetch Time: 500.123ms

✅ Quickly measure how long operations take.

8️⃣ console.trace()

function a() {
  b();
}
function b() {
  console.trace("Trace log:");
}
a();

🧾 Output:

Trace log:
    at b (<anonymous>:4:11)
    at a (<anonymous>:2:3)
    at <anonymous>:6:1

✅ Helps track the function call path.

9️⃣ console.assert()

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

🧾 Output (only if condition is false):

Assertion failed: User is not logged in!

✅ Logs only if condition is false — useful for testing assumptions.

🔟 console.clear()

console.clear();

🧾 Output:

Console cleared

✅ Clears previous logs — great for debugging fresh output.

🧠 BONUS: Styled Console Logs

console.log("%cStyled log!", "color: green; font-size: 18px; font-weight: bold;");

🧾 Output:

A green, bold, large "Styled log!" message in the console.

✅ Adds visual emphasis to key logs.

DEV Community