Debugging Techniques

1. Reproduce
   ↓ Can you make it happen consistently?
   
2. Isolate
   ↓ What's the minimal case that breaks?
   
3. Hypothesis
   ↓ What do you think is wrong?
   
4. Test
   ↓ Check if your hypothesis is correct
   
5. Fix
   ↓ Implement the solution
   
6. Verify
   ↓ Confirm the bug is gone

❌ BAD DEBUGGING:
Error: "TypeError on line 42"
*changes random code*

✓ GOOD DEBUGGING:
Error: "TypeError: Cannot read property 'name' of undefined"
Line 42: user.profile.name
Questions:
- What is user? (defined? not null?)
- What is user.profile? (exists? not undefined?)

Then trace back: where does user come from?

SCENARIO: Login form broken, 5 different fields

Bad approach:
- Spend 3 hours debugging entire flow
- Still confused

Good approach:
1. Isolate: Test each field separately
2. Find: "Email field works, password fails"
3. Isolate more: "Password validation breaks"
4. Find: "Regex pattern is wrong"
5. Fix: 2-minute change

Time: 30 minutes instead of 3 hours

Bug: User avatars not loading on profile page
Status: Works in staging, broken in production
Team: "Must be a caching issue"

What's actually happening:
- Staging: Uses internal CDN URL
- Production: Uses external CDN URL
- External CDN: Requires CORS header
- Response: Missing CORS header = images blocked

Debugging path:
1. Open browser DevTools → Network tab
2. Click broken image → see 403 error
3. Check request headers
4. See CORS error in console
5. Find: Missing CORS header in production config
6. Fix: Add CORS header to production

❌ TEAM A (Bad):
"It's probably a cache issue"
→ Clears cache (doesn't help)
→ Spends 4 hours investigating
→ Finally looks at actual error
→ Solves in 10 minutes

✓ TEAM B (Good):
1. Looks at actual error first (DevTools)
2. Sees 403 CORS error
3. Checks config files
4. Finds missing header
5. Solves in 20 minutes (including testing)