Debugging

Overview

Debugging is the disciplined process of finding where a system diverges from expected behavior and fixing the real cause.

Why It Matters

Fast debugging protects delivery speed, production stability, and team confidence.

Core Concepts

• Identify the failing layer first.
• Reproduce before you change code.
• Prefer one clear hypothesis at a time.

Mental Models

Think in layers: browser, frontend, network, auth, backend, database, and third-party systems.

flowchart TD
  A[User sees problem] --> B[Reproduce]
  B --> C{Where did it fail?}
  C --> D[Browser/UI]
  C --> E[Network/API]
  C --> F[Backend]
  C --> G[Database / Third party]

Best Practices

• Check the browser console and network tab first.
• Read the exact error message and status code.
• Change the smallest thing that can prove or disprove your theory.

Common Mistakes

• Fixing only the visible symptom.
• Debugging in multiple places at once.
• Ignoring logs, traces, or request payloads.

Trade-offs

Broad investigation finds hidden issues, but it can waste time unless you narrow the failing layer early.

Decision Framework

1. Reproduce the issue.
2. Determine the failing layer.
3. Inspect the data at that boundary.
4. Test the smallest plausible fix.
5. Verify the full user flow.

Examples

• A 200 OK with a broken UI usually means state mapping or rendering logic.
• A 401 usually means auth cookies, tokens, or middleware.
• A 500 usually means backend logs or a failed dependency.

Checklists

• Can I reproduce it on demand?
• Do I know the exact request and response?
• Did I verify the fix in the full path?

Senior Engineer Notes

Senior engineers debug the system, not the hunch. They use the narrowest possible evidence chain to reach the root cause.

Further Reading

• HTTP Error Codes
• Bug Fix Workflow
• Production Incident