AI-аар бүтээсэн аппыг хэрхэн дебаг хийх вэ: практик арга

AI-аар бүтээсэн аппыг дебаг хийхдээ эхлээд алдааг санаатайгаар дахин гаргаж, дараа нь нотолгоо цуглуул — яг алхмууд, алдааны мессеж, браузерын консол болон сүлжээний таб юу харуулж байгааг — мөн үүнийг AI-д “Би X хийсэн, Y хүлээсэн, Z болсон” гэж өг. Хэрэв засвар нь асуудлыг улам хүндрүүлбэл, засвар дээр засвар нэмэхийн оронд сүүлийн ажилладаг хувилбар руу буцаа. Эдгээрийг сайн хийхэд кодыг унших шаардлагагүй.

Энэ гарын авлага бүх алхмыг, мөн мэргэжилгүй хүмүүст зориулсан браузерын devtools-ийн товч аяллыг оруулна.

Дебаг хийх гогцоо

Алдаа засах бүрт, хүн эсвэл AI хийсэн ч, ижил гогцоо дагадаг:

1. Дахин гаргах — алдааг найдвартай дахин гаргах.
2. Ажиглах — алдааны мессеж, аппын юу хийж байсныг цуглуулах.
3. Тайлбарлах — AI-д яг алхмууд, хүлээсэн үр дүн, жинхэнэ үр дүнг өг.
4. Засах — AI-д нэг зүйлийг л өөрчлүүл.
5. Баталгаажуулах — яг ижил алхмуудыг давтаж, засагдсан эсэхийг болон ойр орчны юу ч эвдээгүйг шалга.
6. Шаардлагатай бол буцаах — хэрэв улам дордвол буцаагаад илүү сайн мэдээллээр дахин оролд.

AI-аар бүтээсэн аппад хугацаа алдах ихэнх нь 1, 2, 5-р алхмыг алгасахаас үүдэлтэй: “эвдэрсэн” гэж хэлэх, өөрчлөлтийг туршилгүйгээр хүлээн авах, дараа нь эвдэрсэн дээр нь дахин засвар хүсэх.

1-р алхам: Алдааг дахин гаргах

Дурын үед гаргаж чадах алдаа бол хагас засагдсан гэсэн үг. Алдааг үүсгэх хамгийн богино алхмуудыг ол.

Өөөрөөсөө асуу:

• Бүр ижил байдаг уу? Зөвхөн заримдаа байвал, үед нь юу өөр байна вэ — тодорхой бичлэг, удаан сүлжээ, системээс гарсан байдал?
• Бүх хэрэглэгчид тохиолдож байна уу? Өөр бүртгэлээр нэвтэр. Олон алдаа зөвхөн өгөгдөлгүй шинэ хэрэглэгчид эсвэл өөр эрхтэй хэрэглэгчдэд харагддаг.
• Бүх төхөөрөмж дээр гарч байна уу? Утасны өргөн дэлгэц болон өөр хөтөч дээр туршаарай.
• Тодорхой өөрчлөлтийн дараа эхэлсэн үү? Өчигдөр ажиллаж байсан бол сүүлийн хэдэн өөрчлөлт нь гол сэжигтэй.

Алхмуудаа богино дугаарласан жагсаалтаар бич. Дараа нь prompt-д буулгана.

2-р алхам: Алдааны мессежийг уншаарай

Алдааны мессеж аймшигтай харагдаж болно, гэхдээ танд хэдхэн хэсэг хэрэгтэй.

Та ойлгох шаардлагагүй; яг хуулах хэрэгтэй. “Cannot read properties of undefined (reading 'name')” нь AI-д кодод ямар нэг өгөгдөл (магадгүй захиалга эсвэл хэрэглэгч) хүлээгдсэн боловч ирээгүйг хэлдэг. “Ямар нэг undefined алдаа” гэж үг хэллээр дахин хэлбэл энэ мэдээлэл алга болно.

Зарим түгээмэл алдааг товчоор:

• undefined / null алдаа — код өгөгдөл хүлээсэн боловч ирээгүй. Ихэвчлэн ачаалах төлөв эсвэл хоосон жагсаалтыг код зохицуулаагүй байдаг.
• 404 Not Found — хуудас эсвэл API хаяг байхгүй. Ихэвчлэн маршрутын бичгийн алдаа эсвэл нэрээ солигдсон хуудас руу холбоос.
• 401 Unauthorized / 403 Forbidden — хүсэлт нэвтрээгүй, эсвэл хэрэглэгч ийм үйлдэл хийх эрхгүй.
• 500 Internal Server Error — серверийн код унасан. Жинхэнэ шалтгаан нь браузерт биш, серверийн логт байна.
• CORS алдаа — браузер өөр домэйн рүү хүсэлтийг хаасан. Ихэвчлэн серверийн тохиргооны асуудал.

