038
LVL 02 — CIRCUIT BREAKER SESSION 038 DAY 38

CODE READING

🎫 PIXELCRAFT-026
🐛 Bug | 🟡 Medium | Priority: 🟠 High

The contrast filter produces wrong colors on dark images. The code was written by a developer who left the company 6 months ago. 200 lines, no comments, variable names like x, temp, val2. Find the bug.
CONCEPTS.UNLOCKED
📖
Code Reading Strategies
Top-down: start with the big picture. Follow the data: trace inputs to outputs. Find the entry point: where does execution begin? Don't read every line — read strategically.
🔬
Systematic Debugging
Reproduce → isolate → identify → fix → verify. The scientific method applied to code. Form a hypothesis, design an experiment, observe, refine.
🛑
DevTools Debugger
Breakpoints pause execution at a line. Step over runs the next line. Step into enters a function call. Step out exits the current function. Watch expressions track values.
Conditional Breakpoints
Pause only when a condition is true. Right-click a breakpoint → "Edit condition" → r < 50. Now it only pauses for dark pixels. Debug targeted, not randomly.
🦆
Rubber Duck Debugging
Explain the problem out loud to find the answer. The act of verbalizing forces you to slow down and think precisely. Works surprisingly often — no duck required.
📝
Self-Documenting Code
Rename val2contrastFactor, temppixelMean. Good variable names eliminate the need for comments. Leave the code better than you found it.
HANDS-ON.TASKS
01
Read the 200-Line Function

Don't try to understand everything. Find the entry point and the output. What goes in? What comes out? Trace the data flow from input to output.

02
Add console.log at 5 Key Points

Trace the data flow with strategic logging. Don't log everything — pick the 5 most important transformation points where values should change. Compare expected vs actual output at each.

03
Use the DevTools Debugger

Set a breakpoint at the start of the function. Step through line by line. Watch the pixel values: are they correct after each step?

Use a conditional breakpoint that only pauses when processing dark pixels (r < 50) — this is where the bug shows.

04
Find and Fix the Bug

The bug: the contrast formula uses 128 as the midpoint instead of the image's actual mean brightness.

// Bug: hardcoded 128 as midpoint // const adjusted = (pixel - 128) * factor + 128; // Fix: use actual mean const adjusted = (pixel - mean) * factor + mean;
On a dark image (mean brightness ~40), using 128 shifts all dark pixels way too far. On a bright image (mean ~200), it shifts too little. The fix: calculate the actual mean first.
05
Clean Up the Code

Rename 8 variables to self-documenting names:

BeforeAfter
val2contrastFactor
temppixelMean
xpixelValue
resadjustedValue

Add comments explaining the non-obvious parts. Leave the code better than you found it.

06
Close the Ticket
git switch -c bugfix/PIXELCRAFT-026-contrast-dark-images git add src/scripts/ git commit -m "Fix contrast midpoint bug + clean up variable names (PIXELCRAFT-026)" git push origin bugfix/PIXELCRAFT-026-contrast-dark-images # PR → Review → Merge → Close ticket ✅
CS.DEEP-DIVE

Professional developers spend more time reading code than writing it.

Studies show a 10:1 ratio — for every line written, 10 lines are read.

// The ability to quickly navigate and
// understand unfamiliar code is THE most
// valuable skill for a new hire.

// Debugging = the scientific method:

1. Form a hypothesis
2. Design an experiment
   (add a breakpoint/log)
3. Observe the result
4. Refine the hypothesis

// This systematic approach applies to
// any diagnostic problem — not just code.
"Debug Detective"
[A] Find an open-source project on GitHub (e.g., a small image editor or Canvas library). Read one file — identify the entry point, trace the data flow, and summarize what it does in 3 sentences.
[B] Intentionally introduce 3 bugs into PixelCraft (an off-by-one, a wrong variable, a missing return). Trade with a partner. Time how long each of you takes to find and fix all 3.
[C] Master the Chrome DevTools debugger: set 5 breakpoints, 2 conditional breakpoints, and use the Watch panel to track 3 variables through a filter processing loop.
REF.MATERIAL
VIDEO
Google Chrome Developers
Official guide to the Chrome debugger: breakpoints, stepping, watch expressions, call stack, scope, and conditional breakpoints.
DEBUGGERDEVTOOLSESSENTIAL
ARTICLE
Google Chrome
Step-by-step debugging tutorial: setting breakpoints, pausing on exceptions, examining variables, and editing code live.
DEBUGGINGTUTORIAL
VIDEO
ThePrimeagen
Practical strategies for reading unfamiliar codebases: entry points, data flow tracing, and pattern recognition.
CODE READINGSTRATEGIES
ARTICLE
Wikipedia
The debugging technique of explaining your code line-by-line to an inanimate object. Sounds silly, works surprisingly well.
DEBUGGINGTECHNIQUEFUN
ARTICLE
Coding Horror / Jeff Atwood
When comments add value vs when they're noise. Self-documenting code through naming. The art of writing code that others can read.
CLEAN CODECOMMENTS
// LEAVE EXCITED BECAUSE
You read 200 lines of terrible code, found the bug, fixed it, and left the code better than you found it. This is real engineering. This is what senior devs do daily.