Systematic Debugging

Overview

Random fixes waste time and create new bugs. Quick patches mask underlying issues.

Core principle: ALWAYS find root cause before attempting fixes. Symptom fixes are failure.

The Iron Law

NO FIXES WITHOUT ROOT CAUSE INVESTIGATION FIRST

If you haven't completed Phase 1, you cannot propose fixes.

When to Use

Use for ANY technical issue:

• •Test failures
• •Bugs in production or dev
• •Unexpected behavior
• •Animation jank or visual glitches
• •Build/Vite failures
• •React rendering issues

Use this ESPECIALLY when:

• •Under time pressure
• •"Just one quick fix" seems obvious
• •You've already tried multiple fixes
• •Previous fix didn't work

The Four Phases

Phase 1: Root Cause Investigation

BEFORE attempting ANY fix:

1. •

   Read Error Messages Carefully

   • •Don't skip past errors or warnings
   • •Read stack traces completely
   • •Note line numbers, file paths, error codes
2. •

   Reproduce Consistently

   • •Can you trigger it reliably?
   • •What are the exact steps?
3. •

   Check Recent Changes

   • •git diff, recent commits
   • •New dependencies, config changes
4. •

   Trace Data Flow

   • •Where does bad value originate?
   • •Keep tracing up until you find the source
   • •Fix at source, not at symptom

Phase 2: Pattern Analysis

1. •Find Working Examples — locate similar working code in same codebase
2. •Compare Against References — read reference implementation COMPLETELY
3. •Identify Differences — list every difference, however small

Phase 3: Hypothesis and Testing

1. •Form Single Hypothesis — "I think X is the root cause because Y"
2. •Test Minimally — SMALLEST possible change, one variable at a time
3. •Verify Before Continuing — did it work? If not, form NEW hypothesis

Phase 4: Implementation

1. •Create Failing Test Case if possible (vitest/playwright)
2. •Implement Single Fix — ONE change at a time
3. •Verify Fix — all tests pass, issue resolved
4. •If 3+ Fixes Failed — STOP, question the architecture, discuss with user

Red Flags — STOP and Return to Phase 1

• •"Quick fix for now, investigate later"
• •"Just try changing X and see if it works"
• •Proposing solutions before tracing data flow
• •"One more fix attempt" (when already tried 2+)

Quick Reference