3-р алхам: Браузерын devtools ашиглах

Браузер бүрт суулгагдсан devtools (“devtools”) байдаг. Тэд хуудас ард юу хийж байгааг харуулдаг. Chrome, Edge, Firefox дээр хуудсан дээр хаа ч баруун товшоод Inspect сонгох, эсвэл F12 (Mac дээр Cmd+Option+I) дарна. Safari дээр эхлээд Safari-ийн тохиргоонд Develop цэсийг асаана.

Та гурван таб л хэрэгтэй.

Console

Console таб нь хуудасны кодоос гарсан алдаа, мессежүүдийг жагсаадаг. Алдаа улаанаар харагдана. Хэрэв товч дарахад юу ч болохгүй бол консол нь ихэвчлэн таны дарах мөчид улаан алдаа харуулдаг. Алдааны бүтэн текстийг хуулах (ихэнх хөтөчид баруун товшоод хуулах сонголт байдаг).

Network

Network таб нь хуудасны гаргадаг бүх хүсэлтийг — өгөгдөл ачаалах, маягт хадгалах, нэвтрэх — жагсаадаг. Нээгээд алдааг үүсгэдэг алхмуудаа давт.

• Улаан эсвэл 400-аас дээш статустай мөрүүдийг хай.
• Бүтэлгүйтсэн мөрийг дарж Response-ыг нь хар. Серверийн алдаа ихэвчлэн дэлгэц дээрх юунаас ч илүү хэрэгтэй мессежийг агуулдаг.
• Хүсэлтийн URL болон статус кодыг тэмдэглэ — “/api/bookings руу POST 500 буцаасан” гэдэг өгүүлбэр AI-д маш хэрэгтэй.

Алдаа хуудас дахин ачаалах эсвэл чиглүүлэлттэй холбоотой бол Preserve log-ыг асаа, ингэснээр хүсэлтүүд алга болохгүй.

Elements

Elements (эсвэл Inspector) таб нь хуудасны бүтэц, хэв маягийг харуулдаг. Layout алдаанд хамгийн их хэрэгтэй: элемент дээр хулганаар очиход түүний хэмжээ, зай тодруулагдана. Энд юу ч засах шаардлагагүй; “утсан дээр footer нь 2,000 пиксель өргөн болж хуудсыг хажуу тийш түлхэж байна” гэж хэлэх нь хангалттай.

4-р алхам: Серверийн логуудыг шалгах

Зарим алдаа серверт гардаг, браузер үүнийг харж чадахгүй. Сүлжээний табын 500 алдаа бол классик тэмдэг. Серверийн лог — таны backend ажиллаж байх үеийн текст гаралт — ихэвчлэн жинхэнэ алдааг stack trace-тай (бүтэлгүйтэх үед ажиллаж байсан функцүүдийн жагсаалт) хамт агуулдаг.

Та хаана олохоо хэрэглэгч хэрэгслээсээ хамаарна. Ихэнх AI аппын бүтээгчид төслийн терминал эсвэл лог харах хэсгийг нээж болдог, эсвэл зүгээр л AI-гаас асуу: “Сүүлийн хүсэлтийн алдааны логуудыг шалгаад юу бүтэлгүйтсэнийг хэл.”

5-р алхам: Алдааг AI-д тайлбарлах

Цуглуулсан зүйлээ дараах хэлбэрт оруулаарай:

Захиалгын хуудас дээр, гишүүнээр нэвтэрсэн: маргаашийн 9:00-ын хичээл дээрх Cancel дарсан. Хүлээсэн: захиалга алга болж, хичээлд нэг чөлөөт суудал нэмэгдэнэ. Жинхэнэ: дэлгэц дээр юу ч өөрчлөгдөөгүй. Консол TypeError: Cannot read properties of undefined (reading 'id') гэж BookingCard.tsx:31-д харуулж, network таб DELETE /api/bookings/123 500 буцаасан. Шалтгааныг ол, засаад, нэг захиалгатай болон хэд хэдэн захиалгатай гишүүнд цуцлах ажиллаж байгааг шалга.

Яагаад хэсэг бүр чухал вэ:

• Хаана, ямар эрхтэйгээр — нэг дэлгэц, нэг эрх рүү нарийсгана.
• Яг алхмууд — AI алдааг дахин гаргах боломжтой.
• Хүлээсэн ба жинхэнэ — “засагдсан” гэдгийг тодорхойлно.
• Алдааны текст ба бүтэлгүйтсэн хүсэлт — шалтгаан руу шууд заана.
• “Шалгаад…” — AI-д зүгээр засахаас илүү баталгаажуулахыг хүснэ.

