AI-101

Lesson 13

Debugging with Claude Code

AI Confidence: 90%

AI-generated

Debugging with Claude Code

Learning Objectives

Share error messages effectively with Claude Code

Let Claude trace issues through your codebase

Provide reproduction steps for better debugging

Fix root causes rather than symptoms

Use the /debug skill for complex problems

Introduction

Bugs are inevitable. What matters is how quickly you can find and fix them. Claude Code is excellent at debugging because it can read your actual code, trace execution paths, and understand how components connect.

This lesson teaches you how to debug effectively with Claude Code. You will learn to share errors in ways that help Claude help you, let Claude investigate rather than guessing yourself, and fix underlying problems rather than patching symptoms.

Good debugging is about providing context and letting Claude explore. The more information you give, the faster Claude finds the problem.

Sharing Error Messages

When something breaks, start by sharing the error with Claude.

Copy the full error:

[@portabletext/react] Unknown block type "codeBlock", specify a component for it in the `components.types` prop

Include:

The error message itself

The stack trace if available

The command or action that triggered it

Tell Claude how to reproduce:

[@portabletext/react] Unknown block type "codeBlock", specify a component for it in the `components.types` prop
[@portabletext/react] Unknown block type "codeBlock", specify a component for it in the `components.types` prop
[@portabletext/react] Unknown block type "codeBlock", specify a component for it in the `components.types` prop

Reproduction steps help Claude understand when and why the error occurs.

Share relevant context:

[@portabletext/react] Unknown block type "codeBlock", specify a component for it in the `components.types` prop
[@portabletext/react] Unknown block type "codeBlock", specify a component for it in the `components.types` prop
[@portabletext/react] Unknown block type "codeBlock", specify a component for it in the `components.types` prop

Context narrows down where to look.

Letting Claude Investigate

After you share the error, let Claude trace through your code. Do not guess at the cause yourself.

Ask Claude to investigate:

[@portabletext/react] Unknown block type "codeBlock", specify a component for it in the `components.types` prop
[@portabletext/react] Unknown block type "codeBlock", specify a component for it in the `components.types` prop
[@portabletext/react] Unknown block type "codeBlock", specify a component for it in the `components.types` prop

Claude reads the files mentioned in the stack trace, follows the code path, and identifies where things go wrong.

Follow-up questions:

[@portabletext/react] Unknown block type "codeBlock", specify a component for it in the `components.types` prop
[@portabletext/react] Unknown block type "codeBlock", specify a component for it in the `components.types` prop
[@portabletext/react] Unknown block type "codeBlock", specify a component for it in the `components.types` prop

These questions help Claude dig deeper.

Ask for hypotheses:

[@portabletext/react] Unknown block type "codeBlock", specify a component for it in the `components.types` prop

Claude lists potential causes ranked by likelihood. You can investigate each one.

Fixing Root Causes

A common mistake is fixing symptoms rather than causes. Claude can help you find the real problem.

Ask for root cause analysis:

[@portabletext/react] Unknown block type "codeBlock", specify a component for it in the `components.types` prop
[@portabletext/react] Unknown block type "codeBlock", specify a component for it in the `components.types` prop
[@portabletext/react] Unknown block type "codeBlock", specify a component for it in the `components.types` prop

Example:

Symptom: A null check prevents a crash.

Root cause: Data is not being loaded correctly upstream.

The symptom fix adds a null check everywhere. The root cause fix ensures data loads correctly so null checks are unnecessary.

Verify the fix:

[@portabletext/react] Unknown block type "codeBlock", specify a component for it in the `components.types` prop

Claude makes the fix, then runs tests or performs verification to confirm the problem is solved.

Using the /debug Skill

For complex debugging, use the built-in /debug skill:

[@portabletext/react] Unknown block type "codeBlock", specify a component for it in the `components.types` prop

This skill:

Enables debug logging for the session

Reads the session debug log

Analyzes the problem you described

Suggests investigation paths

The /debug skill is particularly useful when:

The problem is intermittent

Multiple components might be involved

You need detailed internal logs

After running /debug, Claude has access to detailed logging that helps trace what happened.

Debugging Strategies

Different bugs need different approaches:

For runtime errors:

Share the error and stack trace. Claude traces back to the source.

[@portabletext/react] Unknown block type "codeBlock", specify a component for it in the `components.types` prop

For wrong behavior:

Describe what should happen versus what does happen.

[@portabletext/react] Unknown block type "codeBlock", specify a component for it in the `components.types` prop

For performance issues:

Describe the symptoms and when they occur.

[@portabletext/react] Unknown block type "codeBlock", specify a component for it in the `components.types` prop

For intermittent bugs:

Describe the pattern of when it happens and when it does not.

[@portabletext/react] Unknown block type "codeBlock", specify a component for it in the `components.types` prop
Verification After Fixing

Fixing a bug is not complete until you verify the fix works.

Ask Claude to verify:

[@portabletext/react] Unknown block type "codeBlock", specify a component for it in the `components.types` prop
[@portabletext/react] Unknown block type "codeBlock", specify a component for it in the `components.types` prop

Claude makes the change, then runs tests or demonstrates that the bug is fixed.

Test edge cases:

[@portabletext/react] Unknown block type "codeBlock", specify a component for it in the `components.types` prop
[@portabletext/react] Unknown block type "codeBlock", specify a component for it in the `components.types` prop

Make sure the fix is complete, not just a quick patch.

Check for regressions:

[@portabletext/react] Unknown block type "codeBlock", specify a component for it in the `components.types` prop

A fix that breaks other things is not a fix.

Common Debugging Patterns

Read the error carefully. Errors often tell you exactly what went wrong. Do not skip past them.

Start where it breaks. The stack trace points to where the error occurred. Start there and trace backward.

Check assumptions. Bugs often happen when something is not what you assumed. Check that variables have the values you expect.

Isolate the problem. Can you reproduce it with minimal code? Simplifying helps find the cause.

Compare to working code. If it worked before, what changed? Git diff between working and broken states.

Key Takeaways

Share full error messages and stack traces with Claude

Include reproduction steps and relevant context

Let Claude investigate rather than guessing at causes

Fix root causes, not just symptoms

Use /debug for complex problems requiring detailed logging

Verify fixes with tests and edge case checks

A bug is not fixed until verification passes

Try It Yourself

Practice debugging with these steps:

Find a bug in your project (or introduce one temporarily).

Copy the error message and share it with Claude.

Tell Claude how to reproduce the error.

Ask Claude to investigate and explain what's causing it.

Ask Claude to fix the bug.

Ask Claude to verify the fix works.

Run your tests to confirm nothing else broke.

This exercise builds your debugging workflow with Claude Code.

Sources

https://code.claude.com/docs/en/common-workflows - Debugging workflows and error sharing

https://code.claude.com/docs/en/best-practices - Root cause analysis and verification

https://code.claude.com/docs/en/skills - The /debug bundled skill