What most people do wrong
Most debugging fails because of one classic sin - changing multiple things at once. That turns your system into a fog machine. The fix looks random because it basically was.
The 6 step workflow
Write the shortest set of steps that triggers the bug. If you cannot reproduce, you cannot prove a fix.
Strip the problem down. Remove features. Remove data. Remove async. Keep deleting until the bug disappears - then add the last thing back.
"I think X happens because Y". If you cannot write it, you do not have a hypothesis - you have vibes.
Use logs like a microscope. Place them near boundaries - input, output, network, state transitions, and errors.
// Example log pattern
console.log("[auth] token present", Boolean(token));
console.log("[api] status", res.status, "timeMs", elapsedMs);
console.log("[ui] state", { loading, error, items: items.length });
Toggle one variable. Compare before and after. That is how you build confidence instead of guessing.
Add a small test or a guard. At minimum, add a comment near the fix stating what it prevents. Future you will thank present you.
Checklist you can reuse
- Can I reproduce it in under 30 seconds
- Did I reduce to the smallest failing example
- Did I write one hypothesis sentence
- Did I change only one thing
- Did I confirm the fix with the original repro steps
- Did I add a guard to prevent the same bug