Paano Sumulat ng Magandang Bug Report (para sa AI o Developer)

Ang magandang bug report ay nagpapahintulot sa ibang tao, developer man o AI, na makita ang parehong problemang nakita mo, nang hindi ka na kailangang tanungin pa. Kailangan nito ng tiyak na pamagat, eksaktong mga hakbang para maulit ito, kung ano ang inaasahan mo, kung ano ang aktwal na nangyari, anumang mensahe ng error na kinopya nang eksakto sa salita, at kung saan ito nangyari: aling page, browser, device, at user. Isang bug kada report, may kasamang screenshot kung makakatulong.

Mas matagal ang pag-unawa sa karamihan ng bug kaysa sa pag-aayos nito. Tinatanggal ng malinaw na report ang bahagi ng pag-unawa. Mas mahalaga ito sa mga AI tool: hindi makapagtatanong pabalik ang AI kung ano ang ibig mong sabihin sa "weird ang checkout", kaya nanghuhula ito, at maaaring masira ng maling hula ang ibang bahagi.

Ang template

Kopyahin ito at punan:

Pamagat: [Ano ang mali, saan] — hal. "Tinatanggihan ng booking form ang oras pagkatapos ng 6pm"

Mga hakbang para maulit:
1. ...
2. ...
3. ...

Inaasahan: [ano ang dapat mangyari]
Aktwal: [ano ang nangyari sa halip]

Mensahe ng error: [eksaktong teksto, kung meron]
Saan: [page/URL, browser, device, naka-log in bilang aling user]
Gaano kadalas: [tuwing subok / minsan / isang beses]
Screenshot o recording: [nakalakip]

Ipinapaliwanag ng natitirang gabay ang bawat bahagi.

Hakbang 1: Subukang maulit muna

Bago sumulat, subukang ulitin ang bug. Malalaman mo kung aling mga hakbang ang mahalaga, at kung nangyayari ito sa bawat pagkakataon.

• Magsimula sa malinis na estado: i-refresh, o mag-log out at mag-log in.
• Itala ang bawat click at bawat itinype mo.
• Subukang hanapin ang pinakamaikling landas na nagti-trigger nito.
• Subukan sa ibang browser o account. Kung sa isang user lang ito nangyayari, malaking palatandaan iyon.

Para sa mas marami pa rito, tingnan ang paano mag-debug ng app na ginawa ng AI.

Hakbang 2: Sumulat ng tiyak na pamagat

Dapat sabihin ng pamagat kung ano ang mali at saan, para malaman ng sinumang nagbabasa ng listahan kung aling bug ito.

Hakbang 3: Ilista ang eksaktong mga hakbang

Numerohan ang mga ito. Maging literal: aling page, aling button, ano ang itinype mo.

1. Mag-log in bilang customer (test account: customer@example.com).
2. Idagdag ang "Starter kit" sa cart.
3. Ilagay ang discount code na WELCOME10 at pindutin ang Apply.
4. Pindutin ang Checkout.

Ang "Subukang mag-checkout gamit ang code" ay nalalaktawan ang mga detalyeng madalas mahalaga: aling user, aling produkto, aling code, at kung na-apply muna ito.

Hakbang 4: Inaasahan kumpara sa aktwal

Dito nakasentro ang report. Sabihin ang dalawa, dahil ang pagkakaiba ang bug.

• Inaasahan: Bumubukas ang checkout page na may 10% discount na nakikita sa kabuuan.
• Aktwal: Nagpapakita ang button ng spinner sa loob ng isang segundo, at pagkatapos ay walang nangyayari. Kapag walang discount code, gumagana ang checkout.

Kapag walang "inaasahan", baka hindi malaman ng mambabasa na mali ang kilos. Kapag walang "aktwal", hindi nila alam kung ano ang hahanapin.

Hakbang 5: Kopyahin nang eksakto ang mga error

Ang mga mensahe ng error ang pinakamabilis na daan patungo sa sanhi. Kopyahin bilang teksto, salita por salita, huwag i-paraphrase.

Saan sila hahanapin:

• Sa screen: anumang mensaheng ipinapakita ng app.
• Browser console: buksan ang developer tools (F12, o right-click → Inspect) at tingnan ang Console tab para sa mga pulang linya.
• Network tab: sa developer tools, hanapin ang pumalyang request at itala ang URL at status code nito (halimbawa POST /api/checkout → 500).
• Server logs, kung may access ka.

