Debugging with DevTools

// Using debugger keyword
function calculateDiscount(price, discount) {
  // debugger;  // Uncomment to pause here in DevTools!
  
  const discountAmount = price * (discount / 100);
  const finalPrice = price - discountAmount;
  return finalPrice;
}

const result = calculateDiscount(100, 20);
console.log("Final price:", result);  // 80

// Debugging a bug
function findBug(items) {
  let total = 0;
  for (let i = 0; i <= items.length; i++) {  // Bug: <= should be <
    // debugger;  // Set breakpoint to see i and items[i]
    total += items[i];  // items[items.length] is undefined!
  }
  return total;
}

// findBug([10, 20, 30]);  // Returns NaN (bug!)

// DevTools workflow:
// 1. Open DevTools (F12)
// 2. Go to Sources panel
// 3. Find your file
// 4. Click line number to set breakpoint
// 5. Trigger the code (button click, page load)
// 6. Code pauses → inspect variables in Scope panel
// 7. Step through with F10/F11
// 8. Find the bug!

// Conditional breakpoint:
// Right-click line number → "Add conditional breakpoint"
// Only pauses when condition is true: i === 5

console.log("Pro tip: Use DevTools Sources panel instead of console.log for complex bugs!");