Fix it smarter

1. Fix it smarter

Hi again! In this video, we’ll learn how to debug smarter with Cursor to guide it toward better fixes.

2. Getting started

Sometimes, AI doesn’t get everything right on the first try. That’s okay! The real power of Cursor is how quickly we can identify what went wrong and fix it —

3. Getting started

step by step,

4. Getting started

with clear feedback. We’ll continue with our Next.js portfolio app and look at a function that isn’t behaving as expected.

5. Updating code faster

If we run the app and open localhost, at the moment, our portfolio site doesn’t have an image. Let’s change this by updating this icon and adding a background image to it. To do that, we’ll locate the function that renders that section inside page.tsx, highlight it, and add it to the Cursor agent’s chat as a reference. We can now prompt with these instructions. Once we’ve chosen the image we want as backdrop, we send the request. Cursor will guide us through the steps needed to upload the image: in this case, it’s asking us to upload the image in the public folder inside the app. Let’s go ahead and do that. Once the image is uploaded, we’ll ask Cursor to update the code. It will add the img tag or background CSS, and fix the import/source path. Let’s review the suggested diff in the agent and approve the changes. We can then visit localhost to view the latest changes. If something seems off, we can always iterate further.

6. Debugging with Terminal

Another really great feature about Cursor is how it helps us debug by reading errors we highlight. If we notice something off, we can take the error message in the terminal and use it directly in our next prompt.

7. Debugging with Terminal

We can highlight the error message, add it to the Cursor agent, and give it this prompt. By referencing the right lines of code or message, Cursor gets exact context — it can trace imports, fetch calls, and state logic without guessing. Within seconds, Cursor suggests a fix. We review the diff, approve the changes, and run the app again.

8. Visual debugging

Debugging isn’t just about numbers. Sometimes, it’s visual. If our layout looks off or an image doesn’t load correctly, we can drag a screenshot of the issue right into the chat. And prompt the AI to fix the issue.

9. Visual debugging

Cursor visually analyzes the screenshot, checks our component structure, and adjusts the code. Always remember that small, clear prompts lead to fast, accurate results. Each time we clarify the problem using real logs, terminal output, or screenshots, Cursor learns to diagnose smarter.

10. Let's practice!

Let’s debug some code now!

Create Your Free Account

By continuing, you accept our Terms of Use, our Privacy Policy and that your data is stored in the USA.