When something goes wrong, the right debugging prompt can save hours of frustration. Learn how to effectively communicate issues to HeyBoss AI and get quick fixes.

Every great debugging prompt has 5 key parts:

Structure:

"On [page/component], when I [action], it should [expected result] but instead it [actual result]. Console shows: [error message]."

Example:

"On the /checkout page, when I click 'Submit Payment', it should process the payment and redirect to /success, but instead it shows a blank screen. Console shows: 'Cannot read property price of undefined'."

Structure:

"On [page], the [element] looks wrong. It should [expected appearance] but it [actual appearance]. Happens on [device/browser]."

Example:

"On the homepage, the hero section text is unreadable. It should be white text on a dark background, but it's showing dark text on dark background. Happens on mobile devices (tested iPhone 12)."

Structure:

"[Page/component] is very slow. It takes [time] to [action]. Should be faster than [expected time]."

Example:

"The /products page is very slow. It takes 5-6 seconds to load the product list. Should be faster than 2 seconds. The page has 100 products showing all at once."

Bad debugging prompt: "My page doesn't work"

Good debugging prompt:

"The /dashboard page shows a blank white screen after I added the new analytics widget. It worked before adding the widget. Console error: 'stats.map is not a function'. The dashboard should display user stats in cards."

Even better - add what you tried:

"The /dashboard page shows a blank screen. I tried refreshing and clearing cache, same issue. Console error: 'stats.map is not a function'. This started right after adding the analytics widget. The stats variable might not be an array."

Bad: "Button broken"

Good:

"The 'Add to Cart' button on the product page at /products/123 doesn't respond when clicked. It should add the product to cart and show a success message. No console errors. The button appears normal but nothing happens on click."

Bad: "Form not validating"

Good:

"The contact form at /contact submits even when email field is empty. It should show an error 'Email is required' and prevent submission if email is blank. The validation works for the name field but not email field."

Bad: "Data missing"

Good:

"The /blog page should display a list of blog posts but shows 'No posts found' even though there are 15 posts in the database. Console shows the API call succeeds with data, but the posts array is undefined in the component. This started after I added pagination."

Bad: "Doesn't look good on mobile"

Good:

"On mobile devices (tested iPhone 13 and Samsung Galaxy), the navigation menu overlaps the logo on screens smaller than 768px. On desktop it looks perfect. The menu should collapse into a hamburger icon on mobile."

Console errors are gold for debugging. Always include them in your prompt.

Don't just say: "There's an error in console"

Include the full error:

"Console error: 'TypeError: Cannot read property 'map' of undefined at ProductList.jsx:25'. This appears when loading the /products page."

Sometimes a picture is worth a thousand words.

When to use screenshots:

Good screenshot debugging prompt:

"[Screenshot attached] The spacing between cards is wrong. They should have 24px gap like the design mockup, but they're cramped with only 8px. This is on the /features page."

When something breaks after it was working, mention what changed.

Template:

"[Feature] was working correctly but broke after [change]. Now it [current behavior]. Should [expected behavior]."

Example:

"The user login was working fine but stopped working after I added the email verification feature. Now users can't log in even with correct credentials—page just refreshes. Should redirect to /dashboard after successful login. Console shows 'user.emailVerified is undefined'."

For API-related issues, check the Network tab.

Example:

"The /dashboard page should display user data from GET /api/user but the API returns 404. Network tab shows the request goes to '/api/users' (wrong endpoint - should be singular 'user'). Need to fix the API URL in the dashboard component."

Use Chat Mode to debug step-by-step without making code changes.

Chat Mode debugging workflow:

Example Chat Mode conversation:

You: "My form submission isn't working"

AI: "Which form and page? What happens when you try to submit?"

You: "Contact form at /contact. When I click submit, nothing happens. No errors."

AI: "Is the submit button inside the form tags? Can you see a console error?"

You: "Yes it's inside form. Console shows 'handleSubmit is not defined'"

AI: "The handleSubmit function is missing. Let me add it..."

Narrow down where the bug is:

"The bug is on the /checkout page, specifically in the payment form component, not in the cart summary or shipping form. The payment form's credit card validation is rejecting valid card numbers."

List exact steps to reproduce the bug:

If you have a working version, compare:

"The login works in the /staging environment but fails in production. Same code, same database. In production, it returns 500 error. In staging, it works perfectly."

Bad: "Something is broken"

Good: "The search feature returns no results even when there are matching products"

Bad: "Error: undefined"

Good: "When loading /dashboard, Console shows: 'Cannot read property name of undefined' at Dashboard.jsx:42. This is the line where we display user.name."

Bad: "The database is broken"

Good: "User data isn't displaying. API returns 200 with correct data in Network tab, but the component shows 'Loading...' forever. Might be a state update issue."

Bad: "Fix the login, cart, and checkout pages"

Good: Debug one issue at a time, starting with the most critical

Before submitting a debugging prompt, verify you have:

For broken functionality:

"Debug why [feature] doesn't work. Expected: [X]. Actual: [Y]. Error: [console error]"

For visual issues:

"Fix the layout issue on [page] where [element] [problem]. Should look like [description or screenshot]"

For performance:

"Optimize [page] - it's slow. Takes [X seconds] to [action]. Should be under [Y seconds]"

For API issues:

"Fix API call to [endpoint] on [page]. Returns [status code]. Expected [correct response]"

That's okay! Describe what you see happening vs. what should happen. The AI can often diagnose the issue from symptoms alone. Use Chat Mode to have an interactive debugging conversation.

Absolutely! Error messages are crucial for debugging. Copy the FULL error message, even if it seems like gibberish. The AI understands these errors and can fix them quickly.

Mention that it's intermittent and describe when it happens vs when it doesn't. Example: 'The search works for single-word queries but fails for multi-word searches' or 'Loading works fine on first visit but breaks on page refresh'.

Very detailed for complex bugs, less so for obvious ones. If the bug is 'button doesn't respond on click', you don't need 10 steps. But if it's a complex checkout flow bug, list every single step.

Technically yes, but it's better to debug one critical issue at a time. This makes it easier to verify each fix works before moving to the next issue.

Try being more specific about browser/device, include a screenshot, or list exact reproduction steps. Sometimes bugs only happen under specific conditions—make sure to mention those.

See also: Troubleshooting Common Issues | Prompt Engineering Fundamentals

Need help? Contact Support