module-10-debugging-and-testing.md

Module 10: Debugging and Testing Your Applications

Goal: Learn how to find and fix problems, and test your apps thoroughly

Estimated Time: 30-40 minutes

---

🎯 What You'll Learn in This Module

By the end of this module, you will:

• Understand how to read and interpret error messages
• Know how to use Chat Mode for debugging
• Master using History to revert changes
• Learn how to edit messages to undo mistakes
• Understand testing strategies
• Be able to debug common issues
• Know how to test your apps thoroughly

---

📖 Lesson 1: Understanding Error Messages

What Are Error Messages?

Error messages are Lovable's way of telling you something went wrong. They might look scary at first, but they're actually helpful clues!

Common Types of Errors

1. Build Errors

What they look like:

• Red text or error indicators
• Messages like "Failed to build" or "Error in code"
• Line numbers or file names

What they mean:

• Something in your code has a problem
• Usually a syntax error or missing piece

Example:

Error: Missing closing bracket in Header.jsx line 15

What to do:

1. Read the error message carefully
2. Note the file and line number
3. Ask Chat Mode: "What does this error mean and how do I fix it?"
4. Or ask Agent Mode: "Fix the error in Header.jsx line 15"

2. Runtime Errors

What they look like:

• Errors that happen when your app is running
• Messages in the browser console
• Things not working as expected

What they mean:

• Your app built successfully, but something breaks when used
• Usually a logic error or missing connection

Example:

Error: Cannot read property 'name' of undefined

What to do:

1. Check what action caused the error
2. Use Chat Mode to investigate: "Why is this error happening?"
3. Fix the underlying issue

3. Connection Errors

What they look like:

• "Failed to connect" messages
• API errors
• Database connection issues

What they mean:

• Can't reach a service (database, API, etc.)
• Usually a configuration issue

Example:

Error: Failed to connect to database

What to do:

1. Check if backend is enabled
2. Verify API keys are set up
3. Ask Chat Mode: "Why can't I connect to the database?"

How to Read Error Messages

Step 1: Don't Panic!

• Errors are normal
• They're clues, not failures
• Every developer gets errors

Step 2: Read the Whole Message

• Error messages usually tell you what's wrong
• Look for file names and line numbers
• Note any specific details

Step 3: Understand the Context

• What were you doing when it happened?
• What feature were you building?
• What changed recently?

Step 4: Use Chat Mode

[Paste the error message]

Can you help me understand what this error means and how to fix it?

💡 Beginner Tip: Error messages are your friends! They tell you exactly what's wrong. Learn to read them, and debugging becomes much easier.

---

📖 Lesson 2: Using Chat Mode for Debugging

Why Chat Mode is Perfect for Debugging

Chat Mode is ideal for debugging because:

• ✅ It investigates without making changes
• ✅ It explains what's wrong
• ✅ It suggests solutions
• ✅ It helps you understand the problem

Debugging Workflow with Chat Mode

Step 1: Describe the Problem

Be specific:

The contact form isn't submitting. When I click submit, nothing happens and I don't see any error message.

Not helpful:

It's broken

Step 2: Provide Context

Include relevant information:

I just added a contact form to my homepage. It has name, email, and message fields. When users click submit, nothing happens. The form validation seems to work (shows errors for empty fields), but submission doesn't work.

Step 3: Let Chat Mode Investigate

Chat Mode will:

• Look at your code
• Check the form setup
• Identify the problem
• Explain what's wrong

Step 4: Get the Solution

Chat Mode will:

• Explain the issue
• Suggest how to fix it
• Provide a plan
• You can then implement it

Example Debugging Conversation

You (Chat Mode):

My login page isn't working. When I enter credentials and click login, nothing happens. Can you help me debug this?

Chat Mode:

• Investigates the login code
• Checks authentication setup
• Looks for issues

Chat Mode Response:

I found the issue. The login form isn't connected to the authentication backend. The form submits, but there's no handler to process it. 

Here's what needs to be fixed:
1. Connect the form to the authentication service
2. Add error handling for wrong credentials
3. Add loading state during login
4. Redirect after successful login

Would you like me to implement this fix?

You:

Yes, please implement the fix

Chat Mode:

• Provides plan or switches to Agent Mode
• Fixes the issue

Advanced Debugging with Chat Mode

Debugging Complex Issues

Example:

My task list isn't showing tasks. I can see tasks in the database, but they're not displaying on the page. Can you investigate why?

Chat Mode will:

• Check the database query
• Check the display component
• Check data flow
• Identify where the problem is

Debugging Performance Issues

Example:

My page is loading very slowly. Can you help me identify what's causing the slowdown?

Chat Mode will:

