Debugging Tips That Actually Help

Debugging is a skill. Here are techniques that help me find and fix bugs faster.

Mindset First

The bug is real. The code is doing exactly what you told it to. Your job is to find the gap between what you *think* the code does and what it *actually* does.

Read the Error

Sounds obvious, but:

TypeError: Cannot read properties of undefined (reading 'map')
    at UserList (UserList.jsx:15:18)

This tells you:

  • What went wrong (undefined.map)
  • Where (UserList.jsx, line 15)
  • The call stack

Read it before you start changing code randomly.

Console Is Your Friend

// Basic
console.log('data:', data);

// With label
console.log({ users, isLoading, error });

// Table format for arrays
console.table(users);

// Group related logs
console.group('API Response');
console.log('status:', response.status);
console.log('data:', response.data);
console.groupEnd();

// Stack trace
console.trace('How did we get here?');

Binary Search Debugging

Bug somewhere in 100 lines? Don't check line by line.

1. Add a log in the middle 2. Is the state correct there? Bug is later. Incorrect? Bug is earlier. 3. Repeat, halving each time

You'll find it in 7 checks instead of 100.

Rubber Duck Debugging

Explain the code out loud. To a rubber duck, a colleague, or yourself. The act of explaining often reveals the issue.

"So this function takes users, and if users is... oh. Users could be undefined before the fetch completes."

Check Your Assumptions

When stuck, list what you're assuming:

  • "This function is being called" - Add a log, verify
  • "This value is a string" - Add a `typeof` check
  • "This API returns..." - Look at the actual response

One assumption is wrong. Find it.

Browser DevTools

  • **Network tab** - What's the actual API response?
  • **Sources tab** - Set breakpoints, step through
  • **React DevTools** - What's the actual component state?

When You're Really Stuck

1. Take a break (seriously) 2. Explain it to someone 3. Sleep on it 4. Look at recent changes (`git diff`) 5. Question fundamental assumptions

The bug is often not where you're looking.

Back to Journal