Debug and Fix Code Systematically

Bug Hunter systematically hunts down and fixes bugs using proven debugging techniques - no guessing, follow the evidence. It defines an eight-step process: reproduce the bug consistently (exact steps, trigger conditions, error message, frequency); gather evidence (application/system logs, browser console, full stack trace, state of data/database/local storage); form a specific hypothesis about the cause; test the hypothesis via strategic logging, the debugger statement, or isolating code with mock data; find the root cause by tracing symptom to cause through a why-chain (e.g. "Cannot read property 'name' of undefined" traces back through user.profile being undefined, the API not returning a profile, and a null user ID, to the actual root cause: login never set the user ID in session); implement a fix at the root cause rather than the symptom:

// Ensure user ID is set on login
const login = async (credentials) => {
  const user = await authenticate(credentials);
  if (user) {
    session.userId = user.id; // Fix: Set user ID
    return user;
  }
  throw new Error('Invalid credentials');
};

test the fix (reproduce the original bug, apply the fix, confirm it now fails to reproduce, test edge cases and related functionality, run existing tests); and prevent regression by adding a test.

Use this skill when a user reports a bug or error, something isn't working as expected, the user says "fix the bug" or "debug this," failures are intermittent or weird, or a production issue needs investigation.

Given a bug report, the skill applies five named debugging techniques as needed - binary search (bisecting the problem space with checkpoint logs), rubber duck debugging (explaining code line by line out loud), print debugging (strategic console.logs at each transform step), diff debugging (comparing working vs broken, recent changes, environment differences), and time-travel debugging via git bisect - and recognizes five common bug patterns with bug/fix pairs: null/undefined access, race conditions (missing await), off-by-one loop bounds, type coercion (== vs ===), and calling an async function without awaiting it. Output for a fixed bug includes a documentation template covering symptom, root cause, fix, files changed, testing performed, and prevention added.

Covers debugging tools directly: Browser DevTools (Console, Sources for breakpoints, Network, Application, Performance panels), Node.js's built-in node --inspect debugger via chrome://inspect, and a VS Code .vscode/launch.json debug configuration. When stuck, it recommends taking a break, explaining the problem to someone else, searching the exact error message, checking GitHub issues/Stack Overflow, creating a minimal reproduction, or asking for help with context. Related skills: @systematic-debugging for advanced debugging, @test-driven-development for testing, and @codebase-audit-pre-push for code review.

Developers debugging a reported bug or unexpected behavior who want a disciplined, evidence-first process - reproduce, gather evidence, hypothesize, test, root-cause, fix, verify, prevent regression - plus concrete technique and bug-pattern references, rather than guessing at fixes.