The Definitive System to Diagnose, Fix, and Bug-Proof Your Build
Gianluca Giuliani
1
The Only Debugging Guide You Need
This guide is based on the official Lovable documentation, material from other developers and my personal experience, put into simple and accessible language. This is the place where you will find practical solutions for real problems that every Lovable developer faces.
Each section of this guide follows the best proven debugging methodology, with examples and easy to understand language for non-technical users.
2
The Basics
Precise Diagnosis
Identify what is happening vs. what should be happening
Clear Communication
Clear and precise prompts that AI can understand and act on
Logical Order
Build your app in the correct sequence to avoid conflicts
3
Use the "Try to Fix" Button First
Your Best Friend to solve issues
Errors are common. Always test before going to the next step.
Why use "Try to Fix" first?
Expert Problem-Solver
The AI already knows the most common problems and how to solve them
Speed
It's the quickest and easiest way to solve errors, saving time and credits
Integrated Knowledge
Lovable will check your logs and it knows all of your code
4
What if the 'Try to Fix' Doesn't Work?
First of all, DON'T PANIC!
It’s time to investigate more deeply.
5
Play Detective 🕵️
Diagnose Unexpected Behaviors
If the "Try to Fix" button doesn't work, play detective:
1. Diagnostics
Break down the problem; ask “Where did this start failing?” or “What changed?"
2. Spot Patterns
Errors doesn't come from nothing; look for inconsistencies
3. Document the Problem
Put together a "report" of the errors
6
Debugging: Diagnostics
Break down the problem. Try to understand the root of the problem, use chat mode ask questions and observe wrong behaviours.
Don't say "e-mail doesn't work". Instead, send a prompt like:
"After I fill the form and hit send, the information is not stored on my database and I don't receive any e-mail confirming that the information was submitted.
I expect a flow of: Fill the form → Store Information on Table X → E-mail confirmation"
7
Debugging: Spot Patterns
Errors don't happen all of the sudden, find the root. Knowing how to ask is key.
- Frequency
Does it always happen or only sometimes?
- Context
Try to understand exactly when it happens
- Workflow
What where the actions before the error appeared
8
Diagnostics Framework
- 🔍 WHAT I WAS TRYING TO DO: (Objective)
- ⚠️ WHAT ACTUALLY HAPPENED: (Incorrect Behavior)
- ✅ WHAT I EXPECTED INSTEAD: (Expected Behavior)
- ⏱️ WHEN IT HAPPENS: (Every Time / Sometimes / Specific Situations)
Using this framework will help you organize what you are observing, beforing reporting the errors.
9
Prompt Better
C.L.E.A.R. Framework
- Context: Keep prompts short, targeted, and focused on key terms
- Logic: Structure them in a clear, coherent, and sequential order
- Specific: Clearly specify the type of output you expect
- Action: Allow flexibility to analyze results and adjust the prompt accordingly
- Result: Critically assess the relevance, accuracy, and completeness of the output
10
C.L.E.A.R. Prompt
Don't write "payment is not working". Instead, send a prompt like:
"CONTEXT: Payment is not working on my courses app
PROBLEM: When I click at the payment button, it is not processed
CURRENT BEHAVIOR: The button loads but does not process the payment
EXPECTED BEHAVIOR: Button should load a payment form to process the payment
TEST: Input a 0,01 dollar charge and I will use my credit card to test it"
11
Prompts for Different Situations
Functionalities Errors
"The (function) is not working properly. When the User (does action), it should (happen this), instead it (happens this). Could you think of a plan to fix it?"
Interface Errors
"On the (page), the table is not centered. The (element) should be (in this way) however looks (like this). Could you adjust the layout of it?"
Performance Errors
"The system is slow when (specific situation happens). It takes (X time) to (do something). How can we optimize it to work faster?"
- You can add screenshots or videos to show the errors
12
Preventing Errors
How to Build better (with less problems)
1. FOUNDATION - Basic Structure
Create the system's structure with simple navigation between pages
2. USER INTERFACE - Design System
Choose the colors, style, and fonts, creating a consistent layout across all pages
3. FUNCTIONALITIES - Fundamentals
Implement the main functionalities of your system
4. OTHER FUNCTIONALITIES - Extras
Extra features to make your system even better
5. REFINEMENT - Final Polish
Improve texts, adjust spacing, and add finishing touches
13
Follow This and You Will…
Reduce Problems
Avoids unnecessary changes to the system
Have Easier Debugging
Fewer variables to consider when something goes wrong
Help AI
Clear context helps AI make build better
Save Time (and Credits)
Less rework and corrections
14
Chat Mode is your Best Friend
The more you use, the less rework you will have
Brainstorm
"I want to add an admin panel to my system, with X features. How can we design and structure it? Let's brainstorm, if you need more info, ask me more questions."
Debugging
"I am having a problem with the sign up. The e-mail is not being sent after registering. Could you check the logs and see what is happening?"
Understand
"Now the problem is gone, awesome! Could you explain how you fixed and how can I avoid similar problems in the future?"
Treat it like a colleague, use it to brainstorm ideas, solutions, error fixes. It is better to use chat mode a few times, before implementing a solution. On average, I use chat mode from 2 to 4 times before actively prompting something.
Sometimes Lovable.Dev will use an AI model that does not exist, use Chat Mode to check it.
💡TIP: If an edge-function is not working, ask Lovable to analyze the logs. You can also send / upload the documentation of an API you might be using.
15
Situational Problems
User Interface
White preview, out-of-place elements, broken responsiveness
Functionality
Unresponsive buttons, forms not saving, broken navigation
Supabase
Bad connection, data not appearing, remix issues
Performance
Slow situations, loading problems
16
User Interface: Blank or Empty Preview
If things are not looking good…
What it means: Could be a simple or critical error
Try Ctrl+Shift+R first. If it doesn't work, then:
"My screen / preview is completely blank. It used to show (this thing ). Could you identify the error and create a plan on how to fix it?"
If it persists:
"The screen / preview remains blank. Could you check for: Syntax errors in the code, issues with imports, conflicts between components; after, based on your findings, design a plan to fix the errors"
17
User Interface: Misaligned Components
Disorganized Layout
A good prompt:
"On page (X ) , the components are misaligned:
- (Component Y) should be (in this place ) instead of (this place )
- (Pop-up Z) is overflowing / going out of the screen
- The spacing between (Component Z) and (Component W) is (too large / small )
Could you develop a plan to solve these issues?"
Attach a screenshot of what it is not looking good.
Identify Which elements are out of place
Compare How it should be vs. how it is
Request a Plan to fix it
18
User Interface: Mobile Responsiveness
As of late 2025, mobile devices account for the majority of global web traffic, with estimates around 58.7% to 64.35%.
Points of Attention
- Menus and tables not fitting the screen
- Texts too big or too small
- Buttons difficult to click
- Overlapping Components
- Components going off the screen
19
User Interface: Unresponsive Buttons
If this, then that…
"The ( button X ) on the ( page / table / form Y ) is not working.
When I click, it should ( expected result) , instead it is doing ( unexpected result ) . Could you analyze the error and fix the functionality?"
Identify the specific button
Exact name and location
( attach a screenshot )
Describe the current behavior
What happens when you click
Explain the expected behavior
What should happen
20
Functionality: Forms Not Saving Data
Critical Functionality Issue
"The ( form X ) on the ( page Y ) is not saving the data. When I click, it should ( expected result, like save the data) , instead it is doing ( unexpected result, not saving it ) . Could you analyze the error / logs and fix the functionality?"
Fields Filled
List all fields you filled in
Action Taken
Describe exactly what you did to save
Expected Outcome
What should happen after saving
21
Functionality: Screen Navigation Broken
Wrong Workflow
Structured solution:
"Screen navigation is not working: - On ( page X ), I click the ( link / button Y ) on the footer, that should redirect to the ( page Z ), but it is redirecting me to ( page W ). Could you analyze it and fix the navigation flow?"
22
Supabase / Database
When Data Doesn't Work
Lost Connection
Data doesn't load, authentication error
Missing Data
Saved but not showing in the list
Remix Errors
Copied project lost connection
23
Supabase: Lost Connection
Data not loading, authentication error
"I am experiencing a loss of connection to Supabase. The data is not loading and authentication failing. (Share any specific error messages encountered ) . Could you investigate and help re-establish the connection to Supabase?"
Verify Credentials
Confirm that API keys are correct
Test Connection
Validate if Supabase is responding / connected
Reconfigure
Re-establish the connection if necessary
24
Supabase / Database: Missing Data
Saved but Not Showing in the List
The data I submitted through the application is not visible in the expected display list:
- Data submitted: (details of the data saved )
- Expected display location: (specific area or list in the UI )
- Current view: (description of what is currently shown or missing )
Please investigate if there is an issue with how this data is being retrieved.
Possible Causes
- Display filters are misconfigured
- Problem with the search query
- Data saved in the wrong table
- Cache not updated
What You Should Check
- Confirm saving to the database
- Validate retrieval query
- Test list refresh
- Check permissions
25
Performance: Slow Situations
Gotta go fast!
We're observing significant performance degradation in the application. Please provide details on the following:
SLOW SITUATIONS:
- When performing [specific user action]: observed delay of [duration]
- Screen [name of screen/module]: experiences slow load times
- Function [name of specific function/feature]: intermittently freezes or becomes unresponsive for [duration]
IDEAL BEHAVIOR:
- All interactions should be fluid, smooth and completed quickly
Analyze the current code, the reported issues and improve the performance of this app.
26
Images Take Too Long to Load
UI Optimization
Specific Problem
PROBLEM
Images within the application are experiencing significant delays in loading and appearing.
CONTEXT
- Approximate Image Size: (if known )
- Occurrences: (specific pages )
- Affected Devices: (computer / mobile/ both )
OPTIMIZATION GOAL
Optimize image delivery and rendering to ensure fast loading times across all affected areas and devices.
Common Solutions
- Resize images
- Compress without losing quality
- Use optimized formats
- Implement lazy loading
27
Crisis Mode
When All Else Fails:
Error Loops
Version Restore Reset
28
Persistent Error Loops
When "Try to Fix" Doesn't Stop Failing
CONTEXT: I am currently experiencing a persistent error loop where previous attempts to resolve issues have inadvertently introduced new problems, hindering progress and requiring a fresh perspective.
EXPECTED RESULT: (what you wanted to do )
PROBLEM: The application is caught in a self-perpetuating cycle where each attempted solution creates additional errors.
CURRENT RESULT: ( what you are getting )
ATTEMPTS MADE: (what has already been tried )
Analyze the code, the attempts made and, after that, help me brainstorm a different approach on how to achieve the expected result.
This strategy breaks the vicious cycle and allows for a fresh approach.
29
Version Restore
Controlled Reset Strategy
A simple solution is to restore to a working version of the app, so you can start over.
You can use the Version History function on the top of the chat box.
Or you can go to the message where you have a good working version and revert the app to that version.
💡TIP: When adding new features / performing changes:
- Always test everything everytime
- Write on the prompt to not change anything but what you want (e.g.: Do not change anything else / the layout )
30
Prevention and Best Practices
Avoiding Future Problems
1. Custom Knowledge Base
Makes edits smarter and more aligned
2. Incremental Development
Small, tested, safe steps
3. Checkpoints
Save functional states
4. Regular Testing
Validate each change
5. Documentation
Record working solutions
31
Custom Knowledge Base
What to include in your Custom Knowledge:
Project guidelines: What to prioritize, what to avoid or how decisions should be made.
User personas: Detailed descriptions of your target users and their needs.
Design assets: Color palettes, typography, layout rules and other visual elements.
Coding conventions: Naming conventions, formatting rules and file structure.
External references: Links to API docs, internal tools, design systems or style guides.
Security practices: Guidelines for secure coding, data protection and handling sensitive information.
Compliance requirements: Any legal or regulatory requirements your project must adhere to.
32
Incremental Development
"Let's implement (feature X ), help me come up with a strategic plan to achieve:
STEP 1: (first part )
STEP 2: (second part )
STEP 3: (third part )
We should start with step 1, and then move to the other steps."
1. Implement
A small part
2. Test
Validate functionality
3. Confirm
Ensure stability
4. Next Step
Continue incrementally
33
Becoming a Debugging Expert
1. Try to Fix First
Always your first action
2. Precise Diagnosis
Observe, compare, and report
3. Specific Prompts
Clear and structured communication
4. Logical Order
Build from basic to complex
Awesome! You've learned techniques that will help you solve 99% of the most common issues that you can face on Lovable. Each error you face and fix, makes you a better, more experienced vibe-coder. Remember to not panic and don't let anything hold you back.
Lovable Debugging Guide