2.4 Bug Fixing & Debugging

Course: Claude Code - Essentials Section: Core Workflows Video Length: 2-5 minutes Presenter: Daniel Treasure

Opening Hook

You ran your code and something broke. Maybe you got an error message, or the output is wrong, or users are reporting unexpected behavior. Claude Code can help you diagnose the problem and find the fix. In this video, we'll show how to share errors with Claude and let it guide you through debugging.

Key Talking Points

Share the Error with Claude
Paste the error message or stack trace directly into Claude Code
Include the steps to reproduce if possible
Claude reads the error and asks clarifying questions
Show on screen: Share an error message and watch Claude interpret it
Claude Understands Error Context
Stack traces, log output, and error codes are Claude's specialty
Claude explains what the error means in plain language
Points out the root cause, not just the symptom
Show: Paste a real (or prepared) error; Claude explains the issue clearly
Tracing the Problem
Claude can "walk through" your code to find where things go wrong
Ask: "Why does this line throw an error?" or "Trace the data flow from here to here"
Claude shows you the path the bug takes
Show: Ask Claude to trace a specific function call; see the explanation
Fixing the Bug
Once the problem is identified, Claude proposes a fix
The fix is shown as a diff (like in 2.2)
You review, approve, and it's applied
Show: Approve the bug fix; confirm it's applied
Verifying the Fix Works
Re-run the code to confirm the error is gone
Ask Claude: "Does the fix address the root cause?"
Test the functionality to ensure it behaves correctly
Show: Run the code again; show the error is resolved

Demo Plan

Demo Project: Continue with the same project from 2.1-2.3

Prepared Bug Scenario: - Before recording, introduce a small but realistic bug (e.g., off-by-one error, null reference, wrong parameter type) - Examples: - A function that expects a number but receives a string - A missing null check that causes a crash - A logic error in a calculation or condition - An async/await issue causing a race condition (simplified)

Setup: - Have the project open - Trigger the bug by running the code (show the error output) - Keep the error message visible for sharing with Claude

On-Camera Sequence (2-3 minutes):

Trigger the Bug bash npm run start # or node index.js
Show the error message or unexpected behavior
~30 seconds
Share the Error with Claude I got this error: [paste error message] What does it mean?
Paste the full error/stack trace
Claude explains the issue
~30 seconds
Ask Claude to Trace the Problem Can you trace where this error originates? What's the root cause?
Claude walks through the code
Identifies the problematic line or function
~30 seconds
Request a Fix Fix this bug
Claude proposes the fix with a diff
Review the diff; approve it
~20 seconds
Verify the Fix bash npm run start # or node index.js
Run the code again
Show the error is gone or behavior is correct
~30 seconds

Code Examples & Commands

Asking Claude to debug:

I got this error: [error message]. What does it mean?
Why does this function throw an error?
Trace the data flow from input to output.
Can you explain this stack trace?
This test is failing. Why?
The output is wrong. Where's the bug?
Fix this bug and explain what was wrong.

Providing context:

@app.js what error occurs on line 42?
@src/auth The login function is returning null. Why?
When I call [function] with [input], I get [error]. What's wrong?

Real example error to use in demo (if you need to prepare one):

TypeError: Cannot read property 'name' of undefined
  at getUserName (app.js:25:15)
  at processUser (app.js:45:8)
  at Object.<anonymous> (app.js:67:3)

This works great for showing how Claude interprets a stack trace.

Gotchas & Tips

Stack Traces Are Your Friend – The longer and more detailed the error, the easier for Claude to diagnose. Don't truncate or summarize; paste the full output.
Provide Reproduction Steps – If the error isn't immediately obvious from the stack trace, tell Claude how to trigger it: "It happens when I submit the login form with an empty password."
Check Logs First – Before asking Claude, check your application logs or console output. These often have clues the main error message misses.
Run Tests Early – We cover testing in 2.5. Tests catch bugs before they reach production. Use them proactively.
Don't Assume the Error Location – The line that throws the error isn't always where the bug is. Claude's job is to trace back to the root cause.
Approve the Fix Cautiously – Even after Claude proposes a fix, think about whether it makes sense. If unsure, ask Claude to explain the fix before approving.

Lead-out

You've caught and fixed a bug. But wouldn't it be better to catch them before they become bugs? That's where automated tests come in. In the next video, we'll show how Claude helps you write tests that verify your code works correctly.

Reference Material

Common Workflows - Debugging: https://code.claude.com/docs/en/common-workflows
Quickstart - Fix a Bug: https://code.claude.com/docs/en/quickstart
Best Practices Guide: https://code.claude.com/docs/en/best-practices

Relevant Articles & Posts

Debugging Workflows: Joe Njenga's "17 Best Claude Code Workflows" (Medium) – includes debugging patterns
Production Debugging: Lukasz Fryc's "15 Tips from Running 6 Projects" (DEV Community)
Official Resource: Common Workflows - Claude Code Docs (https://code.claude.com/docs/en/common-workflows)

Additional Notes

Use a realistic, relatable bug (not "hello world" or trivial errors)
Show the full stack trace; don't simplify it for the video (Claude handles complexity well)
Pause after Claude's diagnosis so viewers can read and understand
Emphasize: Claude reads code and error messages like a senior developer would
Mention that asking clear questions ("why?" vs. "fix it") helps Claude give better answers
Note that error handling and edge cases are covered in later sections (2.5 with tests, 2.6 with docs)

Quick Reference