Cara Menyahpepijat Aplikasi yang Dibina dengan AI: Kaedah Praktikal

Untuk menyahpepijat aplikasi yang dibina dengan AI, mula-mula buat pepijat itu berlaku semula secara sengaja, kemudian kumpulkan bukti — langkah tepat, mesej ralat, dan apa yang dipaparkan oleh konsol dan tab rangkaian pelayar — dan berikannya kepada AI sebagai "Saya buat X, jangkakan Y, dapat Z". Jika sesuatu pembetulan memburukkan keadaan, buat asal semula ke versi terakhir yang berfungsi dan jangan menimbunkan pembetulan lain di atasnya. Anda tidak perlu membaca kod untuk melakukan semua ini dengan baik.

Panduan ini meliputi keseluruhan kitaran, termasuk lawatan ringkas kepada alat pemaju pelayar untuk orang yang bukan pemaju.

Kitaran penyahpepijatan

Setiap pembetulan pepijat, sama ada oleh orang atau AI, mengikut kitaran yang sama:

1. Ulang — buat pepijat itu berlaku dengan boleh dipercayai.
2. Perhatikan — kumpul mesej ralat dan apa yang aplikasi sedang lakukan.
3. Terangkan — beri AI langkah yang tepat, hasil yang dijangka dan hasil sebenar.
4. Betulkan — biarkan AI menukar satu perkara.
5. Sahkan — ulang langkah yang sama dan pastikan ia dibetulkan, serta tiada yang berdekatan rosak.
6. Buat asal semula jika perlu — jika keadaan bertambah teruk, batalkan dan cuba lagi dengan maklumat yang lebih baik.

Kebanyakan masa yang terbuang pada aplikasi yang dibina dengan AI datang daripada melangkau langkah 1, 2 dan 5: berkata "ia rosak", menerima perubahan tanpa mengujinya, dan kemudian meminta pembetulan lain di atas yang sudah rosak.

Langkah 1: Ulang pepijat itu

Pepijat yang boleh dicetuskan atas permintaan separuh sudah diselesaikan. Cuba cari set langkah yang paling pendek yang menyebabkannya.

Tanya diri anda:

• Adakah ia berlaku setiap kali? Jika hanya kadang-kadang, apakah yang berbeza apabila ia berlaku — rekod tertentu, sambungan perlahan, atau log keluar?
• Adakah ia berlaku untuk setiap pengguna? Log masuk dengan akaun lain. Banyak pepijat hanya muncul untuk pengguna baharu yang tiada data, atau untuk pengguna dengan peranan yang berbeza.
• Adakah ia berlaku pada setiap peranti? Cuba skrin selebar telefon dan pelayar yang berbeza.
• Adakah ia bermula selepas perubahan tertentu? Jika ia berfungsi semalam, beberapa perubahan terakhir ialah suspek utama.

Tulis langkah-langkah itu sebagai senarai bernombor pendek. Anda akan menampalnya dalam gesaan kemudian.

Langkah 2: Baca mesej ralat

Mesej ralat kelihatan menakutkan, tetapi anda hanya perlukan beberapa bahagiannya.

Anda tidak perlu memahaminya; anda perlu menyalinnya dengan tepat. "Cannot read properties of undefined (reading 'name')" memberitahu AI bahawa kod menjangkakan beberapa data (mungkin tempahan atau pengguna) yang tidak wujud. Parafrasa seperti "ralat undefined" menghilangkan maklumat itu.

Beberapa yang biasa, diterjemahkan secara kasar:

• Ralat undefined / null — kod menjangkakan data yang tidak sampai. Selalunya keadaan memuat atau senarai kosong yang kod tidak kendalikan.
• 404 Not Found — halaman atau alamat API tidak wujud. Selalunya salah taip dalam laluan atau pautan ke halaman yang telah dinamakan semula.
• 401 Unauthorized / 403 Forbidden — permintaan tidak log masuk, atau pengguna tidak dibenarkan melakukan tindakan itu.
• 500 Internal Server Error — kod pelayan terhenti. Punca sebenar ada dalam log pelayan, bukan dalam pelayar.
• Ralat CORS — pelayar menyekat permintaan ke domain lain. Biasanya isu konfigurasi di bahagian pelayan.

