IlmHamroh
JavaScript Full-stack/8-qism. JavaScript asoslari47/61-dars15 daqiqa
Mundarija (38)

JavaScript debug: Chrome DevTools bilan xatoni qadamma-qadam topish

Qisqacha: Debug qilish — dasturdagi xatoni topish va tuzatish. Chrome DevTools'ning Sources panelida kod qatoriga breakpoint qo'yasiz: dastur shu joyda to'xtaydi. Siz esa o'zgaruvchilar qiymatini ko'rib, kodni qatorma-qator bajarasiz. Bu console.log qo'yib, keyin o'chirib yurishdan tezroq va aniqroq.

Bu darsda

  • Sources panelida faylni ochib, breakpoint qo'ya olasiz.
  • Step over, step into va step out bilan kodni qadamma-qadam bajarasiz.
  • Scope, Watch va Call Stack bo'limlaridan o'zgaruvchilar va chaqiruvlarni o'qiysiz.
  • Shartli breakpoint, logpoint va debugger ko'rsatmasidan foydalanasiz.
  • VS Code va Node.js'da debug qilishni boshlay olasiz.

Oldin bilishingiz kerak: Birinchi dastur: konsol va <script> tegi, console API, Rekursiya asoslari.

1. Nega bu kerak?

O'tgan darsda nomli funksiyalar DevTools'da o'z nomi bilan ko'rinishini aytgan edik. Bugun o'sha DevTools ichiga kiramiz.

Malika onlayn kiyim do'koni ochdi. Saytda qoida yozilgan: "200 000 so'mdan boshlab — 5%, 500 000 so'mdan boshlab — 10% chegirma". Bir kuni mijoz Sardor yozadi: "Aynan 500 000 so'mlik xarid qildim, lekin chegirma 5% bo'ldi!"

Konsolda hech qanday qizil xato yo'q. Dastur ishlayapti, faqat noto'g'ri ishlayapti. Bunday xatoni topish eng qiyini.

Birinchi fikr — hamma joyga console.log qo'yish. Qo'yasiz, sahifani yangilaysiz, yetmaydi — yana qo'yasiz. Oxirida o'nta console.log ni o'chirishni unutib qo'yasiz. Buning tezroq yo'li bor.

Debug qilish (debugging) — dasturdagi xatoni (bug) topish va tuzatish. Debugger — dasturni istalgan joyda to'xtatib, uning ichini ko'rsatadigan vosita.

Futboldagi VAR'ni eslang. Hakam bahsli lahzani to'xtatib, kadrma-kadr ko'radi: to'p qayerda edi, o'yinchi qayerda edi. Debugger ham dasturni to'xtatib, har bir "kadr"da barcha o'zgaruvchilarni ko'rsatadi.

2. Tayyorgarlik: xatoli sahifa

Kompyuteringizda debug-mashq papkasini oching. Unda ikkita fayl yarating. Birinchisi — index.html:

html
<!DOCTYPE html>
<html lang="uz">
<head>
  <meta charset="UTF-8">
  <title>Chegirma hisoblagich</title>
</head>
<body>
  <h1>Chegirma hisoblagich</h1>
  <p>Natijani konsolda ko'ring (F12).</p>
  <script src="chegirma.js"></script>
</body>
</html>

Ikkinchisi — chegirma.js. Unda ataylab xato qoldirilgan. Ikkala faylni saqlab, index.html ni Chrome'da oching (faylni brauzer oynasiga sudrab tashlash kifoya) va konsolga qarang:

js
function chegirmaFoizi(summa) {
  if (summa > 500000) {
    return 10;
  }
  if (summa > 200000) {
    return 5;
  }
  return 0;
}

function yakuniySumma(summa) {
  const foiz = chegirmaFoizi(summa);
  const chegirma = (summa * foiz) / 100;
  return summa - chegirma;
}

console.log("300 000 →", yakuniySumma(300000));
console.log("500 000 →", yakuniySumma(500000));
console.log("700 000 →", yakuniySumma(700000));

Konsolda:

text
300 000 → 285000
500 000 → 475000
700 000 → 630000

