Understanding console Methods (log, warn, debug) in JavaScript

JavaScript’s console object provides powerful methods to debug, monitor, and display information in your applications. Among them, console.log, console.error, console.warn, and console.debug are the most commonly used. In this blog, we’ll explore these methods with clear examples and their corresponding outputs.

1. console.log

Purpose: Used to log general information or values to the console.

Example:

const name = “Alice”; const age = 30; const user = { name: “Alice”, age: 30 };

console.log(“Hello, World!”); console.log(“Name:”, name); console.log(“Age:”, age); console.log(“User Info:”, user);

Output in Console:

Hello, World! Name: Alice Age: 30 User Info: { name: ‘Alice’, age: 30 }

2. console.error

Purpose: Logs errors and highlights them in red (in most browsers and tools) to distinguish from normal logs.

Example:

console.error(“This is an error message!”); const error = new Error(“Something went wrong”); console.error(“Error Details:”, error);

Output in Console:

This is an error message! Error Details: Error: Something went wrong at <stack trace>

3. console.warn

Purpose: Logs warnings, often highlighted in yellow to indicate non-critical issues.

Example:

console.warn(“This is a warning!”); const deprecatedFunction = () => console.warn(“This function is deprecated.”); deprecatedFunction();

Output in Console:

This is a warning! This function is deprecated.

4. console.debug

Purpose: Logs debug-level messages, which are hidden by default in many browsers. You may need to enable verbose logging in your console settings to see them.

Example:

console.debug(“Debug message: App started successfully”); const data = { status: “success”, items: [1, 2, 3] }; console.debug(“Debug Data:”, data);

Output in Console (if enabled):

Debug message: App started successfully Debug Data: { status: ‘success’, items: [1, 2, 3] }

5. Bonus: console.log with Formatting

console.log supports placeholders like %s, %d, %o, and %c for custom logging and styles.

Example:

const name = “Alice”; const age = 30;

console.log(“Name: %s, Age: %d”, name, age); console.log(“%cStyled Text”, “color: blue; font-size: 16px;”);

Output in Console:

Name: Alice, Age: 30 Styled Text (displayed in blue with large font size)

6. Grouping Logs with console.group

Organize logs into collapsible groups for better readability.

Example:

console.group(“User Info”); console.log(“Name: Alice”); console.log(“Age: 30”); console.groupEnd();

Output in Console:

▼ User Info Name: Alice Age: 30

7. Tracing with console.trace

Track the call stack for debugging.

Example:

function a() { b(); } function b() { c(); } function c() { console.trace(“Trace example”); } a();

Output in Console:

Trace example at c (<file>:<line>) at b (<file>:<line>) at a (<file>:<line>)

Practical Tips for Using Console Methods

Use console.error for critical issues requiring immediate attention. Use console.warn for non-breaking yet important warnings. Use console.debug for verbose, development-stage logs.

Structure your logs using console.group for readability.

Always remove or minimize logging in production code to avoid performance hits.

2 cents from Author “Sam” :

Mastering console methods enhances your debugging skills, making it easier to diagnose issues effectively. Combine them strategically to maintain clean, readable logs in your projects.

Feel free to follow me at below social handles

My LinkedIn Profile https://www.linkedin.com/in/sampurna/

My youTube Channel https://www.youtube.com/@techysam-bl9mk/videos

My Udemy Tutorial link https://www.udemy.com/courses/search/?src=ukw&q=sampurna+atmaramani

My Github Link https://github.com/satmaramani