Hibakeresés módszeresen, feltevésekkel

Megállítja a találgatós javítgatást: a tünetekből rangsorolt feltevéseket állít fel, mindegyikhez egy ellenőrző lépést ad, és csak a bizonyított ok után javít. A javítás a lehető legkisebb marad.

Vibe codingProfiAjánlott eszközök: ChatGPT, Claude, GeminiFrissítve:

Töltsd ki a saját adataiddal

A sárgával jelölt részeket cseréld a saját adataidra.

Segíts megkeresni egy hiba okát tapasztalt fejlesztőként. Amíg az ok nincs bizonyítva, ne írj javítást. Mit kellene történnie: [ELVÁRT MŰKÖDÉS] Mi történik helyette: [TÉNYLEGES MŰKÖDÉS] Pontos hibaüzenet és naplórészlet: """ [HIBAÜZENET] """ Az érintett kód: """ [KÓD] """ Mikor jött elő, mi változott előtte: [MI VÁLTOZOTT] Amit már kipróbáltam: [EDDIGI PRÓBÁLKOZÁSOK] Környezet (nyelv, keretrendszer, verziók, hol fut): [KÖRNYEZET] Így dolgozz: 1. Foglald össze egy mondatban, mit állít a hibaüzenet, és hol keletkezik. 2. Állíts fel legfeljebb négy feltevést az okról, valószínűség szerint rendezve. Mindegyiknél: mi szól mellette, mi ellene a megadott adatokból. 3. Minden feltevéshez egy ellenőrző lépést adj, amely egyértelműen megerősíti vagy kizárja (naplósor, egy parancs, egy érték kiíratása). A legolcsóbb, legtöbbet eldöntő lépéssel kezdd. 4. Állj meg, és kérd az eredményt. 5. Ha megvan az ok: a legkisebb javítás, amely megszünteti. Mutasd a változást soronként, és magyarázd el, miért ez az ok. 6. Hogyan ellenőrizzem, hogy a javítás működik, és hogy nem rontott el mást. 7. Mi előzné meg a hiba visszatérését (teszt, ellenőrzés, típus). Ne írd át a kódot „általános javítás” címén. Ha a megadott részletből nem dönthető el, mondd meg, melyik fájlt vagy adatot kéred még.

EllenőrzésCtrl + Enter: másolás

Példa: kitöltve, mintaválasszal

Elvárt működés
A kosár végösszege frissül, amikor módosítom a darabszámot
Tényleges működés
A darabszám változik, a végösszeg csak oldalfrissítés után
Hibaüzenet
Nincs hibaüzenet a konzolon
Kód
function Cart({ items }) { const [list, setList] = useState(items); const total = useMemo(() => list.reduce((s, i) => s + i.price * i.qty, 0), []); const setQty = (id, qty) => { const it = list.find(i => i.id === id); it.qty = qty; setList(list); }; ... }
Mi változott
Tegnap az AI „teljesítményoptimalizálást” végzett
Eddigi próbálkozások
Kétszer kértem, hogy javítsa meg; mindkétszer átírta a fél komponenst, a hiba maradt
Környezet
React 18, Vite
Mintaválasz (Claude)

1. Összefoglaló: nincs kivétel; ez állapotfrissítési hiba, a felület nem számol újra.

2. Feltevések

  1. A useMemo függőségi listája üres (nagyon valószínű). Mellette: a [] miatt a végösszeg csak az első megjelenítéskor számolódik ki. A tegnapi „optimalizálás” is erre utal.
  2. Az állapot helyben módosul (valószínű). it.qty = qty után setList(list) ugyanazt a tömböt adja át, a React nem lát változást. Ellene: a darabszám a leírásod szerint mégis frissül, tehát valami kivált újrarajzolást.
  3. A szülő felülírja az items értéket (kevéssé valószínű).

3. Ellenőrzés, ezzel kezdd: írd át ideiglenesen a useMemo második paraméterét [list]-re, és nézd meg, változik-e a végösszeg.

Írd meg, mi történt, és folytatom.

(Eredmény: a végösszeg csak minden második módosításnál frissül.)

5. Ok: mindkét feltevés igaz. Javítás, két sor:

  • useMemo(..., [list])
  • setList(list.map(i => i.id === id ? { ...i, qty } : i));

7. Megelőzés: az exhaustive-deps lint szabály bekapcsolása jelezte volna az üres függőségi listát.

Szemléltető minta, Claude segítségével készült: azt mutatja, milyen jellegű és felépítésű válaszra számíthatsz. A többi ajánlott eszközzel a prompt várhatóan ugyanígy használható, de nem mindegyikben próbáltuk ki. A te eredményed más lesz. Hogyan készülnek a példák?

Miért működik?

A kódoló AI-k tipikus hibája, hogy a tünetre azonnal javítást írnak, és ha nem jön be, még többet írnak át. A prompt megtiltja a javítást, amíg az ok nincs bizonyítva, és minden feltevéshez egy olcsó ellenőrzést kér.

A megállás a 4. pontnál a lényeg: az eredményt te adod vissza, így a következő lépés tényre épül, nem újabb találgatásra.

Mire figyelj?

  • A modell csak azt a kódot látja, amit beillesztesz. Ha a hiba máshol van, kérni fogja; add meg, ne találgasson.
  • Hibaüzenetben és naplóban lehet jelszó, kulcs vagy személyes adat. Takard ki, mielőtt beilleszted.
  • A javítás után futtasd le a 6. pont ellenőrzését is; a „most működik” egy esetre igaz.

Folytasd ezekkel

Ugyanabban a beszélgetésben küldd el, a válasz után.

  • Írj tesztet, amely elbukott volna ezen a hibán.
  • Nézd át a komponens többi részét ugyanilyen hibamintát keresve, de ne módosíts semmit, csak listázz.

Kapcsolódó promptok

Összes vibe coding prompt

Ha az AI körbe-körbe javít

Ötödször javítja ugyanazt a hibát, és egyre rosszabb? Ez a prompt megállítja a kapkodást: összefoglalja, mit próbáltatok, új hipotézist kér, és tiszta lappal indít.

Vibe coding

Biztonsági audit fenyegetésmodellel

Végigveszi, ki és hogyan élhetne vissza az alkalmazásoddal, majd a kódot a tipikus hibákra nézi át: jogosultság, bemenet, titkok, függőségek. Súlyosság szerint rangsorol, és jelzi, amit a beillesztett részből nem lát.

Vibe coding

Tesztterv a kritikus felhasználói utakra

Kockázat szerint rangsorolja, mit kell tesztelni az alkalmazásodban, majd megírja a legfontosabb teszteket. Kézzel elvégezhető ellenőrzőlistát is ad azoknak, akik nem írnak automata tesztet.

Vibe coding

Projektterv mérföldkövekkel és elfogadási feltételekkel

Az ötletedből olyan tervet ír, amelyet a kódoló AI lépésenként végre tud hajtani: hatókör, adatmodell, mérföldkövek, és mindegyiknél az, hogy miből látod, hogy kész. Külön listázza, ami szándékosan kimarad.

Vibe coding