500 000 so'mga 10% chegirma bo'lsa, 450000 chiqishi kerak edi. Biz esa 475000 ni ko'ryapmiz — bu 5%. Xato qayerda? Hozircha kodga tikilib o'tirmang — keling, debugger bilan topamiz.

3. DevTools va Sources paneli

3.1 DevTools'ni ochish

  • F12 yoki Ctrl+Shift+I (Mac'da Cmd+Option+I).
  • Yoki sahifada sichqonchaning o'ng tugmasi → Inspect (Tekshirish).

Yuqoridagi yorliqlardan Sources ni tanlang. Bu — kodni debug qilish joyi.

3.2 Sources paneli tuzilishi

Sources paneli uch qismdan iborat:

Qism Joyi Nima bor
Fayllar ro'yxati Chapda Sahifa yuklagan fayllar (Page yorlig'i)
Kod muharriri O'rtada Tanlangan fayl, qator raqamlari bilan
Debugger paneli O'ngda Watch, Breakpoints, Scope, Call Stack

Chap ro'yxatdan chegirma.js ni toping va bosing. Fayl o'rtada ochiladi.

Maslahat: Fayllar ko'p bo'lsa, Sources ichida Ctrl+P (Mac'da Cmd+P) ni bosib, fayl nomini yozing. Katta loyihada shu usul ancha tez.

4. Birinchi breakpoint

4.1 Breakpoint qo'yish

To'xtash nuqtasi (breakpoint) — kodning belgilangan qatori. Dastur shu qatorga yetganda pauza qiladi.

  1. chegirma.js da 12-qatorni toping: const foiz = chegirmaFoizi(summa);.
  2. Qator raqamini (12) sichqoncha bilan bosing. Raqam ustida ko'k belgi paydo bo'ladi.
  3. Sahifani yangilang (F5). Kod qaytadan ishlaydi va 12-qatorda to'xtaydi.

Nega yangilash kerak? Kod sahifa ochilganda bir marta ishlab bo'lgan edi. Breakpoint faqat bundan keyingi bajarilishda ishlaydi.

4.2 Pauza paytida nima ko'rinadi

Dastur to'xtaganda:

  • Sahifa ustida sariq Paused in debugger ("debugger'da pauza") yozuvi chiqadi.
  • 12-qator rangli fon bilan ajraladi.
  • Kod ichida o'zgaruvchilar yonida ularning qiymati xira harflar bilan ko'rinadi.
  • Sichqonchani summa ustiga olib borsangiz, 300000 ko'rinadi.

Diqqat: Ajratilgan qator hali bajarilmagan. U "keyingi bajariladigan" qator. Shuning uchun foiz hali qiymat olmagan. Qiymat bir qadam keyin paydo bo'ladi.

Tekshirib ko'ring: Breakpoint qo'ydingiz, lekin dastur to'xtamadi. Eng birinchi nima qilish kerak?

Javob

Sahifani yangilash (F5). Oddiy <script> sahifa ochilganda bir marta ishlaydi. Breakpoint'ni keyin qo'ysangiz, kod allaqachon o'tib ketgan bo'ladi. Yangilanganda kod qaytadan ishlaydi va breakpoint'da to'xtaydi.

5. Qadamma-qadam bajarish

Pauza paytida debugger panelining tepasida boshqaruv tugmalari bor. Ular video pleyer tugmalariga o'xshaydi:

Tugma Klavish Nima qiladi
Resume (davom etish) F8 Keyingi breakpoint'gacha bajaradi
Step over (ustidan o'tish) F10 Joriy qatorni bajarib, keyingisiga o'tadi
Step into (ichiga kirish) F11 Qatordagi funksiya ichiga kiradi
Step out (chiqish) Shift+F11 Funksiyani oxirigacha bajarib, chaqirgan joyga qaytadi

Step over va step into farqi faqat funksiya chaqiruvi bor qatorda seziladi. Step over funksiyani "bir qadamda" bajaradi va natijani beradi. Step into esa uning ichiga kirib, har qatorini ko'rsatadi.

5.1 Xatoni ovlaymiz

Hozir biz 12-qatorda turibmiz va summa — 300000. Bu chaqiruv bizni qiziqtirmaydi, bizga 500000 kerak.

  1. F8 (Resume) ni bosing. Dastur davom etadi va 12-qatorda yana to'xtaydi. Endi summa — 500000.
  2. F11 (Step into) ni bosing. Siz chegirmaFoizi ichiga, 2-qatorga tushasiz: if (summa > 500000).
  3. F10 (Step over) ni bosing. Qarang: dastur 3-qatorga (return 10) emas, 5-qatorga sakradi!

Demak, summa > 500000 sharti false bo'ldi. Nega? 500000 > 500000 — 500 000 o'zidan katta emas, u teng. Qoida esa "500 000 dan boshlab" deydi. To'g'ri shart: summa >= 500000.

Xato topildi. 5-qatordagi shart ham xuddi shunday: summa > 200000 aynan 200 000 da 5% bermaydi.

Maslahat: Bitta xatoni topsangiz, atrofda uning "egizagi" bor-yo'qligini tekshiring. Bir xil xato ko'pincha bir necha joyda takrorlanadi.

5.2 Step out

Hali ham chegirmaFoizi ichida turibsiz. Shift+F11 (Step out) ni bosing. Funksiya oxirigacha bajariladi va siz yakuniySumma ga qaytasiz. Yana F10 ni bossangiz, 12-qator bajariladi va foiz yonida 5 ko'rinadi.

Tekshirib ko'ring: Siz yakuniySumma ning 13-qatoridasiz. U yerda funksiya chaqiruvi yo'q. F10 va F11 ning farqi bormi?

Javob

Yo'q. const chegirma = (summa * foiz) / 100; qatorida sizning funksiyangiz chaqirilmaydi. Ichiga kiradigan joy yo'q, shuning uchun F11 ham F10 kabi keyingi qatorga o'tadi. Farq faqat chegirmaFoizi(summa) kabi chaqiruvli qatorda bor.

6. Debugger paneli: Scope, Watch, Call Stack

6.1 Scope — hozir qaysi o'zgaruvchilar bor

Scope bo'limi pauza paytidagi barcha o'zgaruvchilarni ko'rsatadi. Scope darsidagi qatlamlar bu yerda ko'z oldingizda turadi:

  • Local — joriy funksiyaning o'zgaruvchilari va parametrlari (summa, foiz, chegirma).
  • Script — fayl tepasida let/const bilan e'lon qilinganlar.
  • Global — brauzerning umumiy obyekti. Unda minglab narsa bor (brauzerning tayyor imkoniyatlari), odatda uni ochmaysiz.

Qiymat ustiga ikki marta bossangiz, uni o'zgartira olasiz. Masalan, summa ni 200000 qilib, dastur o'sha qiymat bilan qanday ishlashini sinaysiz.

6.2 Watch — o'zingiz tanlagan ifodani kuzatish

Watch (kuzatish) bo'limiga istalgan ifodani yozasiz. Debugger uni har qadamda qayta hisoblaydi.

  1. Watch sarlavhasi yonidagi + belgisini bosing.
  2. summa >= 500000 deb yozing va Enter bosing.

Endi har qadamda bu shart true yoki false ekanini ko'rib turasiz. Watch'ga summa * foiz / 100 kabi hisoblarni ham yozsa bo'ladi.

6.3 Call Stack — kim kimni chaqirdi

Rekursiya darsida chaqiruvlar stekini qog'ozda chizgan edik. Call Stack bo'limi uni jonli ko'rsatadi. chegirmaFoizi ichida to'xtaganingizda:

text
chegirmaFoizi   chegirma.js:2
yakuniySumma    chegirma.js:12
(anonymous)     chegirma.js:18

Eng tepada — hozir bajarilayotgan funksiya. Pastda — uni chaqirganlar. (anonymous) — fayl tepasidagi, hech qanday funksiyaga kirmagan kod.

Ro'yxatdagi yakuniySumma ni bossangiz, debugger o'sha funksiyaga "qaytib qaraydi". Scope bo'limi ham uning o'zgaruvchilarini ko'rsatadi.

6.4 Pauza paytida Console

Pauza paytida pastdagi Console (Esc tugmasi uni ochadi) joriy funksiya ichida ishlaydi. summa > 500000 deb yozsangiz, darhol false javobini olasiz. Bu — gipotezani tez tekshirish yo'li.

Tekshirib ko'ring: Rekursiya darsidagi faktorial(4) ning base case'ida (return 1 qatorida) to'xtasangiz, Call Stack'da nechta faktorial bo'ladi?

Javob

4 ta: faktorial(4), faktorial(3), faktorial(2) va eng tepada faktorial(1). Ularning ostida (anonymous) — birinchi chaqiruvni qilgan kod. Har birini bossangiz, Scope'da o'sha chaqiruvning n qiymatini ko'rasiz: 4, 3, 2, 1.

7. Breakpoint turlari

7.1 Shartli breakpoint

Tasavvur qiling, dastur 100 ta xaridni hisoblaydi. Sizga faqat 500 000 so'mlik xarid kerak. Oddiy breakpoint har safar to'xtaydi — 99 marta F8 bosasiz.

Shartli breakpoint (conditional breakpoint) — faqat shart true bo'lganda to'xtaydigan breakpoint.

chegirma.js oxiridagi uch qatorni shu sikl bilan almashtiring:

js
for (let summa = 100000; summa <= 1000000; summa += 100000) {
  console.log(summa, "→", yakuniySumma(summa));
}
  1. 12-qator raqamini o'ng tugma bilan bosing.
  2. Add conditional breakpoint... ni tanlang.
  3. summa === 500000 deb yozib, Enter bosing. Qator raqamida to'q sariq belgi paydo bo'ladi.
  4. Sahifani yangilang. Dastur faqat summa 500 000 bo'lganda to'xtaydi.

7.2 Logpoint — kodni o'zgartirmasdan console.log

Ba'zan to'xtash shart emas, faqat qiymatni ko'rish kerak. Logpoint — dasturni to'xtatmay, konsolga yozadigan nuqta.

  1. 13-qator raqamini o'ng tugma bilan bosing.
  2. Add logpoint... ni tanlang.
  3. "summa:", summa, "foiz:", foiz deb yozing — xuddi console.log qavsi ichidagidek. Belgi pushti rangda bo'ladi.

Sahifani yangilasangiz, konsolda har bir xarid uchun summa va foiz chiqadi. Faylingizga esa bitta ham console.log qo'shilmadi — keyin o'chirishni unutadigan narsa yo'q.

7.3 debugger ko'rsatmasi

Breakpoint'ni kodning o'zida ham qo'yish mumkin. Buning uchun debugger kalit so'zi bor:

js
function chegirmaFoizi(summa) {
  debugger; // DevTools ochiq bo'lsa — shu yerda to'xtaydi
  if (summa > 500000) {
    return 10;
  }
  return 0;
}

DevTools ochiq bo'lsa, dastur shu qatorda to'xtaydi. Yopiq bo'lsa — debugger e'tiborsiz qoladi. Bu usul fayl Sources ro'yxatida topish qiyin bo'lganda qulay.

7.4 Foydali qo'shimchalar

  • Deactivate breakpoints (Ctrl+F8) — barcha breakpoint'larni o'chirmay, vaqtincha "uxlatadi".
  • Breakpoints bo'limi — qo'yilgan hamma breakpoint ro'yxati. Galochkani olib tashlab, bittasini o'chirsa bo'ladi.
  • Pause on uncaught exceptions — dastur qizil xato bilan yiqilgan zahoti to'xtaydi. Xato qayerdan kelganini qidirishda juda qo'l keladi.

Tekshirib ko'ring: Sikl 1 000 marta aylanadi. Sizga faqat i 777 bo'lgandagi holat kerak. Qaysi breakpoint turi to'g'ri keladi va unga nima yozasiz?

Javob

Shartli breakpoint, sharti: i === 777. Oddiy breakpoint 777 marta to'xtab, sizni F8 bosishga majbur qiladi. Logpoint esa umuman to'xtamaydi — u faqat yozadi.

8. Xatoni tuzatish va tekshirish

Xato topildi — endi uni VS Code'da tuzatamiz. Ikkala shartda > ni >= ga almashtiramiz:

js
function chegirmaFoizi(summa) {
  if (summa >= 500000) {
    return 10;
  }
  if (summa >= 200000) {
    return 5;
  }
  return 0;
}

function yakuniySumma(summa) {
  const foiz = chegirmaFoizi(summa);
  const chegirma = (summa * foiz) / 100;
  return summa - chegirma;
}

console.log("200 000 →", yakuniySumma(200000));
console.log("500 000 →", yakuniySumma(500000));
console.log("700 000 →", yakuniySumma(700000));

Faylni saqlang va sahifani yangilang. Konsolda:

text
200 000 → 190000
500 000 → 450000
700 000 → 630000

Endi aynan chegaradagi qiymatlar — 200 000 va 500 000 ham to'g'ri. Tekshirishda doim chegara qiymatlarini sinang. Xatolar ko'pincha aynan shu yerda yashiringan bo'ladi.

Diqqat: Sources panelida ham kodni tahrirlab, Ctrl+S bosish mumkin. Lekin bu o'zgarish faqat brauzer xotirasida qoladi — sahifa yangilanganda yo'qoladi. Haqiqiy tuzatishni doim VS Code'dagi faylda qiling.

9. VS Code va Node.js'da debug

Brauzersiz, Node.js'da ishlaydigan kodni ham xuddi shunday debug qilasiz.

9.1 VS Code: JavaScript Debug Terminal

  1. VS Code'da Ctrl+Shift+P ni bosing va JavaScript Debug Terminal deb yozing.
  2. Debug: JavaScript Debug Terminal ni tanlang — maxsus terminal ochiladi.
  3. Faylda qator raqamining chap tomonini bosing — qizil nuqta (breakpoint) paydo bo'ladi.
  4. Terminalda node chegirma.js ni ishga tushiring. Dastur breakpoint'da to'xtaydi.

Chap panelda VARIABLES (Scope), WATCH va CALL STACK bo'limlari bor — Chrome'dagi bilan bir xil. Tepada boshqaruv tugmalari chiqadi. Faqat bitta farq: VS Code'da davom etish F5, Chrome'da F8. F10, F11 va Shift+F11 ikkalasida bir xil.

9.2 node --inspect va Chrome

Node dasturini Chrome DevTools bilan ham debug qilsa bo'ladi:

bash
node --inspect-brk chegirma.js

--inspect-brk dasturni birinchi qatordayoq to'xtatib turadi. Keyin Chrome'da chrome://inspect manzilini oching va Open dedicated DevTools for Node ni bosing. Tanish Sources paneli ochiladi. --inspect (oxirida -brk siz) esa to'xtamasdan ishga tushiradi.

10. console.log yoki debugger?

console.log yomon emas — u ham kerakli vosita. Qaysi biri qachon qulay?

Vaziyat Nima qulay
Bitta qiymatni tez ko'rish console.log
Xato qayerdaligi umuman noma'lum Debugger
Ko'p o'zgaruvchi, ko'p qadam Debugger
Sikl ichida bitta aniq holat Shartli breakpoint
Kodni o'zgartirmay kuzatish Logpoint

11. Ko'p uchraydigan xatolar

11.1 Konsolda o'zgaruvchi "topilmaydi"

chegirmaFoizi ichida to'xtab, Console'ga foiz deb yozdingiz:

text
Uncaught ReferenceError: foiz is not defined

foiz — yakuniySumma ning o'zgaruvchisi, chegirmaFoizi uni ko'rmaydi. Console Call Stack'da tanlangan funksiya ichida ishlaydi. Tuzatish: Call Stack'da yakuniySumma ni bosing va qaytadan yozing.

11.2 F10 bilan funksiyadan "sakrab o'tish"

const foiz = chegirmaFoizi(summa); qatorida F10 bossangiz, funksiya ichini ko'rmay o'tib ketasiz. Xato esa aynan o'sha ichkarida edi. Tuzatish: funksiya ichini ko'rmoqchi bo'lsangiz — F11. Adashib o'tib ketsangiz, sahifani yangilab, qaytadan boshlang.

11.3 debugger ni kodda unutib qoldirish

debugger foydalanuvchi uchun ham ishlaydi: DevTools'ni ochgan har bir kishining sahifasi to'xtab qoladi. Loyihalarda ESLint (kod tekshiruvchi vosita) buni ushlaydi:

text
Unexpected 'debugger' statement.

Tuzatish: ishni tugatgach, debugger qatorini o'chiring.

11.4 Breakpoint ishlamayapti

Uchta keng tarqalgan sabab bor:

  • Sahifa yangilanmagan — kod allaqachon ishlab bo'lgan.
  • Breakpoint qo'yilgan qatorga dastur umuman yetib bormaydi. Masalan, bajarilmagan if ichida.
  • Breakpoint'lar vaqtincha o'chirilgan (Ctrl+F8). Belgilar xira ko'rinsa — shu sabab.

12. Mashqlar

1-mashq (oson): Stekni jonli ko'ring

debug-mashq papkasida faktorial.html yarating. Ichiga <script> tegi bilan rekursiya darsidagi faktorial funksiyasini yozing. return 1; qatoridan oldin debugger; qo'ying va faktorial(4) ni chaqiring. DevTools'ni ochib, sahifani yangilang. Call Stack'da nechta qator bor?

Yechim
html
<!DOCTYPE html>
<html lang="uz">
<head>
  <meta charset="UTF-8">
  <title>Faktorial debug</title>
</head>
<body>
  <script>
    function faktorial(n) {
      if (n <= 1) {
        debugger;
        return 1;
      }
      return n * faktorial(n - 1);
    }

    console.log(faktorial(4));
  </script>
</body>
</html>

Call Stack'da 5 qator bo'ladi: to'rtta faktorial va eng pastda (anonymous). Har bir faktorial qatorini bosib, Scope'dagi n ni kuzating: 1, 2, 3, 4. F8 bossangiz, konsolda 24 chiqadi. Ishni tugatgach, debugger ni o'chirishni unutmang.

2-mashq (o'rta): Taksi narxidagi xato

Taksi tarifi: 5 km gacha — 12 000 so'm. Har bir qo'shimcha km — 2 500 so'm. Demak, 6 km — 14 500 so'm bo'lishi kerak. Lekin quyidagi kod boshqacha javob beradi:

js
function taksiNarxi(km) {
  if (km <= 5) {
    return 12000;
  }
  const qoshimcha = km - 4;
  return 12000 + qoshimcha * 2500;
}

console.log(taksiNarxi(5)); // 12000
console.log(taksiNarxi(6)); // 17000

Kodni taksi.js fayliga yozib, sahifaga ulang. 6-qatorga (return 12000 + ...) shartli breakpoint qo'ying: km === 6. Watch'ga qoshimcha ni qo'shing. Xatoni toping va tuzating.

Yechim

Dastur to'xtaganda Watch'da qoshimcha: 2 ko'rinadi. 6 km da qo'shimcha masofa 1 km bo'lishi kerak edi. Demak, km - 4 noto'g'ri — 5 km tarifga kiradi, shuning uchun km - 5 bo'lishi kerak:

js
function taksiNarxi(km) {
  if (km <= 5) {
    return 12000;
  }
  const qoshimcha = km - 5;
  return 12000 + qoshimcha * 2500;
}

console.log(taksiNarxi(5)); // 12000
console.log(taksiNarxi(6)); // 14500
console.log(taksiNarxi(10)); // 24500

Bu — klassik "bittaga xato" (off-by-one): chegara bir birlikka surilib qolgan. Bunday xatolar ko'pincha chegara qiymatda (bu yerda 6 km) ko'rinadi.

3-mashq (qiyin): Omonat hisoblagichi

Bank omonati har oy 2% o'sadi. 1 000 000 so'm 12 oydan keyin qancha bo'ladi? To'g'ri javob — 1268242. Lekin kod boshqa son beradi:

js
function omonat(boshlangich, oylar) {
  let jami = boshlangich;
  for (let oy = 1; oy < oylar; oy++) {
    jami = jami + jami * 0.02;
  }
  return Math.round(jami);
}

console.log(omonat(1000000, 12)); // 1243374
console.log(omonat(1000000, 1)); // 1000000

Kodga tegmasdan, jami = ... qatoriga logpoint qo'ying: "oy:", oy, "jami:", jami. Konsolda nechta qator chiqadi? Xatoni toping va tuzating.

Yechim

omonat(1000000, 12) uchun logpoint 11 ta qator chiqaradi: oy: 1 dan oy: 11 gacha. 12-oy hisoblanmayapti. Ikkinchi chaqiruv buni yana ham aniq ko'rsatadi: 1 oyda umuman foiz qo'shilmadi. Sabab — sikl sharti oy < oylar. oy 12 ga yetganda shart false bo'lib, sikl to'xtaydi.

js
function omonat(boshlangich, oylar) {
  let jami = boshlangich;
  for (let oy = 1; oy <= oylar; oy++) {
    jami = jami + jami * 0.02;
  }
  return Math.round(jami);
}

console.log(omonat(1000000, 12)); // 1268242
console.log(omonat(1000000, 1)); // 1020000

Bu ham off-by-one xato. Logpoint uni kodga bitta ham console.log qo'shmasdan ko'rsatdi. omonat(1000000, 1) kabi eng kichik holatni sinash — xatoni tez ochadigan yaxshi odat.

13. Real ishda

  • Har kuni: frontend va backend dasturchilar debugger'ni har kuni ishlatadi. Ish joyida birinchi haftadayoq sizdan shuni kutishadi.
  • Katta loyihalar: Vite yoki webpack kodni yig'ib, siqib chiqaradi. Source map (manba xaritasi) tufayli DevTools baribir sizning asl faylingizni ko'rsatadi va breakpoint unda ishlaydi.
  • Node.js serverlar: VS Code'ning JavaScript Debug Terminal'i Express yoki NestJS serverini ham xuddi shunday to'xtatadi.
  • React: React Developer Tools kengaytmasi komponentlar daraxtini ko'rsatadi — bu ham debug vositasi.
  • Intervyu: "Xatoni qanday topasiz?" degan savolga "console.log qo'yaman" javobi zaif. "Breakpoint qo'yib, qadamma-qadam tekshiraman, Call Stack va Scope'ga qarayman" — kuchli javob.

Xato xabarlari va stack trace'ni o'qishni xato turlari darsida, xatoni tizimli qidirish usullarini esa tizimli debugging darsida o'rganamiz.

Xulosa

  • Debugger dasturni to'xtatib, har bir qadamda barcha o'zgaruvchilarni ko'rsatadi.
  • Breakpoint — qator raqamini bosish; ajratilgan qator hali bajarilmagan.
  • F8 — davom etish, F10 — ustidan o'tish, F11 — ichiga kirish, Shift+F11 — chiqish.
  • Scope — mavjud o'zgaruvchilar, Watch — o'zingiz tanlagan ifodalar, Call Stack — kim kimni chaqirgani.
  • Shartli breakpoint — kerakli holatda to'xtatadi; logpoint — kodga tegmay yozadi; debugger — koddagi breakpoint.
  • Tuzatgandan keyin chegara qiymatlarini sinang: xatolar ko'pincha o'sha yerda.

Keyingi dars: Massiv: yaratish va elementga murojaat — yangi modulni boshlaymiz: ko'p qiymatni bitta ro'yxatda saqlashni o'rganamiz.

Ulashish:Telegram'da

Izohlar (0)

Izoh yozish uchun kiring.

  • Hozircha izoh yo'q. Birinchi bo'ling!
JavaScript debug: Chrome DevTools bilan xatoni qadamma-qadam topish — IlmHamroh