AI Coding

How to Debug Code with AI: A Step-by-Step Guide

To debug code with AI, give the assistant four things: the exact error message, the smallest piece of code that causes it, what you expected to happen and what actually happened. Ask it to explain the cause before it writes a fix, then test the fix yourself and ask why it works. ChatGPT, Claude and Gemini handle this well in a browser, GitHub Copilot does it inside your code editor, and Chrome DevTools has a built-in AI helper for website bugs. This guide shows a step-by-step method, a prompt you can copy, a worked example and the mistakes that make AI fixes go wrong.

What should you collect before asking AI?

Most bad AI answers come from missing context, not from a weak model. Before you open a chat, gather:

  1. The full error message: copy the complete text, including the file name and line number, not just the last line.
  2. The relevant code: the function where the error happens and anything it calls. Smaller is better, as long as the bug still appears.
  3. Expected vs actual result: “I expected 15, but I get 105” is far more useful than “it doesn’t work.”
  4. Your setup: the language and version, framework, browser or operating system, and what you changed just before the bug appeared.

If there is no error message, write down the exact steps that make the problem happen. A bug you can reproduce every time is a bug you can fix.

How do you debug code with AI, step by step?

  1. Reproduce the bug. Run the code and confirm you can trigger the problem on purpose.
  2. Shrink it. Remove unrelated code until you have the smallest example that still fails. This step alone often reveals the cause.
  3. Ask for a diagnosis first. Paste the error and code, and ask “What is causing this?” before asking for a fix. An explanation lets you judge whether the AI understood the problem.
  4. Ask for the smallest fix. Request a minimal change rather than a rewrite, so you can see exactly what changed.
  5. Test the fix. Run the original failing case, then a few normal and edge cases, such as empty input, zero or very large values.
  6. Understand it. Ask “Why does this fix work, and could it break anything else?” If you cannot explain the fix, do not ship it.

A debugging prompt you can copy

Paste this into ChatGPT, Claude or Gemini and fill in the brackets:

I'm debugging [language/framework and version].

Goal: [what the code should do]
Expected: [expected result]
Actual: [actual result or error]

Full error message:
[paste error]

Code:
[paste the smallest code that shows the bug]

What I already tried: [list]

1. Explain the most likely cause in plain language.
2. Suggest the smallest fix and show only the changed lines.
3. Tell me how to test that the fix works.
4. If you need more information, ask me before guessing.

The last line matters. It stops the assistant from inventing details about files it has not seen. For more prompt techniques, read how to write better AI prompts.

A worked example: a total that adds up wrong

Here is a common beginner bug in JavaScript. A shopping form should add a price and a shipping fee:

const price = document.getElementById('price').value;
const shipping = document.getElementById('shipping').value;
const total = price + shipping;
console.log(total); // shows "105" instead of 15

There is no error message, so the prompt says: “Expected 15, actual 105, price is 10 and shipping is 5.” A good AI answer explains that .value always returns text, so the plus sign joins two strings instead of adding two numbers. The smallest fix is to convert the values first:

const total = Number(price) + Number(shipping);

Testing then shows a second issue the first answer may not mention: an empty field becomes 0, and a typo like “1o” becomes NaN. Asking “What inputs could still break this?” leads to adding a check that both values are valid numbers. That follow-up question is where much of the real debugging happens.

Which AI tool is best for which bug?

ToolBest forKeep in mind
ChatGPT, Claude or Gemini in the browserUnderstanding error messages, small scripts, learning why a bug happenedSees only what you paste, so give full context
GitHub Copilot in VS Code or JetBrainsBugs inside a real project, failing tests, code spread across filesFree plan has monthly limits; check its suggestions before accepting
Coding agents such as Claude Code or CursorBugs that need running commands, reading many files and editing several of themReview every change; use version control so you can undo
AI assistance in Chrome DevToolsLayout problems, failed network requests and slow web pagesMust be turned on in DevTools settings and requires signing in to Chrome

