Stop Debugging Like It's 2020 - Modern Tools That Actually Work

Last Tuesday I spent 3 hours tracking down a bug. Turned out to be a single typo in an environment variable.

Three. Hours.

That was my wake-up call. I've been debugging the same way since 2020, using the same tools, same workflows. Meanwhile, the tooling got way better.

Here's what I switched to. These aren't hype — they're tools I actually use daily now.

1. Stop Using console.log for Everything

I know, I know. console.log is fast. But you end up with 47 console.logs scattered across your codebase, and you forget to remove half of them before committing.

What I switched to: VS Code's built-in debugger + breakpoints

Sounds obvious, but hear me out. Most devs I know still console.log everywhere because "setting up debugging is annoying."

It takes 30 seconds:

1. Click the debug icon in VS Code
2. Add a breakpoint (click the line number)
3. Hit F5

Now you can hover over ANY variable and see its value. Step through code line by line. Check the call stack. All the stuff console.log can't do.

When it actually helped: Last week I had a function that sometimes returned undefined. Console.log showed me undefined. Breakpoints showed me the exact moment a variable got overwritten, and which function did it.

Saved me an hour of guessing.

2. Use Error Boundaries (If You're in React)

React errors used to crash my entire app. User clicks a button, everything goes white. Great experience.

What I added: Error boundaries

class ErrorBoundary extends React.Component {
  componentDidCatch(error, info) {
    // Log to your error tracking service
    console.error('Caught error:', error, info);
  }

  render() {
    if (this.state.hasError) {
      return <h2>Something went wrong. Try refreshing?</h2>;
    }
    return this.props.children;
  }
}

Wrap your sketchy components in this. Now when something breaks, only that component fails. The rest of your app keeps working.

Real example: My image upload component crashed if you uploaded a corrupt file. Instead of nuking the whole page, the error boundary caught it and showed a friendly message. User could keep working.

3. Network Tab is More Powerful Than You Think

Every time an API call failed, I used to add a million console.logs in my fetch code.

Turns out Chrome DevTools Network tab shows you EVERYTHING:

• Request headers
• Response body
• Status codes
• Timing breakdown
• What failed and why

The game-changer: Right-click any request → "Copy as fetch"

It copies the exact code to reproduce that request. Paste it in console and run it again. Instant debugging.

How this saved me: API was randomly failing. Network tab showed the request was timing out after exactly 10 seconds. Turns out my server had a 10-second timeout. Bumped it to 30 seconds, problem gone.

Without the network tab, I would've been guessing forever.

4. Git Bisect for "When Did This Break?"

You know that moment when you're like "this worked last week, what changed?"

You could review 50 commits manually. Or use git bisect.

git bisect start
git bisect bad           # current commit is broken
git bisect good abc123   # this old commit worked

# Git checks out a commit halfway between
# Test if it's broken or not, then:
git bisect bad   # or git bisect good

# Git narrows it down, repeat until it finds the exact commit

It binary searches through your commits to find exactly when the bug was introduced.

Real story: Feature broke after I merged a PR. 43 commits in that PR. Git bisect found the exact commit in 6 tests. Commit message: "minor cleanup." The cleanup broke everything.

Without bisect, I would've reviewed 43 commits manually. Instead, took 5 minutes.

5. Use Actual Error Tracking (Sentry is Free for Small Projects)

Console errors disappear after you close the browser. User reports "it crashed" but gives you zero details.

What I added: Sentry

Free tier is generous. Every error gets:

• Full stack trace
• User's browser/OS
• What they were doing
• Network requests at the time

Setup is stupid simple:

npm install @sentry/react

Add 3 lines to your app. Done.

The moment I got religion: User reported "app crashed on Tuesday." Zero other details. Sentry showed me:

• Exact error: "Cannot read property 'map' of null"
• Which component
• Which API call returned null
• User was on Firefox 115

Fixed it in 10 minutes. Without Sentry, I would've asked the user "can you reproduce it?" and gotten radio silence.

6. AI Debugging (Actually Useful Now)

Claude/ChatGPT for debugging used to give me generic nonsense. Now it's actually good if you use it right.

Bad way:

My code doesn't work, help

Good way:

This function returns undefined when I expect an array:

[paste your code]

Error: Cannot read property 'map' of undefined

I logged the API response and it's coming back correctly. 
What am I missing?

Give it:

• The specific error
• Your code
• What you tried
• What you expected vs what happened

You'll get a targeted fix, not a "check if your API is running" response.

When this helped: Had a weird async/await bug. Pasted code to Claude, it immediately spotted I was missing 'await' on a nested function call. Would've taken me another hour to spot that.

The Pattern I Noticed

All these tools have one thing in common: they show you what's actually happening, not what you think is happening.

Console.log shows what you tell it to show. Debuggers show everything. Error tracking shows what users experience. Git bisect shows when things broke.

Half of debugging is realizing your assumptions are wrong. These tools surface that faster.

One Week Challenge

Try this for the next week:

1. Set up VS Code debugger (if you haven't)
2. Add error boundaries to your React app
3. Use Network tab before adding console.logs
4. Install Sentry (free tier)

You'll still use console.log sometimes. But you'll have better options when it's not enough.

I went from "3 hours debugging a typo" to catching most bugs in under 20 minutes. Not because I got smarter — because I used better tools.

Your mileage may vary, but give these a shot. Future-you will thank you.

Level Up Your Dev Workflow

I write about dev tools, productivity hacks, and lessons learned the hard way. Real techniques that work, no fluff.

Subscribe to LearnAI Weekly — practical tips for developers delivered weekly.

---

What's your debugging secret weapon? Drop it in the comments — always looking to level up my workflow.