Source Level Debugging

What is source level debugging?

Source level debugging uses browser developer tools to pause code execution, inspect variables, and step through code line by line.

Benefits of source level debugging?

• Pause execution at breakpoints
• Step through code line by line
• Inspect variable values while paused
• See call stack
• More powerful than console.log()

// Set breakpoint by adding debugger statement
function movePlayer(x, y) {
    debugger; // Execution pauses here
    
    const newX = x + 10;
    const newY = y + 10;
    
    console.log("Player moved to: (" + newX + ", " + newY + ")");
    return { x: newX, y: newY };
}

// When function is called, execution pauses at debugger
const newPos = movePlayer(100, 300);

What does this code do?

• debugger statement pauses execution
• Can also set breakpoints in browser DevTools
• Pause lets you inspect variable values
• Can step through code line by line
• More powerful than console.log for debugging

// Example with multiple breakpoints
function attackEnemy(enemyHealth, damage) {
    debugger; // First breakpoint
    
    let newHealth = enemyHealth - damage;
    
    debugger; // Second breakpoint
    
    if (newHealth <= 0) {
        console.log("Enemy defeated!");
    }
    
    return newHealth;
}

const result = attackEnemy(50, 30);
console.log("Result: " + result);

---

layout: post title: Source-Level Debugging description: Learn about source level debugging permalink: /source_level_debugging author: Vihaan Budhraja —

Try It Yourself

%%js // CODE_RUNNER: source-level-debugging function calculateHealth(base, damage) { debugger; const result = Math.max(0, base - damage); console.log(“Result:”, result); return result; } calculateHealth(100, 25);