AI хоёр удаа засвар хийж бүтэлгүйтсэн бол, юу ч өөрчлөхөөсөө өмнө тайлбарлахыг хүс:

Одоохондоо код бүү өөрчил. Таны бодлоор энэ юуны улмаас гарч байна вэ, ямар нотолгоо үүнийг дэмжиж байна вэ?

Буруу онол нь бичигдсэн үед хялбар харагддаг бөгөөд буруу засварыг засахаас хамаагүй хямд.

6-р алхам: Баталгаажуулж, ойр орчинг шалга

AI засагдсан гэж хэлэхэд 1-р алхмын яг ижил алхмуудыг давт. Дараа нь түүний ойр орчинг шалга:

• Өөр хэрэглэгчийн эрхтэй ижил үйлдэл
• Өгөгдөлгүй, олон өгөгдөлтэй ижил үйлдэл
• Таны засварласан бүрэлдэхүүнийг хуваалцдаг бусад хуудсууд
• Layout-д хүрсэн бол утасны өргөн дэлгэц

AI-ийн өөрчлөлт заримдаа нэг замыг засаад, нөгөөг нь нууцаар эвдэж болдог. Хоёр минутын шалгалт одоо, хоёр цагийн төөрөгдлөөс хамаагүй хямд.

7-р алхам: Нэмэхийн оронд буцаах

Хэрэв засвар асуудлыг улам дордуулсан, эсвэл гурван удаа ахиц гарахгүй бол буцаа. Сайн ажиллаж байсан сүүлийн хувилбар руу буцаж, илүү сайн нотолгоотойгоор дахин тайлбарлах нь гурван буруу засварын дээр дөрөв дэх засвар хүсэхээс ихэвчлэн илүү. Бүр оролдлого бүр код үлдээдэг бөгөөд тэр код дараагийн оролдлогыг будилуулдаг.

Буцаахыг хялбар болгох сайн зуршлууд:

• Өөрчлөлт бүрийн дараа туршаарай, аль өөрчлөлт эвдсэнийг мэдэхийн тулд.
• Өөрчлөлтийг жижиг байлга — нэг мессежид нэг функц эсвэл засвар.
• Эрсдэлтэй зүйл хийхээсээ өмнө сайн ажилласан хувилбарыг тэмдэглэ.
• Код Git дээр байвал, ажилладаг хувилбаруудаа commit хийж, тэдгээр рүү буцаж чадна.

AI-аар бүтээсэн аппын түгээмэл алдааны хэв маяг

Алдаа биш асуудал байх үед

Зарим “алдаа” нь AI яг өгсөн зааврын дагуу бүтээсэн, харин тайлбар нь тодорхойгүй байсан үе юм. Хэрэв таны хүсэх засвар жинхэнэ зан төлөвийн өөрчлөлт бол үүнийг шулуун хэл: “Үүнийг … байдлаар өөрчил”. Хэрэв жинхэнэ зөв зан төлөв юу байхыг мэдэхгүй бол эхлээд үүнийг шийд. Дүрмүүдээ тодорхой заах талаар AI аппын бүтээгчид зориулсан prompt бичих гарын авлагад байна. Хэрэв бодит хэрэглэгчдэд апп бэлдэж байгаа бол AI прототипийг бүтээгдэхүүн болгох нь нээлтээс өмнөх шалгалтуудыг тайлбарлана.

Mythex дээр дебаг хийх

Mythex нь гогцооны алхам бүрт зориулсан хэрэгслүүдтэй:

• Preview алдааг дахин гаргахад, утасны өргөнтэй фрэймтэй.
• /test нь агент таны амьд preview дээр хэрэглэгч шиг дарж, эвдэрсэн урсгалуудыг тайлагнана.
• /fix нь агентыг тусгайлан эвдрэл рүү чиглүүлнэ.
• Plan горим нь агентад засвар хийхээсээ өмнө судалж, тайлбарлах боломж олгоно.
• Code → terminal нь аппын серверийн логуудыг харуулна.
• Revert to this point нь аль ч хариултад байгаа checkpoint руу төслийг буцаана.

Нийтлэлт бүтэлгүйтвэл publish цонх ихэвчлэн Fix with AI товчтой байж, build-ийн гаралт эсвэл аппын логуудыг уншина. Docs-ийн аппаа дебаг хийх болон Publish-ийн асуудал шийдэх-ийг үзнэ үү.

Асуултууд