Vibecoding · 10-dars · 7–8-sinflar

Fan: AI Debugging & Brauzer DevTools Kohorta: Middle Web 7-8 Hafta: 2 (Xatolar va Mantiq)

AI Debugging va Dastur Mantig'i: Xatolarni DevTools Bilan Ovlash

Dasturchilar vaqtining 80 foizini yangi kod yozishga emas, xatolarni qidirish va tuzatishga (Debugging) sarflaydi. Bugun biz qizil konsol yozuvlaridan qo'rqmaslikni, 3 ta asosiy xato toifasini (Syntax, Runtime, Logic) va AI yordamida har qanday muammoni zudlik bilan hal qilishni o'rganamiz.

Tarixiy Voqea

Nega Xatolar 'BUG' Deb Ataladi? 1947-yilgi Birinchi Kapalak

Garvard Mark II Kompyuteri

1947-yil 9-sentabrda ulkan Garvard Mark II kompyuteri to'xtab qoldi. Muhandislar 70-rele orasiga kirib qolgan haqiqiy kuya (kapalak)ni topishdi va uni kundalik daftariga skotch bilan yopishtirib qo'yishdi.

        "First actual case of bug being found" — Grace Hopper
      

Bugun Debugging Nima?

Bug (Xato): dasturdagi kamchilik, kutilmagan to'xtalish.

Debugging (Отладка): xatolarni aniqlash, ularning ildizini topish va to'g'rilash jarayoni.

Professional dasturchi xatodan asabiylashmaydi — u konsolni ochib, kiber-detektiv kabi izlanadi.

Uch Asosiy Xato Turi

Uch Dushman: Syntax, Runtime va Logic Xatolari

1. Sintaksis Xatosi

Qoidalar buzilgan

Grammatik xato: yopilmagan qavs, qo'shtirnoq, sintaktik buzilish. Brauzer kodni hatto ishga tushirmay to'xtaydi.

