❮ Previous Next ❯

Console Debugging

  • This lesson explains how to use the browser console for debugging.

  • Introduction to Console Debugging

    When JavaScript code does not behave as expected, developers need a way to:

    • Understand what is going wrong

    • Track variable values

    • Identify logic errors

    • Fix bugs efficiently

    Console debugging is one of the most powerful and widely used techniques for debugging JavaScript applications.

    Every modern browser provides a Developer Console that helps developers inspect and debug code.

    What Is Console Debugging ?

    Console debugging is the process of using browser console tools to:

    • Print messages

    • Inspect variables

    • Track execution flow

    • Identify errors and warnings

    It allows developers to see what is happening inside the code while it is running.

    Why Console Debugging Is Important ?

    Without debugging:

    • Errors are difficult to find

    • Bugs remain hidden

    • Applications behave unpredictably

    With console debugging:

    • Errors are detected early

    • Code behavior becomes clear

    • Development becomes faster

    • Logic mistakes are easy to fix

    Accessing the Browser Console

    You can open the console using:

    • Right-click → Inspect → Console tab

    • Shortcut: Ctrl + Shift + I (Windows)

    • Shortcut: Cmd + Option + I (Mac)

    The console shows:

    • Logs

    • Errors

    • Warnings

    • Execution messages

    Console Debugging Techniques

    console.log() – Basic Debugging Tool

    What It Does

    Prints messages or variable values to the console.

    Example

    let x = 10;

    console.log(x);

    Used to:

    • Check variable values

    • Confirm code execution

    • Trace program flow

    Logging Multiple Values

    let a = 5;

    let b = 10;


    console.log("Value of a:", a, "Value of b:", b);

    console.error() – Display Errors

    What It Does

    Displays error messages in red color.

    Example

    console.error("This is an error message");

    Useful for:

    • Highlighting critical issues

    • Differentiating errors from normal logs

    console.warn() – Show Warnings

    What It Does

    Displays warning messages in yellow color.

    Example

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

    Used when:

    • Code works but needs attention

    • Deprecated features are used

    console.info() – Informational Messages

    What It Does

    Displays informational messages.

    console.info("User logged in successfully");

    Helpful for:

    • Status updates

    • Non-critical messages

    console.table() – Debugging Objects and Arrays

    What It Does

    Displays data in a tabular format, making it easier to read.

Console Table Example

Displays array of objects in a tabular format using console.table(). 

let users = [
  { name: "Amit", age: 25 },
  { name: "Neha", age: 22 }
];

console.table(users);

  • Best for:

    • Arrays of objects

    • API responses

    • Structured data

    console.clear() – Clear the Console

    What It Does

    Clears all console output.

    console.clear();

    Useful when:

    • Console becomes cluttered

    • Starting a fresh debugging session

    console.time() and console.timeEnd() – Performance Debugging

    What It Does

    Measures how long a piece of code takes to execute.

Performance Timing Example

Measures execution time of a loop using console.time(). 

console.time("loop");

for (let i = 0; i < 100000; i++) {}

console.timeEnd("loop");

  • Helpful for:

    • Performance optimization

    • Comparing code efficiency

    console.group() and console.groupEnd()

    What It Does

    Groups related logs together.

Console Group Example

Groups related console logs for better readability using console.group(). 

console.group("User Details");
console.log("Name: Rahul");
console.log("Age: 24");
console.groupEnd();

  • Improves:

    • Readability

    • Organized debugging output

    Using debugger Statement

    What It Does

    Pauses code execution and opens debugging tools.

Debugger Pause Example

Uses debugger to pause code execution for inspection. 

let x = 5;
debugger;
x = x + 10;

  • Used for:

    • Step-by-step execution

    • Inspecting variables live

    Tracking Execution Flow

    Example

    console.log("Step 1");

    console.log("Step 2");

    console.log("Step 3");

    Helps understand:

    • Order of execution

    • Function calls

    • Conditional flow

Conditional Debugging Example

Helps verify condition values and decision flow in an if-else statement. 

let age = 16;

console.log("Age:", age);

if (age >= 18) {
  console.log("Eligible");
} else {
  console.log("Not eligible");
}

  • Helps verify:

    • Condition values

    • Decision paths

Loop Debugging Example

Prints each iteration to help track loop execution flow. 

for (let i = 1; i <= 5; i++) {
  console.log("Iteration:", i);
}

  • Used to:

    • Detect infinite loops

    • Validate loop counters

    Common Debugging Mistakes

    • Forgetting to remove console.log() in production

    • Overusing logs without structure

    • Ignoring console errors

    • Not reading error stack traces

    Best Practices for Console Debugging

    • Use meaningful log messages

    • Group related logs

    • Remove debugging logs before deployment

    • Use console.table() for objects

    • Combine console debugging with browser breakpoints

    Real-World Use Cases

    • Debugging form validation

    • Fixing API data issues

    • Tracking user actions

    • Identifying performance bottlenecks

    • Resolving runtime errors

❮ Previous Next ❯