❮ Previous Next ❯

Debugging Basics

  • This lesson introduces fundamental debugging techniques in JavaScript.

  • Introduction to Debugging

    In real-world programming, errors are unavoidable.
     Even experienced developers face bugs in their code.

    Debugging is the process of:

    • Finding errors

    • Understanding why they happen

    • Fixing them correctly

    Debugging is not just a skill — it is a daily activity for every developer.

    What Is Debugging ?

    Debugging is the process of identifying, analyzing, and fixing errors (bugs) in a program.

    Simple Definition

    Debugging means finding out what is wrong, why it is wrong, and how to fix it.

    What Is a Bug ?

    A bug is an error or flaw in a program that causes:

    • Incorrect output

    • Unexpected behavior

    • Program crash

    Common Types of Errors

    Before debugging, it is important to know what kind of error you are dealing with.

    Syntax Errors

    Errors caused by wrong syntax.

    Example:

    console.log("Hello")

    Problem:

    • Missing closing parenthesis

    These errors stop the program from running.

    Runtime Errors

    Errors that occur while the program is running.

Type Error Example

Accessing a property on undefined causes a runtime error. 

let x = undefined;
console.log(x.length);

  • This causes an error because undefined has no length.

    Logical Errors

    Errors where:

    • Program runs

    • No error message

    • Output is incorrect

Logical Error in Loop Example

Incorrect update inside loop causes wrong sum calculation. 

let sum = 0;
for (let i = 1; i <= 5; i++) {
  sum = i;
}
console.log(sum);

  • Expected output: 15
    Actual output: 5

    This is a logical mistake.

    Why Debugging Is Important

    Without debugging:

    • Bugs remain hidden

    • Application behaves unpredictably

    • Users lose trust

    • Performance suffers

    With proper debugging:

    • Errors are fixed faster

    • Code quality improves

    • Confidence increases

    • Maintenance becomes easier

    Common Causes of Bugs

    • Typing mistakes

    • Wrong conditions

    • Incorrect loop logic

    • Undefined or null values

    • Wrong variable scope

    • Misunderstanding requirements

    Debugging in JavaScript

    JavaScript provides multiple debugging techniques, including:

    • console.log()

    • Browser Developer Tools

    • Breakpoints

    • Error messages

    • Stack traces

    Using console.log() for Debugging

    This is the most basic and widely used debugging technique.

Basic Output Example

Displays variable values and their sum using console output. 

let a = 10;
let b = 20;

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

console.log("Sum:", a + b);

  • This helps track values step by step.

    Debugging Conditional Logic

Conditional Check Example

Uses an if-else statement to check and display age status. 

let age = 16;

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

if (age >= 18) {
  console.log("Adult");
} else {
  console.log("Minor");
}

  • By logging values, we confirm which block is executed.

    Browser Developer Tools (Overview)

    Modern browsers provide powerful debugging tools.

    Main features:

    • Console

    • Sources

    • Breakpoints

    • Call stack view

    • Error messages

    Using the Browser Console

    Example error message:

    Uncaught TypeError: Cannot read property 'length' of undefined

    This message tells:

    • Type of error

    • What went wrong

    • Where it happened (line number)

    Understanding Error Messages

    Error messages usually contain:

    1. Error type

    2. Description

    3. File name

    4. Line number

    Always read error messages carefully before fixing code.

    Using debugger Keyword

    JavaScript provides a built-in debugger keyword.

Debugger Example

Uses debugger to pause execution for debugging. 

let x = 5;
let y = 10;

debugger;

let sum = x + y;
console.log(sum);

  • Execution pauses at debugger and opens DevTools.

    What Are Breakpoints ?

    A breakpoint is a marker where execution pauses.

    Benefits:

    • Inspect variables

    • Step through code

    • Understand flow

    • Catch logical errors

    Step-by-Step Debugging Process

    A good debugging approach:

    1. Understand the expected output

    2. Observe the actual output

    3. Read error messages

    4. Isolate the problematic code

    5. Test assumptions using logs

    6. Fix one issue at a time

    7. Retest the program

    Debugging Loops

For Loop Example

Uses a loop to print values from 0 to 5. 

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

  • Logs help confirm:

    • Loop start

    • Loop end

    • Number of iterations

    Debugging Functions

Missing Argument Example

Calls a function with missing parameters, leading to undefined values. 

function multiply(a, b) {
  console.log("a:", a, "b:", b);
  return a * b;
}

multiply(4);

  • Debugging reveals missing arguments.

    Common Debugging Mistakes

    • Ignoring error messages

    • Guessing instead of testing

    • Fixing multiple issues at once

    • Not checking variable values

    • Assuming code works without verification

    Best Practices for Debugging

    • Write clean, readable code

    • Use meaningful variable names

    • Debug small sections at a time

    • Remove unused code

    • Test frequently

    • Do not panic when errors appear

❮ Previous Next ❯