Module 13: Debugging Basics

Objective: Learn the tools and techniques to debug JavaScript code effectively, identify and fix errors, and improve your development workflow.

1. What Is Debugging?

Debugging is the process of finding and fixing errors (bugs) in your code. These errors might cause your program to crash, behave unexpectedly, or produce incorrect results.

2. Types of Errors in JavaScript

1. Syntax Errors: Issues with the structure of the code (e.g., missing parentheses or brackets).

   • Example:

     Copy
     console.log("Hello world!  // Missing closing quote

2. Runtime Errors: Occur when the code is running (e.g., accessing an undefined variable).

   • Example:

     Copy
     console.log(x); // Error: x is not defined

3. Logical Errors: The code runs but doesn’t produce the expected output (e.g., incorrect formula).

   • Example:

     Copy
     let total = 10 * 2; // Intended to add, but multiplies

3. Debugging Tools

3.1. Browser Developer Tools

Modern browsers like Chrome, Firefox, and Edge come with powerful developer tools.

• Accessing Developer Tools:

  • Right-click on the webpage and select Inspect.
  • Go to the Console tab to view logs and errors.

• Key Tabs:

  • Elements: Inspect HTML and CSS.
  • Console: View logs and errors.
  • Sources: Debug JavaScript code.

4. Using console.log()

console.log() is the simplest and most commonly used debugging tool.

Example:

Copy
let num = 5;
console.log("The value of num is:", num); // Outputs: The value of num is: 5

Use console.log() to:

• Check variable values.
• Trace code execution.
• Confirm if a block of code runs.

Advanced Logging:

Copy
console.error("This is an error!"); // Red error text
console.warn("This is a warning!"); // Yellow warning text
console.table([{ name: "Alice" }, { name: "Bob" }]); // Display data in a table

5. Setting Breakpoints

Breakpoints let you pause code execution at specific lines to inspect values and behavior.

Steps to Use Breakpoints:

1. Open the Sources tab in Developer Tools.
2. Navigate to your JavaScript file.
3. Click on the line number where you want to pause the code (sets a breakpoint).
4. Reload the page or trigger the event.

6. Stepping Through Code

When code execution pauses at a breakpoint, you can:

• Step Over (F10): Execute the next line without going into function calls.
• Step Into (F11): Go into the details of a function call.
• Step Out (Shift + F11): Exit the current function and return to the caller.

7. Inspecting Variables

While paused at a breakpoint, hover over variables to see their current values. Use the Scope panel to view all variables in the current context.

Example:

Copy
function calculateSum(a, b) {
    let sum = a + b; // Pause here and inspect 'a', 'b', and 'sum'
    return sum;
}
calculateSum(10, 20);

8. The debugger Statement

The debugger statement pauses code execution, similar to setting a breakpoint in Developer Tools.

Example:

Copy
function greet(name) {
    debugger; // Pauses execution here
    console.log("Hello, " + name);
}
greet("Alice");

9. Error Messages

JavaScript provides helpful error messages in the console. Understanding these messages can help identify the issue.

Common Error Types:

1. ReferenceError:

   • Occurs when accessing a variable that isn’t defined.

   • Example:

     Copy
     console.log(x); // ReferenceError: x is not defined

2. TypeError:

   • Occurs when a value is not of the expected type.

   • Example:

     Copy
     let x = null;
     console.log(x.toUpperCase()); // TypeError: Cannot read properties of null

3. SyntaxError:

   • Occurs due to invalid syntax.

   • Example:

     Copy
     if (true // Missing closing parenthesis

10. Debugging Workflow

1. Identify the Problem:

   • Look for error messages or unexpected behavior.
   • Use console.log() to narrow down the issue.

2. Reproduce the Bug:

   • Ensure you can consistently trigger the error.

3. Set Breakpoints:

   • Pause execution to inspect variable values and flow.

4. Fix the Code:

   • Update the logic or syntax based on what you find.

5. Test Thoroughly:

   • Ensure the fix works for all scenarios.

11. Debugging Practice

Task 1: Fix a Syntax Error

The following code has a syntax error. Debug it:

Copy
let message = "Hello, World!
console.log(message);

Solution:

Copy
let message = "Hello, World!";
console.log(message);

Task 2: Debug a Logical Error

The following function is supposed to calculate the area of a rectangle, but it’s incorrect. Fix it:

Copy
function calculateArea(length, width) {
    return length - width; // Should multiply
}
console.log(calculateArea(5, 10)); // Outputs: -5

Solution:

Copy
function calculateArea(length, width) {
    return length * width;
}
console.log(calculateArea(5, 10)); // Outputs: 50

12. Challenge: Debugging a To-Do List

1. Debug the following to-do list code, which has an error:

   Copy
   const addTask = (task) => {
       const taskList = document.getElementById("taskList");
       taskList.push(task); // Error: push is not a function
   };

Solution:

The error occurs because taskList is not an array. Correct the code:

Copy
const addTask = (task) => {
    const taskList = document.getElementById("taskList");
    const taskItem = document.createElement("li");
    taskItem.textContent = task;
    taskList.appendChild(taskItem);
};

13. Common Debugging Tips

1. Start Small: Test smaller parts of your program before combining them.
2. Use Logs Wisely: Log values at different points to trace issues.
3. Check the Console: Always inspect errors and warnings in the console.
4. Read Error Messages: They often provide clues about what went wrong.