Langkah 3: Gunakan alat pemaju pelayar

Setiap pelayar desktop mempunyai alat pemaju terbina dalam ("devtools"). Ia menunjukkan apa yang halaman lakukan di sebalik tabir. Dalam Chrome, Edge dan Firefox, klik kanan di mana-mana pada halaman dan pilih Inspect, atau tekan F12 (Cmd+Option+I pada Mac). Dalam Safari, hidupkan menu Develop dalam tetapan Safari dahulu.

Anda hanya perlukan tiga tab.

Console

Tab Console menyenaraikan ralat dan mesej daripada kod halaman. Ralat dipaparkan dalam merah. Jika butang tidak berbuat apa-apa apabila anda klik, konsol selalunya menunjukkan ralat merah pada saat anda klik. Salin teks penuh ralat itu (klik kanan untuk pilihan salin dalam kebanyakan pelayar).

Network

Tab Network menyenaraikan setiap permintaan yang dibuat oleh halaman — memuat data, menyimpan borang, log masuk. Bukanya, kemudian ulang langkah yang menyebabkan pepijat.

• Cari baris dalam merah atau dengan status 400 ke atas.
• Klik baris yang gagal untuk melihat Response. Ralat pelayan selalunya mengandungi mesej di situ yang lebih berguna daripada apa-apa di skrin.
• Catat URL permintaan dan kod statusnya — ayat "POST ke /api/bookings memulangkan 500" ialah ayat yang sangat berguna untuk diberikan kepada AI.

Tandakan Preserve log jika pepijat melibatkan muat semula halaman atau ubah hala, supaya permintaan tidak hilang.

Elements

Tab Elements (atau Inspector) menunjukkan struktur dan gaya halaman. Ia paling berguna untuk pepijat susun atur: letakkan tetikus pada elemen untuk melihat saiz dan jarak yang diserlahkan. Anda tidak perlu mengedit apa-apa di sini; cukup katakan "footer selebar 2,000 piksel pada telefon dan menolak halaman ke sisi".

Langkah 4: Semak log pelayan

Sesetengah pepijat berlaku di pelayan, di mana pelayar tidak dapat melihatnya. Ralat 500 dalam tab rangkaian ialah tanda klasiknya. Log pelayan — output teks bahagian belakang aplikasi anda semasa ia berjalan — biasanya mengandungi ralat sebenar dengan stack trace (senarai fungsi yang sedang berjalan ketika ia gagal).

Di mana anda mencarinya bergantung pada alat anda. Dalam kebanyakan pembina aplikasi AI, anda boleh membuka terminal atau paparan log untuk projek, atau cuma tanya AI: "Semak log pelayan untuk ralat daripada permintaan terakhir dan beritahu saya apa yang gagal."

Langkah 5: Terangkan pepijat kepada AI

Susun apa yang anda kumpulkan dalam bentuk ini:

Pada halaman Tempahan, log masuk sebagai ahli: saya klik Cancel pada kelas jam 9:00 esok. Dijangka: tempahan hilang dan kelas menunjukkan satu tempat kosong lagi. Sebenar: tiada apa yang berubah pada skrin. Konsol menunjukkan TypeError: Cannot read properties of undefined (reading 'id') di BookingCard.tsx:31, dan tab rangkaian menunjukkan DELETE /api/bookings/123 memulangkan 500. Cari punca, betulkan, dan semak bahawa pembatalan berfungsi untuk ahli dengan satu tempahan dan dengan beberapa tempahan.

Mengapa setiap bahagian penting:

• Di mana dan sebagai siapa mempersempit kepada satu skrin dan satu peranan.
• Langkah tepat membolehkan AI mengulanginya.
• Dijangka vs sebenar mentakrifkan maksud "sudah dibetulkan".
• Teks ralat dan permintaan yang gagal menunjuk terus kepada punca.
• "Semak bahawa…" meminta AI untuk mengesahkan, bukan sekadar menyunting.