Ang linyang tulad ng TypeError: Cannot read properties of undefined (reading 'percent') at checkout.ts:48 ay kadalasang direktang tumuturo sa problema.

Hakbang 6: Magdagdag ng konteksto

• Saan: URL ng page, ang kapaligiran (preview, staging, o live).
• Sino: aling user o papel: admin, member, naka-log out.
• Device at browser: maaaring mahalaga ang "Safari sa iPhone" kumpara sa "Chrome sa Windows".
• Data: anumang kakaiba sa record, gaya ng napakahabang teksto, espesyal na karakter, o maraming item.
• Kailan nagsimula: ang "pagkatapos ng pagbabago kahapon sa discount codes" ay napakahalaga.
• Gaano kadalas: tuwing subok, o isang beses sa sampu.

Hakbang 7: Ipakita ito

Ang screenshot na may bilog sa problema, o maikling screen recording, ay nag-aalis ng kalabuan, lalo na sa mga bug sa layout. Kung tumatanggap ng larawan ang AI tool mo, maglakip ng isa. I-crop ang anumang pribado, kasama ang keys at data ng ibang tao.

Pagsulat ng bug report para sa AI builder

Gumagana bilang prompt ang parehong istruktura. Dalawang dagdag ang nakakatulong:

• Sabihin kung ano ang hindi dapat magbago, para hindi magdulot ng bagong problema ang pag-aayos.
• Hilingin na i-verify ang pag-aayos, hindi lang isulat ito.

Naka-log in bilang customer, may "Starter kit" sa cart at na-apply ang code na WELCOME10, walang nangyayari kapag pinindot ang Checkout. Inaasahan: bumubukas ang checkout page na may 10% off sa kabuuan. Aktwal: sandaling spinner, pagkatapos ay wala. Ipinapakita ng network tab na nagbalik ng 500 ang POST /api/checkout. Gumagana ang checkout kapag walang code. Hanapin ang sanhi at ayusin ito nang hindi binabago kung paano kinakalkula ang presyo para sa mga order na walang code. Pagkatapos, suriin ang checkout gamit ang percentage code, fixed-amount code, at walang code.

Kung hindi ka sigurado sa sanhi, humingi muna ng diagnosis:

Huwag pa munang baguhin ang code. Batay sa report na ito, ano ang malamang na mga sanhi, at ano ang magpapatunay sa bawat isa?

Mga karaniwang pagkakamali

• "Sira na." Walang mga hakbang, walang inaasahang resulta, walang maaaksyunan.
• Ilang bug sa iisang report. May naaayos, may nawawala.
• Mga error na na-paraphrase. Ang "may undefined na bagay" ay nagtatago sa kapaki-pakinabang na bahagi.
• Nalilimutan ang user o papel. Maraming bug ang tumatama lang sa mga admin, o sa mga bagong user.
• Pagdi-describe lang ng gustong ayos ("magdagdag ng null check") sa halip na ng problema.
• Pagbabahagi ng secrets sa screenshot o nakapaste na log.

Checklist

• Naulit ko ang bug at nahanap ang pinakamaikling mga hakbang.
• Sinasabi ng pamagat kung ano ang mali at saan.
• Numerado at literal ang mga hakbang.
• Nakasaad ang inaasahan at ang aktwal.
• Kinopya nang eksakto ang mga mensahe ng error, kasama ang pumalyang request at status code.
• Kasama ang page, kapaligiran, user, device, at browser.
• Sinabi ko kung gaano kadalas at kailan ito nagsimula.
• May nakalakip na screenshot o recording, na inalis ang pribadong data.
• Isang bug kada report.

Pag-uulat ng bug sa agent ng Mythex

Sa project ng Mythex, ang report ang prompt. Ilang feature ang nakakatulong:

• Maglakip ng screenshot ng preview o error screen, hanggang 5 file kada mensahe.
• /fix ay nagpopokus sa agent sa pag-aayos ng bug; ang Plan mode naman ay nagpapahintulot dito na mag-imbestiga bago mag-edit.
• /test ay nagpapaulit sa agent ng mga daloy sa mismong preview at nag-uulat ng nakikita nito.
• Revert to this point ay bumabawi sa pag-aayos na nagpalala ng mga bagay.

Gumagamit ang pahina ng docs na debugging with prompts ng parehong istruktura ng mga hakbang / inaasahan / aktwal. Para sa loop ng pag-aayos at pagsuri sa paligid nito, tingnan ang paano mag-iterate sa app na ginawa ng AI.

Mga tanong