Iterative DebuggingBeginner

The Error → Fix → Verify Loop

Structure debugging sessions as a tight loop: paste the error, get a fix, verify with the exact command, repeat.

debuggingerrorsloop

The Strategy

Describing bugs in prose is imprecise. Pasting exact error messages with stack traces gives Claude the ground truth it needs to produce correct fixes rather than guesses.

prompt.txt

// Step 1: Paste the full error
<error>
TypeError: Cannot read properties of undefined (reading 'map')
  at ProductList (/app/components/ProductList.tsx:12:25)
  at renderWithHooks (react-dom.development.js:14985)
</error>

<code>
// ProductList.tsx
export function ProductList({ products }) {
  return products.map(p => <div key={p.id}>{p.name}</div>);
}
</code>

// Step 2: Claude provides fix
// Step 3: You run: npm run dev — paste any new error
// Repeat until clean

You might also need

Iterative DebuggingIntermediate

Hypothesis-Driven Debugging

Ask Claude to generate a ranked list of hypotheses for a bug before jumping to fixes—this avoids treating symptoms instead of root causes.

debuggingroot-causehypothesis

View snippet

Iterative DebuggingIntermediate

Generate Tests to Isolate Bugs

Ask Claude to generate a failing unit test that reproduces a bug before fixing it—this creates a regression guard and clarifies the exact failure mode.

testingtddregression

View snippet