Jika AI sudah mencuba pembetulan dua kali dan gagal, minta ia menerangkan dahulu sebelum menukar apa-apa:

Jangan tukar kod lagi. Apa yang anda fikir menyebabkan ini, dan bukti apa yang menyokongnya?

Teori yang salah mudah dikesan apabila ia ditulis, dan jauh lebih murah untuk dibetulkan daripada pembetulan yang salah.

Langkah 6: Sahkan, kemudian semak kawasan sekitar

Apabila AI berkata ia sudah dibetulkan, ulang langkah tepat dari Langkah 1. Kemudian semak perkara di sekelilingnya:

• Tindakan yang sama untuk peranan pengguna yang berbeza
• Tindakan yang sama tanpa data, dan dengan banyak data
• Halaman yang berkongsi komponen dengan yang anda betulkan
• Skrin selebar telefon, jika pembetulan itu menyentuh susun atur

Perubahan AI kadangkala membetulkan satu laluan tetapi diam-diam merosakkan laluan lain. Pemeriksaan dua minit sekarang menjimatkan sejam yang mengelirukan kemudian.

Langkah 7: Buat asal semula, jangan menimbun

Jika pembetulan memburukkan keadaan, atau anda telah melalui tiga pusingan tanpa kemajuan, kembali. Membuat asal semula ke versi terakhir yang berfungsi dan menyusun semula dengan bukti yang lebih baik hampir sentiasa lebih baik daripada meminta pembetulan keempat di atas tiga yang salah. Setiap percubaan yang gagal meninggalkan kod, dan kod itu mengelirukan percubaan seterusnya.

Tabiat baik yang memudahkan pembatalan:

• Uji selepas setiap perubahan, supaya anda tahu perubahan mana yang merosakkan sesuatu.
• Kekalkan perubahan kecil — satu ciri atau pembetulan bagi setiap mesej.
• Catat versi terakhir yang berfungsi sebelum memulakan sesuatu yang berisiko.
• Jika kod berada dalam Git, komitkan versi yang berfungsi supaya anda boleh kembali kepadanya.

Corak pepijat biasa dalam aplikasi yang dibina dengan AI

Apabila masalahnya bukan pepijat

Sesetengah "pepijat" ialah AI membina tepat apa yang diarahkan, dan penerangannya samar-samar. Jika pembetulan yang anda minta sebenarnya ialah perubahan kelakuan, katakan dengan jelas: "Tukar supaya…". Jika anda mendapati diri anda tidak pasti apakah kelakuan yang betul, tentukan itu dahulu. Panduan kami tentang cara menulis gesaan untuk pembina aplikasi AI meliputi cara menyatakan peraturan dengan jelas. Dan jika anda menyediakan aplikasi untuk pengguna sebenar, membawa prototaip AI ke pengeluaran meliputi semakan yang berbaloi dibuat sebelum pelancaran.

Penyahpepijatan dalam Mythex

Mythex mempunyai alat untuk setiap langkah kitaran:

• Pratonton untuk mengulang pepijat, termasuk bingkai bersaiz telefon.
• /test meminta ejen mengklik melalui pratonton langsung anda seperti pengguna dan melaporkan aliran yang rosak.
• /fix menunjuk ejen kepada kerosakan tertentu.
• Mod Plan membolehkan ejen menyiasat dan menerangkan sebelum ia menyunting apa-apa.
• Code → terminal menunjukkan log pelayan aplikasi anda.
• Revert to this point pada mana-mana balasan mengembalikan projek ke pusat semakan itu.

Jika penerbitan gagal, dialog penerbitan biasanya menawarkan Fix with AI, yang membaca output binaan atau log aplikasi. Lihat Nyahpepijat aplikasi anda dan penyelesaian masalah penerbitan dalam dokumentasi.

Soalan lazim