For a detailed comparison of the editor tools, see GitHub Copilot vs Claude Code vs Cursor. To pick a chat assistant, read ChatGPT vs Claude vs Gemini.

How do you debug with GitHub Copilot in VS Code?

Copilot Chat in VS Code includes slash commands built for debugging. GitHub’s own guide describes this workflow:

  • /explain: select the code or the error and ask Copilot to explain what is happening.
  • /fix: ask for a suggested fix for the selected code or the problem you describe.
  • /fixTestFailure: find and fix the cause of a failing test.
  • /tests: generate tests, so the same bug cannot quietly come back.
  • /startDebugging: get help setting up an interactive debugging session with breakpoints.
  • @workspace: give Copilot context from the whole project when the bug spans several files.

A good order is /explain first, then /fix, then /tests. Combine Copilot with the normal debugger too: set a breakpoint with F9, start with F5 and step through the code with F10 and F11 to watch the values change.

How do you debug a website with AI in Chrome?

Chrome DevTools has an AI assistance panel powered by Gemini. Open DevTools, go to Settings, turn on AI assistance and accept the terms. Then select an element, a network request or a performance recording and open the AI assistance panel to ask questions about it. It can explain why an element is styled a certain way, why a request failed and what is slowing a page down. You need to be signed in to Chrome, be at least 18 and live in a supported region.

Mistakes to avoid when debugging with AI

  • Pasting secrets: remove passwords, API keys, tokens and customer data before you paste code. Learn why in what is an API key, and review your AI chatbot privacy settings.
  • Accepting a full rewrite: a rewritten file can fix your bug and add three new ones. Ask for the smallest change.
  • Skipping the test: AI fixes can look right and still fail. Always rerun the case that broke.
  • Ignoring security: in Veracode’s 2025 study of more than 100 AI models, about 45% of code samples contained a security flaw. Be extra careful with code that handles logins, user input, files or payments.
  • Going in circles: if the AI suggests the same broken fix twice, start a new chat with a cleaner, smaller example. A long chat full of failed attempts often confuses the model.
  • Trusting invented details: AI can mention functions, settings or package versions that do not exist. Check names in the official documentation.

What if AI cannot find the bug?

Go back to basic techniques and bring the results to the AI:

  • Add logging: print the values of key variables before and after the line that fails.
  • Undo recent changes: if the code worked yesterday, compare it with the last working version in Git.
  • Check the inputs: many bugs come from data that is empty, in the wrong format or a different type than expected.
  • Explain it out loud: describing the code line by line, even to yourself, often reveals the mistake.

Each of these gives the AI new facts, which is what it needs to give a better answer.

Frequently asked questions

Can ChatGPT debug code?

Yes. ChatGPT, Claude and Gemini can explain errors, find likely causes and suggest fixes in most popular languages. They work best when you paste the full error, a small code example and the expected result.

What is the best free AI for debugging?

For quick questions, the free versions of ChatGPT, Claude and Gemini all work well. For bugs inside a project, GitHub Copilot’s free plan adds AI help directly in VS Code. Our guide on how to use Claude shows how to share files with an assistant.

Is it safe to paste my code into an AI chatbot?

For personal projects and public code it is usually fine. For work code, check your company’s policy first, and never paste passwords, keys or customer data.

Will using AI stop me from learning to debug?

Only if you copy fixes without reading them. Asking the AI to explain the cause and the fix builds your skills faster. See how to learn to code with AI.

Debug smarter, not longer

AI will not replace careful testing, but it can turn an hour of searching into a few minutes. Collect the error and a small example, ask for an explanation before a fix, test the result and make sure you understand it. If you build apps mostly by prompting, read what is vibe coding to learn the risks and how to manage them.

Sources

This article is based on the official documentation and reporting listed in the sources above, checked on October 21, 2026. Features and prices change, so confirm details on the official pages before you buy. ShokokoTech does not accept payment for coverage. Read our editorial policy.

Ayoub

Ayoub is a web developer and the founder of ShokokoTech. He builds the free browser tools on this site and writes step-by-step guides on AI tools, web tools and online privacy, based on official documentation.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button