Skip to main content

What is debugging?

When something in your app isn’t working the way it should, debugging means figuring out what’s wrong and fixing it.
In Rocket, you do this by explaining the problem clearly so the AI can help you fix it without starting over.
What you’ll learn:
  • How to describe problems so they’re easy to fix
  • How to avoid asking for too many changes at once
  • How to make small, safe fixes instead of big rewrites
  • How to get help when the AI doesn’t understand what you need
  • What works and what doesn’t when asking for help

When something goes wrong

Before you write a long message, try these quick checks:
1

Refresh the page

Sometimes the page just needs to reload
2

Undo your last change

If you know what broke it, undo it
3

Check for typos

Look for spelling mistakes in names and labels
4

Check your settings

Make sure your connections and settings are correct
Quick tip: Try simple commands before writing a long debugging message:
  • /Fix Navigation Issues - for broken links or pages not loading
  • /Fix Layout Issues - for spacing, alignment, or things looking wrong
  • /Fix Theme Switching - for problems switching between light and dark mode

How to describe problems

The best way to get help is to explain your problem clearly. Use this simple template:
1. What I expected:
   [Describe what should happen]

2. What actually happened:
   [Describe what happens instead]

3. Error message (if any):
   [Copy any error messages you see, or say "no error message"]

4. Where this is happening:
   [Which page or part of your app]

5. What I already tried:
   [List anything you already checked or changed]
Then ask Rocket to help:
Based on this information, explain what's most likely causing this issue.
Then suggest a safe, minimal change to fix it.

Example

Here’s how to use the template:
1. What I expected:
   On the login page, when I enter my login information and click submit, 
   I should go to the main dashboard page.

2. What actually happened:
   I click submit, the button shows it's working for a moment, 
   but then I stay on the login page. The page address doesn't change.

3. Error message (if any):
   I see an error message that says: "Cannot read property 'userId' of undefined"

4. Where this is happening:
   The login page

5. What I already tried:
   - Checked that my login information is correct
   - Made sure the information is being saved
   - Tried opening in a different browser

Step-by-step guide when something breaks

Follow these steps when something isn’t working:
1

Check for error messages

Look for any error messages on the screen or in the browser.If you see an error message:
  • Copy the exact error message text
  • Use it in your problem description template
  • You’re ready to ask for help
If you don’t see an error message:
  • Move to the next step
Success check: You’ve either copied the error message or confirmed there isn’t one.
2

Check if something looks wrong

Look at what’s showing on the page and compare it to what you expected.If something looks wrong:
  • Describe what you expected to see
  • Describe what you actually see
  • Use this in your problem description template
  • You’re ready to ask for help
If everything looks correct:
  • Move to the next step
Success check: You’ve either described what looks wrong or confirmed everything looks correct.
3

Check if nothing happens

If clicking buttons or interacting with the page does nothing at all:
  • Look more carefully for error messages you might have missed
  • Check if there are any messages that might explain what’s wrong
  • Describe what should happen when you interact with the page
  • Describe what actually happens (nothing)
Success check: You’ve gathered enough information to describe the problem clearly.
4

Write your message

Once you have information from any of the steps above, you have everything you need to write a clear message asking for help.Use the template from the “How to describe problems” section above to organize your information.
Success check: You’ve written a clear message with all the details Rocket needs to help you.

Quick commands for common problems

Rocket has special commands that can fix common problems quickly. Try these first before writing a longer message.
  • /Fix Layout Issues - Fixes things that look misaligned or spaced wrong
  • /Fix Layout Issues in pricing grid - Fixes layout in a specific area
  • /Fix Layout Issues for mobile breakpoints - Fixes responsive layout issues
  • /Fix Theme Switching - Fixes problems switching between light and dark mode
  • /Fix Supabase Authentication Issues - Fixes common login and signup problems
  • /Fix Supabase Authentication Issues for users who can sign up but cannot log in - Fixes specific auth scenarios
  • /Organize Code - Cleans up messy or hard-to-find code
  • /Organize Code in src/components/dashboard.tsx - Organizes a specific file
Use @ followed by the file name to make sure changes only happen in that fileExample: @pages/login.jsx fix the submit button behavior
If these commands don’t solve your problem, use the template below to describe it in detail.

Common problems and how to fix them

Here are examples of how to describe common problems:
The popup window opens correctly, but closing it doesn't work:
- Clicking outside the popup does nothing
- The "Cancel" button sometimes works, sometimes doesn't

Only fix how the popup closes:
- Clicking the area behind the popup should close it
- The "Cancel" button should always close it
- Pressing the Escape key should close it

Don't change how it looks or any other parts of the page.
This list is showing the same items twice, and sometimes 
it doesn't update when I add a new item.

First, explain in simple terms what might be causing:
- Why items appear twice
- Why new items don't show up

Then suggest a small change to fix both problems, 
and only make that change.
Try this command first: /Fix Layout Issues - Sometimes layout problems make pages feel slow
If that doesn’t help, use this:
This page feels slow when loading a lot of information.

Check for things that might be making it slow:
- The page refreshing when it doesn't need to
- Loading the same information more than once
- Loading too much information when the page first opens

Explain what's making it slow, then suggest specific ways to make it faster. 
Don't change how it looks - just focus on making it work better.
To limit changes to one file, use: @pages/profile.jsx followed by your message - This keeps changes only in the profile file
Then describe the problem:
@pages/profile.jsx fix the submit button behavior. Check what happens when clicked and when form is submitted.

