Debugging — brauzer DevTools da xatolarni topish

~20 daq · JavaScript · Amaliy va Professional mavzular

Muammodan boshlaylik

Savat jami noto'g'ri: "10000500020000" so'm. Siz kodga console.log qo'shasiz:

console.log('savat', savat);
console.log('jami', jami);
console.log('bu yerga keldi');
console.log('bu yerga ham keldi 2');

20 ta log, sahifa 15 marta yangilandi — va xato hali topilmadi. console.log — debug qilishning eng sekin usuli. Brauzerda buning uchun kuchli vosita bor: DevTools.

DevTools ni ochish: F12 yoki Ctrl+Shift+I (macOS da Cmd+Option+I).

Console — log dan ko'proq

console.table(foydalanuvchilar);         // massiv/obyekt — jadval ko'rinishida
console.error('To\'lov xatosi', xato);   // qizil, stack trace bilan
console.warn('Eskirgan API');            // sariq
console.group('Buyurtma #42');           // guruhlash
console.log('mahsulotlar', 3);
console.groupEnd();

console.time('saralash');
katta.toSorted();
console.timeEnd('saralash');             // saralash: 12.4 ms

console.assert(jami > 0, 'Jami manfiy!', jami); // faqat shart yolg'on bo'lsa

[!TIP] console.log({ jami, savat }) — qisqa obyekt yozuvi o'zgaruvchi nomlarini ham ko'rsatadi: { jami: ..., savat: [...] }. Konsolda $0 — Elements panelida tanlangan element, $_ — oxirgi natija.

Xato xabarini o'qish

Uncaught TypeError: Cannot read properties of undefined (reading 'narx')
    at jamiHisobla (savat.js:14:22)
    at chizSavat (ui.js:31:5)
    at HTMLButtonElement.<anonymous> (main.js:8:3)

Yuqoridan pastga o'qing: birinchi qator — xato qayerda sodir bo'lgan, keyingilari — u yerga qanday kelingan.

Breakpoint lar — kodni to'xtatish

Sources paneli → faylni oching → qator raqamini bosing (ko'k belgi).

Kod shu qatorga yetganda to'xtaydi, va siz:

• Barcha o'zgaruvchilarning qiymatini ko'rasiz (Scope)
• Sichqonchani o'zgaruvchi ustiga olib borib qiymatini ko'rasiz
• Konsolda shu kontekstda kod yozasiz: savat.map(m => typeof m.narx)

Qadamma-qadam

Koddan

function jamiHisobla(savat) {
  debugger;   // DevTools ochiq bo'lsa — shu yerda to'xtaydi
  return savat.reduce((s, m) => s + m.narx * m.soni, 0);
}

[!WARNING] debugger ni commit qilmang — ESLint ning no-debugger qoidasi buni ushlaydi.

Maxsus breakpoint lar

Qator raqamini o'ng tugma bilan bosing:

• Conditional breakpoint — faqat shart rost bo'lganda: mahsulot.narx === undefined
• Logpoint — kodni o'zgartirmasdan log: 'narx:', m.narx — console.log qo'shib, sahifani qayta yuklash shart emas

Sources → o'ng panel:

• XHR/fetch Breakpoints — URL da /api/savat bo'lgan so'rov yuborilganda to'xtash
• Event Listener Breakpoints — click, submit va h.k. hodisalarda
• Pause on exceptions — istalgan xato tashlanganda, hatto catch qilinganda ham

Elements panelida element ustida o'ng tugma → Break on → subtree modifications — kimdir bu elementni o'zgartirganda to'xtash. "Bu matnni kim o'zgartiryapti?" degan savolga eng tez javob.

Dars boshidagi xato

jamiHisobla da breakpoint, Scope ga qaraymiz:

s: "10000"
m: { narx: "5000", soni: 1 }

narx — string! Server narxni matn sifatida qaytargan, va + sonlarni qo'shish o'rniga matnlarni birlashtirgan (5-dars, type coercion). Yechim:

savat.reduce((s, m) => s + Number(m.narx) * m.soni, 0);

20 ta console.log o'rniga — bitta breakpoint.

Network paneli

• Har bir so'rov: URL, status, vaqt, hajm
• So'rovni bosing → Headers, Payload (nima yuborildi), Response (nima keldi)
• Throttling → "Slow 4G" — sekin internetni sinash
• Disable cache — keshsiz yuklash
• So'rov ustida o'ng tugma → Copy as fetch — so'rovni konsolda takrorlash

Ko'p "frontend xatolari" aslida server javobining kutilganidan farqli ekanidan kelib chiqadi — avval Network ga qarang.

Boshqa panellar

Nima uchun shunday?

Nima uchun debugger console.log dan samaraliroq?

Chunki console.log bilan siz oldindan taxmin qilishingiz kerak: qaysi o'zgaruvchi, qaysi joyda muhim. Taxmin noto'g'ri bo'lsa — yana log qo'shish, yana qayta yuklash. Breakpoint esa dasturni to'xtatib, hamma narsani ko'rsatadi: barcha o'zgaruvchilar, chaqiruvlar zanjiri, this, closure dagi qiymatlar. Siz kodni sekinlashtirilgan kinoday kuzatasiz va xato paydo bo'lgan aniq lahzani ko'rasiz. Debugging — bu qidiruv jarayoni, va yaxshi vositalar bu qidiruvni tasodifiy urinishlardan izchil tekshiruvga aylantiradi.

Xulosa

Eslab qoling:

• Console: table, error, group, time, assert; console.log({ x })
• Xato xabari: tur, sabab, fayl:qator:ustun, call stack — yuqoridan o'qing
• Breakpoint — qator raqamini bosish yoki debugger; F8, F10, F11
• Conditional breakpoint, logpoint, XHR/event breakpoint, pause on exceptions
• Elements → Break on — DOM ni kim o'zgartirayotganini topish
• Network — so'rov va javobni avval tekshiring

Keyingi dars

83-dars: Performance — debounce, throttle, memoization