Lab: Error Handling and Debugging Practice | Module 6: Errors, Debugging, and Troubleshooting

Module 6: Errors, Debugging, and Troubleshooting

Lab: Error Handling and Debugging Practice

Practice using try...catch to handle potential errors and use console.log or the debugger statement to inspect code.

Tasks to Complete:

**Task 1 (Error Handling):** Modify the `divideNumbers` function. Wrap the division operation (`numerator / denominator`) in a `try` block. Add a `catch` block that catches any error. Inside the `catch` block, `console.error()` a user-friendly message like "Error: Cannot divide by zero." or "An error occurred during division: [error message]". If the division is successful (no error), `console.log()` the result as it currently does.
**Task 2 (Debugging with `console.log`):** The `sumUpTo` function has a logical error. It's supposed to sum numbers from 1 up to `limit`. Add `console.log()` statements inside its `for` loop to inspect the values of `i` and `total` during each iteration. Identify the bug and fix it so it correctly calculates the sum. (Hint: The loop condition and the summation logic `total = i` are areas to inspect).
**Task 3 (Optional - Using `debugger;`):** Uncomment the `debugExample` function. Place a `debugger;` statement inside its `for` loop. If you run this code in a browser with the Developer Tools open, the script execution should pause at the `debugger;` statement, allowing you to inspect variables and step through the code.

JavaScript Sandbox

JavaScript Code Editor:

// Task 1: Error Prone Division
function divideNumbers(numerator, denominator) {
  // TODO: Add a try...catch block here.
  // Inside try: perform division. If denominator is 0, this will throw an error.
  // Inside catch: log a user-friendly error message like "Error: Cannot divide by zero."
  // If no error, log the result.

// Remove this line after implementing try...catch
  if (denominator === 0) {
    console.error("Error: Attempted to divide by zero without try...catch.");
    return;
  }
  let result = numerator / denominator;
  console.log(`Result of ${numerator}/${denominator} = ${result}`);
}

divideNumbers(10, 2);
divideNumbers(10, 0); // This should be handled by your try...catch

console.log("\n--- Task 2: Debugging with console.log ---\n");
// Task 2: Debugging a Loop
// The function below is supposed to sum numbers from 1 to limit (inclusive)
// but it has a logical error. Use console.log to find and fix it.
function sumUpTo(limit) {
  let total = 0;
  for (let i = 0; i <= limit; i++) { // Potential off-by-one or starting point issue?
    // Add console.log here to inspect 'i' and 'total' in each iteration
    total = i; // This is the logical error: it should be total += i;
  }
  return total;
}

let sumResult = sumUpTo(3); // Expected: 1+2+3 = 6
console.log("Sum up to 3 (buggy):", sumResult);

// Corrected function (for reference, make your fix in the original sumUpTo)
/*
function correctedSumUpTo(limit) {
  let total = 0;
  for (let i = 1; i <= limit; i++) { // Corrected loop start
    console.log(`Iteration: i=${i}, current total=${total}`);
    total += i; // Corrected summation
  }
  return total;
}
let correctSum = correctedSumUpTo(3);
console.log("Sum up to 3 (corrected):", correctSum);
*/

console.log("\n--- Task 3: Using debugger (Optional) ---\n");
// Task 3 (Optional): Using the debugger statement
// Uncomment the function below. Place the `debugger;` statement inside the loop.
// Run this in your browser with Developer Tools open to see execution pause.
/*
function debugExample(items) {
  for (let i = 0; i < items.length; i++) {
    let item = items[i];
    // Place debugger; statement here
    console.log("Processing item:", item);
  }
}
debugExample(['apple', 'banana', 'cherry']);
*/

Output Console:

Output will appear here...

JavaScript execution is sandboxed. Output from `console.log()` and errors will appear above.

Prev: Debugging Tips: Brea...Next: Quiz: Quiz 6: Errors...