On the "Save" button in the profile form, clicking it does nothing:
- The button is visible and I can click it
- Nothing happens when I click
- No error message appears
- The information doesn't save

Don't change how the form looks or how it's styled.
To limit changes to one file, use: @pages/tasks.jsx followed by your message - This keeps changes only in the tasks file
Then describe the problem:
@pages/tasks.jsx check whether the save function is being called and whether data is being sent correctly.

When I update a task and click "Save", the changes show up temporarily
but disappear after I refresh the page. The information isn't being saved 
to where it's stored.

Check:
- Whether the save function is being called
- Whether the information is being sent to where it's stored correctly
- Whether the response is being handled properly

Focus only on making sure information saves. Don't change how it looks.
To limit changes to one file, use: @pages/dashboard.jsx followed by your message - This keeps changes only in the dashboard file
Then describe the problem:
@pages/dashboard.jsx check whether the user list is set up correctly and whether data is being loaded properly.

The user list doesn't show up on the dashboard page.
The page loads, but the list area is empty even though there are users 
stored in the system.

Check:
- Whether the list is set up and used correctly
- Whether the information is being loaded properly
- Whether there are any errors preventing it from showing

Don't change other parts of the dashboard.

Example: Fixing a login problem

Here’s how a vague message becomes a clear one.
1

Bad example - Too vague

Problems:
  • Doesn’t say which page
  • Doesn’t explain what should happen
  • No error message or details
The login is broken, please fix.
2

Better example - Still needs work

Better, but still missing:
  • What “doesn’t work” means
  • Where this is happening
  • Whether an error appears
Login doesn't work after the user signs in.
3

Good example - Clear and helpful

First, try this command: /Fix Supabase Authentication Issues - This might fix login problems automatically
If that doesn’t work, use this detailed description:
1. What I expected:
   On the login page, when I enter my login information and click submit, 
   I should go to the dashboard page.

2. What actually happened:
   I click submit, the button shows it's working for a moment,
   then I stay on the login page. The page address doesn't change.

3. Error message:
   I see an error message that says: "Cannot read property 'userId' of undefined"

4. Where this is happening:
   The login page

5. What I already tried:
   - Checked that my login information is correct
   - Made sure the information is being saved
   - Tried opening in a different browser
   - Tried /Fix Supabase Authentication Issues
From here, you can ask:
@pages/login.jsx based on this information, identify the most likely cause of the issue
and propose a small, focused fix. Explain the change before applying it.
Or use the command first:
  • /Fix Supabase Authentication Issues - Try this before detailed debugging

What to avoid

Here are common mistakes people make when asking for help:

Being too vague

1

Bad example

Too vague: Doesn’t explain what’s broken or where it’s happening.
The form is broken.
2

Better example

Better: Explains what’s wrong and where it’s happening.
On the "Contact" form, clicking "Submit" does nothing:
- Nothing happens when I click
- No success or error message appears
- No information is being sent

Help me fix only the submit button behavior.
3

Good example

Best: Uses a command to limit changes to one file, preventing accidental changes elsewhere.
@pages/contact.jsx fix the submit button behavior. Nothing happens when clicked, no error appears, and no data is sent.

Asking for too much at once

1

Bad example

Too broad: “Checkout process” could mean many things - form, payment, shipping, etc.
Fix the checkout process.
2

Better example

Better: Focuses on one specific problem - the payment button.
On the checkout page, the payment button shows it's working but never finishes.
The form checks work correctly. Focus only on making the payment button work.
3

Good example

Best: Uses a command to limit changes to one file and focuses on one specific issue.
@pages/checkout.jsx fix the payment button so it completes properly. The form validation works correctly.

Not giving enough details

1

Bad example

Too vague: Doesn’t explain what table, what information, or what might be wrong.
The table isn't showing information.
2

Good example

Much better: Explains which table, what’s expected, and what to check.
The "Orders" table is empty even though there are orders stored in the system.
The table layout looks correct, but no rows appear. Check how information 
is loaded for this table.

Saying “sometimes it doesn’t work”

1

Bad example

Too vague: “Doesn’t always work” doesn’t explain when it fails or what conditions cause the problem.
Filtering doesn't always work.
2

Good example

Much better: Explains exactly when it works, when it doesn’t, and what to focus on.
On the "Orders" table, filtering by status works for
"Pending" and "Completed", but selecting "Cancelled"
shows an empty table even though there are cancelled orders
stored in the system.

Focus on making filtering work for the "Cancelled" status.
Don't change how the table looks or how it's styled.

When your messages aren’t working

If you’ve used the template above but Rocket keeps making changes that don’t help, try these steps:
  • Be more specific about the problem
  • Use the template structure above
  • Add more details about the problem
  • Include error messages and where it’s happening
  • Clearly state what NOT to change
  • Be specific about what you want fixed
  • Break the problem into smaller parts
  • Fix one issue at a time
  • Point to similar parts that work correctly
  • Show what you want it to look like
Example: If Rocket changed the wrong parts, your message might have been:
1

Bad example

Too vague: “Fix the form” could mean anything - layout, styling, behavior, fields, etc.
Fix the form
2

Better example

Better: Specifies what to fix and what NOT to change.
Fix only the submit button behavior. Don't change how the form looks, how it's styled, or any other fields.
3

Good example

Best: Uses a command to limit changes to one file, preventing accidental changes elsewhere.
@pages/form.jsx fix only the submit button behavior. Don't change how the form looks, how it's styled, or any other fields.
Tip: If you’re stuck, try explaining the problem to someone else in plain English. The words you use to explain it are often the words you should use in your message to Rocket.