let x = (10 + 5; // Qavs yo'q!

2. Ijro (Runtime) Xatosi

Ish jarayonida qulash

Sintaksis to'g'ri, dastur ishga tushadi, lekin ijro paytida qulaydi: `null` ustida amallar, mavjud bo'lmagan metodlar.

null.addEventListener();

3. Mantiqiy Xato

Eng xavflisi!

Konsolda qizil xato YO'Q! Kod xatosiz ishlaydi, lekin natija noto'g'ri: ball qo'shilishi o'rniga o'chib ketadi, eshik ochilmaydi.

score = 10; // += o'rniga =

1-Toifa: Sintaksis Xatolari

SyntaxError: Brauzer Nega Kodni O'qiy Olmaydi?

Qanday Alomatlar Beradi?

." data-en="1. The script never begins execution.
2. Bright red notification in DevTools specifying exact file and line.
3. Root causes: unclosed parentheses, mismatched quotes, unexpected tokens.">1. Dastur umuman ishga tushmaydi (hatto eng birinchi `console.log` ham ishlamaydi).
2. DevTools konsolida qizil yozuv va qator raqami chiqadi.
3. Eng ko'p sabab: yopilmagan `)`, `}` yoki qo'shtirnoqlar chalkashishi (`"salom'`).

Xato va To'g'ri Kod

// ❌ XATO: qavs yopilmadi!
btn.addEventListener('click', function() {
console.log("Klik bo'ldi!");
}; // Qavs ')' qayerda?!

// ✅ TO'G'RI:
btn.addEventListener('click', function() {
console.log("Klik bo'ldi!");
});

2-Toifa: Runtime Xatolari

TypeError: Cannot read properties of null — Dunyodagi Eng Ko'p Bug

Nega null yuzaga keladi?

HTML da bunday element yo'q yoki ID noto'g'ri yozilgan bo'lsa, `document.getElementById` elementi null (bo'shliq) qaytaradi.

Siz esa keyingi qatorda: `null.addEventListener(...)` deb buyruq berasiz. Brauzer hayron: 'Bo'shliqda hodisa datchigi bo'lishi mumkin emas!'

Selektorlarning Oltin Qoidasi

Metod	Qanday yoziladi?	Xato namunasi
`getElementById`	`'myBtn'` (panjarasiz!)	❌ `'#myBtn'`
`querySelector`	`'#myBtn'` yoki `'.card'`	❌ `'myBtn'`

💡 AI Debug Maslahati: Agar null chiqsa, HTML tegidagi id="" nomini nusxalab, JS dagi bilan solishtiring!

3-Toifa: Mantiqiy Xatolar

Mantiqiy Xatolar: Kod Yuguradi, Ammo Aldaydi

Nega Bu Eng Xavfli Xato?

Brauzer sizni ataylab shunday qildi deb o'ylaydi. Hech qanday ogohlantirish yo'q!

Sayt ochiladi, tugmalar bosiladi, ammo: do'konda narx arzonlash o'rniga qimmatlaydi, o'yinda dushmanga tegsangiz jon kamayish o'rniga ko'payib ketadi.

Klassik Mantiqiy Tuzoqlar

// 1. Tenglashtirish (=) va Solishtirish (===)
if (hp = 0) { // ❌ hp ni 0 qilib qo'yadi! }
if (hp === 0) { // ✅ To'g'ri solishtirish }

// 2. Qiymatni yangilash
score = 10; // ❌ Doim 10 bo'lib qoladi
score += 10; // ✅ 10 qo'shib boradi

Brauzer DevTools

Asosiy Qurolimiz: DevTools va Console Oylasi

Konsolni Qanday Ochamiz?

Ixtiyoriy zamonaviy brauzerda:
• Klaviaturada F12 tugmasini bosing
• Yoki Ctrl + Shift + I (Mac: Cmd + Opt + I)
• Yoki sichqonchaning o'ng tugmasi → Inspect (Kodni tekshirish) → Console menyusi.

Console Buyruqlari

console.log("Oddiy xabar"); // Oq matn
console.warn("Diqqat: batareya kam!"); // Sariq ogohlantirish
console.error("Tizimda avariya!"); // Qizil xato
console.table(['Ali', 'Vali', 'Gani']); // Chiroyli jadval

💡 Kodning qayergacha yetib borganini bilish uchun har bir blok boshiga console.log('1-qadam bajarildi') qo'yib tekshiring!

Kiber-Detektivlik

Xatoni Qanday O'qiymiz? Stack Trace va Qator Raqami

Qizil Yozuvning 3 Qismi

1. Xato nomi: `TypeError` yoki `ReferenceError`.
2. Tushuntirish: `Cannot read properties of null`.
3. Manzil (O'ng burchakda): `script.js:42:15`.
Bu degani: script.js fayli, 42-qator, 15-belgi! O'sha havolani bossangiz, brauzer to'g'ridan-to'g'ri o'sha qatorni ochib ko'rsatadi.

Konsoldagi Ko'rinishi

Uncaught TypeError: btn is null
at startGame (game.js:18:9)
at HTMLButtonElement.dispatch (app.js:104:12)

Har doim eng yuqoridagi qatorga e'tibor bering: xato aynan o'sha funksiya ichida sodir bo'lgan!

Vaqtni To'xtatish

Breakpoints: Kodni Qadamma-qadam Ijro Etish

Nega Breakpoints Kerak?

O'nlab `console.log()` larni yozib o'tirmasdan, DevTools ning Sources bo'limida qator raqamini bosasiz.

Kod shu qatorga kelganda, brauzer vaqtni muzlatadi! Siz sichqonchani ixtiyoriy o'zgaruvchi ustiga olib borib, xotiradagi jonli qiymatni ko'ra olasiz.

Kod Ichida `debugger`

function calculateScore(points) {
  debugger; // DevTools shu yerda to'xtaydi!
  let total = points * 1.5;
  return total;
}

F10 tugmasi keyingi qatorga o'tkazadi, F8 esa dasturni davom ettiradi.

AI Debugging Taktikasi

AI bilan Debugging: 3 Bosqichli Professional Prompt

Yomon Prompt vs Kuchli Prompt

❌ Yomon: 'Kodim ishlamayapti, tuzatib ber' (AI nima bo'lganini bilmaydi).

✅ Mukammal (3 tarkibiy qism):
1. Kutilgan maqsad: 'Tugma bosilganda quvvat 10 ga oshishi kerak'.
2. Muammoli kod parchasi: aynan o'sha 3-4 qator kod.
3. Konsoldagi aniq xato matni: DevTools dan nusxa olingan qizil xato.

Tayyor Prompt Shaboni

"Menda JavaScript dasturida quyidagi xato yuz berdi:
[XATO MATNI: Uncaught TypeError: ...]

Mening kodim:
[KOD PARChASI]

Nega bu xato yuzaga keldi va uni eng to'g'ri qanday tuzatish mumkin? Kodni tushuntirib ber."

Amaliy Mashg'ulot

Amaliy Laboratoriya: Cyber Bug Lab da 3 Ta Xatoni Tuzatamiz!

1. Reaktor Datchigi

Sintaksis xatosi: qavsni to'g'ri yopib, reaktorni ishga tushiring.

SyntaxError

2. Sovutish Klapani

Runtime xatosi: `getElementById` dagi ortiqcha `#` ni olib tashlang.

TypeError: null

3. Quvvat Mantig'i

Mantiqiy xato: `=` operatorini `+=` ga almashtirib, quvvatni oshiring.

Logic Bug

    🚀 Faylni oching: classes/7-8-sinf/2-hafta/10-dars-ai-debugging-va-mantiq/lab/index.html
  

Baholash va Yakun

10 Ballik Baholash Mezoni va Keyingi Dars

10 Ballik Mezon

Ball	Talab
1–3 ball	DevTools ochildi, xatolar turlari ajratildi
4–7 ball	Laboratoriyadagi 2 ta xato to'liq tuzatildi
8–10 ball	Barcha 3 modul tuzatildi, AI prompti yozildi

Keyingi 11-darsda:

LocalStorage va Doimiy Xotira: Nega F5 bosilganda barcha ballar o'chib ketadi? Brauzerga o'yinchi rekordlarini bir umrga eslab qolishni o'rgatamiz!

        Uyga vazifa: Varaqadagi 3-topshiriqni to'liq yakunlash.
      