• Check for large images
• Look for inefficient code
• Suggest optimizations

Debugging Design Issues

Example:

On mobile, the navigation menu overlaps the content. Can you help me fix the responsive design?

Chat Mode will:

• Check CSS and layout
• Identify responsive issues
• Suggest fixes

💡 Beginner Tip: Chat Mode is like having a debugging partner. Use it liberally when things don't work!

---

📖 Lesson 3: Using History to Revert Changes

What is History?

History is a record of all changes made to your project. It's like a time machine - you can go back to any previous version!

Why History is Important

• ✅ Safety net - Undo mistakes easily
• ✅ Experiment freely - Try things without fear
• ✅ Compare versions - See what changed
• ✅ Recover work - Get back to a working state

How to Access History

Step 1: Find History

1. Look for "History" or "Version History" in your project
2. Usually in:
   • Top menu
   • Sidebar
   • Project settings
   • Or ask Lovable: "Show me the project history"

Step 2: View History

You'll see:

• Timeline - Changes listed chronologically
• Descriptions - What was changed in each version
• Timestamps - When changes were made
• Preview - See what each version looked like

Step 3: Understand the Timeline

Most recent at top:

• Latest changes first
• Older changes below
• Easy to see progression

How to Revert to a Previous Version

Method 1: Revert from History

1. Open History
2. Find the version you want to go back to
3. Preview it - Click to see what it looked like
4. Click "Revert" or "Restore"
5. Confirm - You'll be asked to confirm
6. Your project reverts - Goes back to that version

Method 2: Ask to Revert

Revert to the version before I added the navigation menu

or

Go back to yesterday's version

Method 3: Revert Specific Changes

Undo the last change I made

or

Remove the feature I just added

Example Workflow: Make Mistake → Revert → Iterate

Scenario: You're building a homepage and make a change that breaks the layout.

Step 1: Make a Change

You ask:

Change the homepage layout to a three-column grid

Result: The layout breaks - columns are misaligned, content overlaps.

Step 2: Identify the Problem

You notice:

• Layout looks wrong
• Content is overlapping
• Mobile view is broken

Step 3: Use Chat Mode to Understand

You (Chat Mode):

The homepage layout I just changed looks broken. Can you help me understand what went wrong?

Chat Mode:

• Explains the issue
• Suggests the layout needs adjustment
• Recommends reverting and trying a different approach

Step 4: Revert the Change

Option A: Use History

1. Go to History
2. Find version before the grid change
3. Click "Revert"
4. Project goes back to working state

Option B: Ask to Revert

Revert the last change - go back to before I changed the layout to three columns

Step 5: Try a Different Approach

You:

The three-column grid didn't work. Let me try a different approach. Create a two-column layout with the main content on the left and sidebar on the right, but make sure it's responsive.

Result: Better layout that works!

Step 6: Iterate and Improve

You:

The two-column layout works, but can you add more spacing and make the sidebar slightly narrower?

Result: Perfect layout!

What You Learned:

