Source-Level Debugging Lesson

Source-level debugging uses browser developer tools to pause code on a specific line. A breakpoint stops the program while it is running, so the developer can inspect variables and step through the next lines.

This is useful when console logs are not enough. Pausing at the exact line shows the current values, the call stack, and the path the program took to reach that point.

Code Runner Challenge

Source-Level Debugging Lesson

View IPYNB Source 
%%js

// CODE_RUNNER: Source-Level Debugging Lesson

function applyDamage(player, damage) {
  const nextHealth = player.health - damage;
  player.health = Math.max(0, nextHealth);
  return player.health;
}

const player = { health: 30 };
applyDamage(player, 12);
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

Source-level debugging is especially helpful for logic that changes quickly, such as animation, collisions, or user input.