Vibecoding · 12-dars · 9-sinflar

Fan: IT / Vibecoding Kohorta: 9-A & 9-B Hafta: 2 (Final)

AI Bug Hunter: Kiber-Detektivlik va Debugging

Haqiqiy dasturchining kuchi faqat kod yozishda emas, balki koddagi yashirin xatolarni topish va ularni AI Agent bilan tezkor tuzatishdadir!

Kiber-Haqiqat

Nega Dasturchilar Vaqtining 70% ini Xato Qidirishga Sarflaydi?

Boshlang'ich Dasturchi Xayoli

"Men bir marta kod yozaman va u hech qanday xatosiz birdaniga chiroyli ishlab ketadi!"

❌ 😴

Katta Muhandisning Realligi

Dunyoda birorta xatosiz dastur yo'q. Haqiqiy mahorat — xatoni darhol payqash, sababini tushunish va AI sherik bilan bir zumda tuzatishda!

🎯 ⚡

Xatolar Xaritasi

Ikki Xil Kiber-Xatolik: UI (Vizual) va Mantiqiy (Logic)

1. UI va Vizual Nuqsonlar (Ko'z bilan ko'rinadi)

Misalignment: Tugma yoki ssilka pastga qiyshayib tushib ketgan.
Overlap (Z-Index): Nishon tugmaning ustiga minib olgan, bosib bo'lmaydi.
Overflow: Karta chegarasi tor bo'lib, tugma kesilib qolgan.

2. Interaktiv va Mantiqiy Xatolar

NaN Counter: Tangani bosganda son o'rniga NaN chiqadi.
ID Mismatch: HTML dagi ID bilan JS selektori mos emas.
Teskari Hisob: Do'kondan xarid qilsa, pul kamaymaydi, ko'payadi!

Detektiv Quroli

Birinchi Qurolimiz: Brauzer Konsoli va DevTools (F12)

Konsol (Console) Bo'limi

Konsoldagi qizil yozuv — bu JavaScriptning signali! U xato qaysi faylda va nechanchi qatorda ekanini to'g'ridan-to'g'ri aytadi.

Uncaught TypeError: Cannot read properties of null

Elementlar (Elements) Bo'limi

Ekranda qiyshaygan yoki kesilgan blok ustiga sichqonchani olib borib, uning margin, padding va o'lchamlarini jonli ko'rish mumkin!

Agentik Kuch

AI Agentga Xatolikni Qanday Tushuntiramiz?

Zaif Prompt (Beparvo yondashuv)

"Saytim buzildi, nimadir ishlamayapti, to'g'irla."

Agent nima buzilganini bilmaydi, butun faylni boshqatdan yozib, yangi xatolar keltirib chiqaradi!

Detektiv Prompt (Aniq va professional)

"Konsolda 'Cannot read properties of null' xatosi chiqyapti va ovoz tugmasi ishlamayapti. index.html dagi ID bilan script.js dagi selektorni tekshir va xatoni tuzat."

Agent xato qatorni 3 soniyada topadi, ID ni to'g'irlaydi va tugma darhol ishga tushadi!

UI Detallari

1 va 2-Xatolik: Menyuning Qiyshayishi va Tugmaning Minishib Qolishi

1. Misalignment (Noto'g'ri Margin)

Menyudagi bitta ssilka tasodifan margin-top: 45px olgan va butun chiroyli navbar qatorini buzib, pastga tushib ketgan.

Fix: margin-top ni olib tashlash yoki flexbox bilan tekislash

2. Overlap (Bosishni To'sib Qo'yish)

Nishon (badge) manfiy margin bilan tugmaning tepa qismiga chiqib olgan. Oqibatda tugmani bosmoqchi bo'lsangiz, bosilmaydi!

Fix: margin-bottom ni musbat (20px) ga almashtirish

UI Detallari

3 va 4-Xatolik: Kesilgan Karta va Qorong'i Rejimdagi Ko'rinmas Matn

3. Overflow: Qutidan Kesilish

2-kartaga qat'iy height: 170px va overflow: hidden berilgan. Do'konda uning "Xarid Qilish" tugmasi ko'rinmay kesilib ketgan!

Fix: height va overflow:hidden ni o'chirib, erkin balandlik berish

4. Dark Mode: Qorong'ida Yo'qolgan Raqam

Dark Mode yoqilganda panel qorayadi, lekin "To'plangan Energiya" raqami to'q ko'k rangda qolib ketgan — matn fonda yo'qolib qoladi!

Fix: Dark rejimda raqam rangini neon moviy (#00E5FF) qilish

Jonli Musobaqa

'Target Cyber Arena' Kiber-Detektivlar Turniri Boshlandi!

Jangovar Topshiriq

Arena loyihasida qasddan yashiringan UI va mantiqiy xatolar bor. Sizning maqsadingiz — saytni Live Serverda ochish, xatolarni ko'z va konsol bilan fosh qilish, AI Agentga tuzattirish va har birini hisobotga kiritish!

Harakatlar Rejasi

Kiber-Detektivning 3 Bosqichli Oltin Qoidasi

1. Ko'z bilan qara va sinab ko'r: Saytni Live Serverda och, barcha tugmalarni bos, qorong'i rejimni yoq, kartalarni solishtir.
2. Konsolni och (F12): Energiya to'plash va ovoz tugmalarini bosib, qizil xatoliklar chiqishini tekshir.
3. AI Agentga aniq buyruq ber: Qaysi faylda nima noto'g'riligini aytib, xatoni jarrohlik aniqligida tuzattir!

Prompt Shablonlari

Agentga Beriladigan Tayyor Prompt Misollari

UI Xatosi Uchun Prompt

"Do'kondagi ikkinchi karta (Kvant Qalqoni) pastki qismi kesilib qolgan va uning xarid tugmasi ko'rinmayapti. style.css dagi .card-broken-overflow qoidasini to'g'irla, barcha kartalar to'liq ko'rinsin."

Mantiq Xatosi Uchun Prompt

"Kiber-reaktor tugmasini bosganimda energiya hisoblagichida NaN EP chiqyapti. script.js dagi energiya qo'shish mantiqini tekshir va har bosilganda +10 son qo'shiladigan qil."

Amaliy Kiber-Vazifa

Amaliy Vazifa: Xatolarni Fosh Et va Varaqaga Yoz!

VS Code da arena/ papkasini oching. Live Serverni yoqing. AI Agenti yordamida kamida 5 ta xatoni topib tuzating va stolingizdagi varaqaga qayd eting!

1. Menyu qiyshayishi to'g'rilandi
2. Tugma ustidagi nishon to'sig'i olib tashlandi
3. Kesilgan mahsulot kartasi ochildi
4. Qorong'i rejimda matn ko'rinadigan qilindi
5. NaN va ovoz hodisasi to'liq ishga tushirildi

10 ballik baholash mezoni

1-xato (Menyu qiyshayishi)2

2-xato (Tugma to'sig'i)2

3-xato (Kesilgan karta)2

4-xato (Dark Mode kontrasti)2

5-xato (NaN / Ovoz hodisasi)2

Jami (Detektiv Sertifikati!)10

2-Hafta Katta G'alabasi

Tabriklaymiz: Siz Rasmiy Kiber-Detektivsiz!

Siz kodga oddiy foydalanuvchi emas, professional muhandis ko'zi bilan qarashni, eng mayda nomutanosibliklarni ham payqashni o'rgandingiz!
Siz AI Agentni shunchaki matn yozishga emas, real koddagi xatolarni bir necha soniyada aniqlab tuzatuvchi shaxsiy yordamchiga aylantirdingiz!