Fixa buggar med AI:n

Vad du bygger

Ett smidigt arbetssätt för att krossa buggar i din Lovable-kod med hjälp av Cursors AI. Du förvandlar frustrerande felmeddelanden och sega knappar till fungerande kod på bara några sekunder utan att behöva googla.

Innan du börjar

• Ditt Lovable-projekt öppnat lokalt i verktyget Cursor.
• Din app igång i webbläsaren så att du kan testa den live.
• Grundläggande koll på hur du öppnar utvecklarverktygen i din webbläsare (oftast genom att högerklicka på sidan och välja "Granska" eller "Inspektera").

Steg för steg

1. Hitta felet i webbläsaren – Gå till din app i webbläsaren, högerklicka och välj "Granska". Klicka på fliken "Konsol" (Console) för att se röda felmeddelanden som dyker upp när något kraschar. Kopiera hela texten för det fel som visas.

2. Markera koden och starta AI:n – Gå tillbaka till Cursor och öppna filen där du tror att felet ligger. Markera den del av koden som krånglar och tryck på snabbkommandot Cmd + K (eller Ctrl + K på Windows).

3. Be AI:n om en direkt fix – Skriv vad du vill att AI:n ska göra direkt i rutan som poppar upp. Klistra in felmeddelandet du kopierade i steg 1 och tryck på Enter.

   Fixa detta felmeddelande från webbläsarens konsol: [klistra in ditt felmeddelande här]

4. Granska och godkänn ändringen – AI:n föreslår nu en ändring direkt i din fil. Rödmarkerad kod är det som tas bort, och grönmarkerad kod är det nya förslaget. Klicka på knappen "Accept" för att spara ändringen, eller "Reject" om du vill kasta bort den.

5. Använd chatten för diffusa problem – Om inget kraschar i konsolen men en knapp ändå inte gör något när du klickar på den, öppna Cursors chattpanel i sidomenyn med Cmd + L (eller Ctrl + L).

6. Beskriv ditt symptom på vanlig svenska – Skriv ett @ i chatten och välj den fil som innehåller din knapp. Beskriv sedan vad som händer, eller snarare inte händer, med egna ord.

   @Button.tsx När jag klickar på den här knappen händer absolut ingenting. Det blir inga felmeddelanden i konsolen heller. Vad kan vara fel?

7. Kör in koden från chatten – När AI:n ger dig en lösning i chatten behöver du inte kopiera den för hand. Klicka bara på den lilla ikonen "Apply" (ser ut som en liten sida med en pil) som ligger precis ovanför kodblocket i chatten så skrivs koden in på rätt ställe i din fil automatiskt.

Byggloftets tips

• Spara fungerande kod först. Vår isbjörnskompis Bygge påminner alltid om att göra en Git-commit eller spara en kopia av filerna innan du påbörjar en buggjakt. Då kan du alltid backa om AI-fixen gör saker värre.
• En bugg i taget. Om du har tre olika fel i din app, lös det första helt och hållet innan du ens nämner de andra för AI:n. Annars blir den lätt förvirrad och blandar ihop lösningarna.
• Fråga varför det blev fel. När AI:n har fixat ditt problem, skriv "Varför uppstod det här felet från början?" i chatten. Det är det snabbaste sättet att faktiskt lära sig koda och undvika samma misstag nästa gång.

Vanliga fel

• "AI:n ändrar helt fel saker i min fil": Du har troligen markerat för mycket eller för lite kod när du tryckte Cmd + K. Tryck på "Reject", markera ett mindre och mer specifikt kodstycke och försök igen.
• "Koden hamnar i en ond spiral av nya fel": Ibland försöker AI:n laga en lagning som i sin tur skapar nya fel. Gör en "Undo" i din fil för att gå tillbaka till startläget, förklara i chatten vad det nya felet blev och be den testa ett annat spår.

Du är klar när...

Du ser att funktionen i din webbläsare gör precis det du vill och konsolfliken är helt ren från röda felmeddelanden.