← Back to Portfolio

🐛 Debugging

Source-Level Debugging

Project Evidence Required

Set breakpoints in DevTools, step through code execution.

Assessment Method

Demo: Use Sources tab to pause and inspect code flow

What it is

The Sources panel in Chrome DevTools shows your JavaScript files. Click any line number to set a breakpoint — execution pauses there, and you can step line-by-line, inspect variables, evaluate expressions, and trace the call stack.

Why it matters

Some bugs require pausing at the exact moment a value changes. console.log only tells you what a value was at logging time; the debugger lets you walk through the steps that led there.

How GateGame implements it

I set a breakpoint inside the Exit Warden’s interact() to step through dialogue invocation — confirmed the right callback was firing on ‘Step Through’ but not on ‘Not yet’. Stepping into addButtons() revealed the issue was in the button binding, not in the dialogue logic itself.

Code Example

// Sources panel breakpoint set on this line:
this.dialogueSystem.addButtons([
  { text: "Step Through", primary: true, action: () => { /* ... */ } },
  { text: "Not yet",      action: () => this.dialogueSystem.closeDialogue() }
]);
// Execution pauses here, then F10 steps line by line

Key Takeaway

Breakpoints + step-over (F10) + step-into (F11) is the precision toolkit. Use them when console.log can’t tell you when a value changed.

---