? JavaScript Console Logging — Explained with Output

[Lomanu4]

console.log()


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

? Output:


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

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.

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.

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.

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.

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.

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.

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.

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.

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.