• ✅ Made a mistake (that's okay!)
• ✅ Identified the problem
• ✅ Reverted safely
• ✅ Tried a better approach
• ✅ Iterated to perfection

💡 Beginner Tip: Reverting is not failure - it's learning! Every developer reverts changes regularly.

---

📖 Lesson 4: Editing Messages to Undo Mistakes

What is Message Editing?

Message editing lets you modify or delete previous messages to change what Lovable did.

When to Edit Messages

Edit messages when:

• ✅ You asked for something you don't want
• ✅ You want to refine a previous request
• ✅ You made a mistake in your prompt
• ✅ You want to try a different approach

How to Edit Messages

Step 1: Find the Message

1. Look at your message history - Usually visible in the chat/input area
2. Find the message that made the change you want to undo
3. Look for edit option - Usually an edit icon or button

Step 2: Edit the Message

Option A: Modify the Message

• Click edit
• Change the text
• Save
• Lovable will adjust based on the new message

Option B: Delete the Message

• Click delete
• Remove the message
• Lovable will undo that change

Step 3: See the Result

• Changes update automatically
• Your project adjusts
• You can continue from there

Example: Editing to Fix a Mistake

Original Message:

Change all buttons to red

Result: All buttons are now red, but you realize you only wanted one button red.

Fix by Editing:

1. Find the message "Change all buttons to red"
2. Edit it to:

   Change only the "Submit" button to red, keep all other buttons blue
   

3. Save - Lovable updates accordingly

Example: Refining a Request

Original Message:

Add a contact form

Later, you realize you want more:

1. Find the message "Add a contact form"
2. Edit it to:

   Add a contact form with name, email, phone, and message fields. Include validation and a success message.
   

3. Save - Lovable enhances the form

💡 Beginner Tip: Don't be afraid to edit messages! It's a powerful way to refine and fix things.

---

📖 Lesson 5: Testing Strategies

Why Testing Matters

Testing ensures your app:

• ✅ Works as expected
• ✅ Doesn't break
• ✅ Provides good user experience
• ✅ Is ready for users

When to Test

Test:

• ✅ After building a new feature
• ✅ After making changes
• ✅ Before deploying
• ✅ When something seems wrong
• ✅ Regularly throughout development

What to Test

1. Functionality Testing

Does it work?

• ✅ All buttons work
• ✅ Forms submit correctly
• ✅ Links navigate properly
• ✅ Features function as intended

How to test:

• Click everything
• Fill out all forms
• Try all interactions
• Test edge cases

2. Visual Testing

Does it look right?

• ✅ Layout is correct
• ✅ Colors are right
• ✅ Spacing is good
• ✅ Text is readable

How to test:

• View on different screen sizes
• Check all pages
• Verify images load
• Test on different browsers

3. User Flow Testing

Can users complete tasks?

• ✅ Sign up works
• ✅ Login works
• ✅ Can create content
• ✅ Can navigate easily

How to test:

• Go through complete user journeys
• Test as a new user
• Test as a logged-in user
• Try different paths

4. Error Testing

What happens when things go wrong?

• ✅ Error messages are helpful
• ✅ Forms validate correctly
• ✅ Invalid inputs are handled
• ✅ App doesn't crash

How to test:

• Submit empty forms
• Enter invalid data
• Try to break things
• Test error scenarios

Testing Checklist

Before deploying, test:

Functionality:

• All buttons work
• All forms submit
• All links work
• Navigation works
• Features function correctly

Visual:

• Looks good on desktop
• Looks good on mobile
• Looks good on tablet
• Colors are correct
• Text is readable

User Experience:

• Easy to use
• Clear instructions
• Helpful error messages
• Fast loading
• Smooth interactions

Security:

• Authentication works
• Users can only access their data
• Forms are secure
• No sensitive data exposed

💡 Beginner Tip: Test as you build! Don't wait until the end. Catch issues early when they're easier to fix.

---

📖 Lesson 6: Common Debugging Scenarios

Scenario 1: Feature Not Working

Problem: You added a feature, but it doesn't work.

Debugging Steps:

1. Check if it was built:

   • Is the code there?
   • Are the files created?
   • Use Chat Mode: "Did the feature get added correctly?"

2. Check for errors:

   • Look for error messages
   • Check browser console
   • Ask Chat Mode: "Are there any errors in this feature?"

3. Test the feature:

   • Try using it
   • See what happens
   • Note any error messages

4. Fix the issue:

   • Use Chat Mode to understand the problem
   • Use Agent Mode to fix it
   • Test again

Scenario 2: Something Broke After a Change

Problem: Everything worked, you made a change, now something is broken.

Debugging Steps:

1. Identify what changed:

   • Check History
   • See what you modified
   • Use Chat Mode: "What did I change that might have broken this?"

2. Revert if needed:

   • Go back to working version
   • Or revert just the problematic change

3. Try a different approach:

   • Make the change differently
   • Break it into smaller steps
   • Test as you go

Scenario 3: Data Not Saving

Problem: Users can submit forms, but data isn't being saved.

Debugging Steps:

1. Check backend:

   • Is Lovable Cloud enabled?
   • Is database set up?
   • Ask Chat Mode: "Is the database configured correctly?"

2. Check form connection:

   • Is form connected to backend?
   • Are fields mapped correctly?
   • Use Chat Mode: "Is the contact form saving to the database?"

3. Check database:

   • Can you see data in database?
   • Are fields correct?
   • Test manually

4. Fix the connection:

   • Reconnect form to database
   • Verify field mapping
   • Test again

Scenario 4: Design Looks Wrong

Problem: The design doesn't match what you wanted.

Debugging Steps:

1. Check what was built:

   • Compare to your request
   • See what's different
   • Use Chat Mode: "Why doesn't this match my design request?"

2. Identify specific issues:

   • Colors wrong?
   • Layout wrong?
   • Spacing wrong?
   • Be specific

3. Fix incrementally:

   • Fix one issue at a time
   • Test after each fix
   • Iterate until perfect

Scenario 5: Performance Issues

Problem: App is slow or laggy.

Debugging Steps:

1. Identify the problem:

   • What's slow? (loading, interactions, etc.)
   • When does it happen?
   • Use Chat Mode: "Why is my app running slowly?"

2. Check common issues:

   • Large images?
   • Too many requests?
   • Inefficient code?
   • Chat Mode can identify these

3. Optimize:

   • Fix identified issues
   • Test performance
   • Iterate

💡 Beginner Tip: Most problems have patterns. As you debug more, you'll recognize common issues faster.

---

🛠️ Hands-On Practice: Complete Debugging Workflow

Let's practice the complete debugging process!

Practice: Debug a Broken Feature

Scenario: You have a contact form that isn't working.

Step 1: Identify the Problem

1. Try to use the form:

   • Fill it out
   • Submit it
   • See what happens (or doesn't happen)

2. Note the symptoms:

   • Does nothing happen?
   • Shows an error?
   • Submits but doesn't save?

Step 2: Investigate with Chat Mode

Ask Chat Mode:

My contact form isn't working. When I submit it, nothing happens. Can you investigate what's wrong?

Chat Mode will:

• Check the form code
• Check backend connection
• Identify the issue
• Explain what's wrong

Step 3: Understand the Problem

Read Chat Mode's explanation:

• What's the root cause?
• Why isn't it working?
• What needs to be fixed?

Step 4: Fix the Issue

Option A: Use Agent Mode

Fix the contact form based on what Chat Mode found. Connect it to the backend and make it save submissions.

Option B: Use Chat Mode's Plan

• Click "Implement the plan"
• Let Agent Mode fix it

Step 5: Test the Fix

1. Try the form again:

   • Fill it out
   • Submit it
   • Check if it works

2. Verify data is saved:

   • Check database
   • Confirm submission was stored

3. Test error handling:

   • Submit empty form
   • Submit invalid data
   • See if errors are handled

Step 6: If Still Broken

1. Go back to Chat Mode:

   The form still isn't working. Can you check again?
   

2. Or revert and try differently:

   • Go to History
   • Revert to before the form
   • Try a different approach

What You Learned:

• ✅ How to identify problems
• ✅ How to use Chat Mode for debugging
• ✅ How to fix issues
• ✅ How to test fixes
• ✅ How to iterate if needed

---

🛠️ Hands-On Practice: Revert and Iterate

Let's practice the revert workflow!

Practice: Make a Mistake, Revert, and Fix

Step 1: Make an Intentional "Mistake"

Ask Lovable:

Change all the text on the homepage to bright pink and make the font size 8px

Result: Homepage is now unreadable (pink text, tiny font)

Step 2: Identify the Problem

• Text is too small to read
• Pink color is hard to read
• Design is broken

Step 3: Revert Using History

1. Go to History
2. Find the version before you changed the text
3. Click "Revert"
4. Confirm
5. Homepage is restored!

Step 4: Try a Better Approach

Now ask:

Improve the homepage typography: increase heading sizes slightly, improve line spacing for readability, and use a more readable font. Keep the existing color scheme.

Result: Much better! Readable and improved.

What You Learned:

• ✅ How to use History
• ✅ How to revert changes
• ✅ How to try better approaches
• ✅ That mistakes are okay - you can always fix them!

---

✅ Module 10 Checklist

Before moving to Module 9 (or completing the course), make sure you can:

• Read and understand error messages
• Use Chat Mode to debug problems
• Use History to revert changes
• Edit messages to fix mistakes
• Test your apps thoroughly
• Debug common issues
• Follow a debugging workflow
• Revert and iterate confidently

---

🤔 Common Questions (FAQ)

Q: What if I can't understand an error message?

A: Use Chat Mode! Paste the error and ask: "Can you explain what this error means?"

Q: How far back can I revert?

A: You can revert to any previous version in your History. There's no limit!

Q: Will reverting delete my work?

A: Reverting goes back to a previous version, but you can always go forward again. Your work isn't permanently lost.

Q: Should I test after every change?

A: It's a good practice! Test frequently to catch issues early.

Q: What if Chat Mode can't find the problem?

A: Try being more specific, or break the problem into smaller parts. Sometimes you need to investigate step by step.

Q: Can I revert just one feature?

A: Yes! You can revert to a specific version, or ask Lovable to remove just that feature.

---

🎯 What's Next?

Excellent work! You now know how to:

• Debug problems effectively
• Use Chat Mode for troubleshooting
• Revert changes safely
• Test your applications
• Fix issues confidently

Ready for Module 9? In the final module, you'll build a complete real-world project, applying everything you've learned including debugging and testing!

---

💡 Pro Tips for Beginners

1. Don't fear errors - They're learning opportunities!

2. Use Chat Mode liberally - It's your debugging partner

3. Test as you build - Catch issues early

4. Revert freely - It's not failure, it's learning

5. Read error messages - They tell you what's wrong

6. Document what works - Note successful approaches

7. Be patient - Debugging takes time, but you'll get better

---

Module 10 Complete! 🎉