Chapter 51 — Debugging Tools & Best Practices

Bu — kitobning yakuniy bobi. Bu bobda xatolarni topish va tuzatish (debugging) vositalarini, hamda butun kitob davomida o'rgangan bilimlarni birlashtiruvchi yaxshi amaliyotlarni ko'rib chiqamiz.

---

51.1 console obyekti — oddiy console.log'dan tashqari

Simple Explanation

Kitob davomida asosan console.log()ni ishlatdik, lekin console obyektining boshqa, ancha kuchli metodlari ham bor.

Jadval

Example — console.table()

script.js
JavaScriptNusxalash
01let users = [
02    { name: "Ali", age: 25 },
03    { name: "Vali", age: 30 }
04];
05 
06console.table(users);
07// Chiroyli jadval ko'rinishida chiqadi

Example — console.time()

script.js
JavaScriptNusxalash
01console.time("hisoblash");
02 
03let sum = 0;
04for (let i = 0; i < 1000000; i++) {
05    sum += i;
06}
07 
08console.timeEnd("hisoblash"); // "hisoblash: 5.23ms"

🔗 Connection
console.time() — Chapter 20'da o'rgangan Date.now() orqali qo'lda vaqt o'lchashning tayyor, qulayroq alternativi.

51.2 Breakpoint'lar bilan ishlash

Simple Explanation

Breakpoint — kodni ma'lum bir qatorda "to'xtatib", o'sha paytdagi barcha variable'lar qiymatini tekshirish imkonini beruvchi debugging vositasi.

debugger kalit so'zi

script.js
JavaScriptNusxalash
01function calculateTotal(items) {
02    let total = 0;
03 
04    for (let item of items) {
05        debugger; // kod shu yerda to'xtaydi (agar DevTools ochiq bo'lsa)
06        total += item.price;
07    }
08 
09    return total;
10}

Explanation

Agar brauzerning Developer Tools (F12) ochiq bo'lsa, debugger qatoriga yetib kelganda, kod avtomatik "pauza" qiladi, va dasturchi o'sha paytdagi barcha variable'larni (total, item) tekshirishi mumkin.

💡 Key Idea
console.log() bilan "taxmin qilib" tekshirish o'rniga, breakpoint — kodning aynan qaysi qatorida, qanday holatda ekanini aniq ko'rish imkonini beradi — bu murakkab xatolarni topishda ancha samarali.

51.3 ⚠️ Qiyin mavzu: Xato xabarlarini (Stack Trace) o'qish

Simple Explanation

Xatolik yuz berganda, JavaScript odatda Stack Trace — xatolik qayerdan boshlanganini ko'rsatuvchi qatorlar ro'yxatini beradi. Buni to'g'ri o'qishni bilish — debugging'ning eng muhim ko'nikmalaridan biri.

Example — Stack Trace

script.js
JavaScriptNusxalash
01function processOrder(order) {
02    return calculateTotal(order.items);
03}
04 
05function calculateTotal(items) {
06    return items.reduce((sum, item) => sum + item.price, 0);
07}
08 
09processOrder({ items: null });

Xato xabari (taxminan):

code.text
TEXTNusxalash
01TypeError: Cannot read properties of null (reading 'reduce')
02    at calculateTotal (file.js:6:17)
03    at processOrder (file.js:2:12)
04    at file.js:9:1

How It Works — Stack Trace'ni qanday o'qish kerak

1. Birinchi qator — xatolikning aniq turi va sababi: null ustida .reduce() ishlatishga urinilgan.
2. at calculateTotal (file.js:6:17) — xatolik aynan qaysi function va qatorda yuz bergani (Chapter 29'dagi Call Stack'ning "eng tepasi").
3. Keyingi qatorlar — bu functionni kim chaqirgani, pastga qarab, chaqiruvlar zanjiri bo'yicha (Chapter 29.2'dagi Call Stack diagrammasi).

🔗 Connection
Bu — Chapter 29'da o'rgangan Call Stack tushunchasining, real xato xabarlarida qanday "ko'rinishi"ga aniq misol: Stack Trace — aslida, xatolik yuz bergan paytdagi Call Stack'ning "suratga olingan" holati.

🔥 Important
Xato xabarini ko'rganda, birinchi navbatda eng tepadagi qatorga (xatolik aynan qayerda yuz bergani) e'tibor bering — bu, muammoning aniq manbasini eng tez topish yo'li.

51.4 Umumiy Debugging Strategiyasi

Jadval — Qadamlar

Amaliy misol — kitob davomidagi bilimlarni qo'llash

Aytaylik, quyidagi xato yuz berdi: "Cannot read properties of undefined (reading 'map')".

script.js
JavaScriptNusxalash
01function displayUsers(response) {
02    return response.data.map(user => user.name); // xatolik shu yerda
03}

Debugging jarayoni:

1. Xato — undefinedda .map() chaqirilyapti, ya'ni response.data — undefined.
2. Chapter 39'da o'rgangan Optional Chaining yordamida, xavfsizroq tekshiruv qo'shish mumkin:

script.js
JavaScriptNusxalash
01function displayUsers(response) {
02    if (!response?.data) {
03        console.error("Ma'lumot topilmadi:", response);
04        return [];
05    }
06    return response.data.map(user => user.name);
07}

Explanation

Bu — Chapter 18 (Error Handling) va Chapter 39 (Optional Chaining)dagi bilimlarni birlashtirib, kelajakda shunga o'xshash xatolarning oldini olish.

51.5 Kitob yakuni — Umumiy Best Practices

Kod sifatini oshiruvchi asosiy tamoyillar

🎯 Yakuniy fikr
JavaScript'ni chuqur bilish — bu nafaqat sintaksisni yodlash, balki nima uchun narsalar shunday ishlashini tushunish (Scope, Closure, Event Loop, Prototype kabi "sahna orqasidagi" mexanizmlar). Ushbu handbook orqali siz "zero"dan "hero"gacha bo'lgan yo'lni bosib o'tdingiz — endi bu bilimlarni amaliyotda, real loyihalarda mustahkamlash vaqti keldi.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task:
console.table() yordamida, 3 ta mahsulotdan iborat array'ni (har birida name va price) jadval ko'rinishida chiqaring.
Required Concepts:

• console.table()
  Hint:
  Chapter 51.1'dagi misolga o'xshab yozing.

🟡 Exercise 2 — Medium

Task:
Ataylab xato beradigan function yozing (masalan, undefinedning propertysiga murojaat qiladigan), uni ishga tushirib, natijada chiqqan Stack Trace'ni tahlil qiling — xatolik turi, qatori va chaqiruvlar zanjirini aniqlang.
Required Concepts:

• Stack Trace o'qish
  Hint:
  Chapter 51.3'dagi tuzilishga qarab, o'z xato xabaringizni tahlil qiling.

🔴 Exercise 3 — Hard

Task:
Kitobda o'rgangan kamida 5 ta turli tushunchani (masalan, Closure, Async/Await, Error Handling, Array Methods, Class) birlashtirgan, kichik amaliy dastur yozing — masalan, "Vazifalar ro'yxati" (To-Do List) tizimi: TodoList class'i, localStorageda saqlash (Chapter 36), xatolarni boshqarish, va kamida bitta test (Chapter 50) bilan.
Required Concepts:

• Kitobning turli boblaridagi bilimlarni birlashtirish
  Hint:
  Bu — yakuniy, "hamma narsani birlashtiruvchi" mashq, shoshilmasdan, bosqichma-bosqich yozing.

🔮 Predict the Output

script.js
JavaScriptNusxalash
01function level3() {
02    throw new Error("Xatolik level3'da");
03}
04 
05function level2() {
06    level3();
07}
08 
09function level1() {
10    level2();
11}
12 
13level1();

Stack Trace'da qaysi function eng tepada ko'rsatiladi?

🧠 Think first! Javobni ko'rishdan oldin kamida 30 soniya o'ylang.

<details> <summary>Answer</summary> level3 — eng tepada ko'rsatiladi.

Why?
Chapter 29.2 (Call Stack) va Chapter 51.3 (Stack Trace)da o'rgandik: Stack Trace — xatolik aynan qayerda yuz berganidan boshlab, uni chaqirgan function'larga qarab pastga qarab davom etadi. throw — level3 ichida yuz bergani uchun, u ro'yxatning eng yuqorisida turadi, undan keyin level2, keyin level1 keladi.

</details>

🐛 Debugging Challenge — Yakuniy, kitobning barcha bilimlarini birlashtiruvchi

Quyidagi kodda bir nechta muammo bor:

script.js
JavaScriptNusxalash
01function getActiveUsers(users) {
02    let result = []
03    for (var i = 0; i <= users.length; i++) {
04        if (users[i].active == true) {
05            result.push(users[i])
06        }
07    }
08    return result
09}
10 
11let users = [
12    { name: "Ali", active: true },
13    { name: "Vali", active: false }
14];
15 
16console.log(getActiveUsers(users));

Your Task:
Ushbu kodda kamida 3 ta muammoni toping (kitobning turli boblariga tayanib) va ularning barchasini tuzating.

<details> <summary>Solution</summary> Muammo 1 (Chapter 7): i <= users.length — bu off-by-one xatosi, chunki oxirgi to'g'ri index — users.length - 1. i <= users.length bilan, users[users.length] — undefinedga murojaat qilinadi, va undefined.active — xatolik beradi. Muammo 2 (Chapter 3): == true — Chapter 3'da o'rganganimizdek, === ishlatish tavsiya etiladi, == emas (garchi bu holatda unchalik xavfli bo'lmasa ham). Muammo 3 (Chapter 11): var i — let ishlatish tavsiya etiladi (garchi bu misolda closure muammosi yo'q, lekin yaxshi amaliyot sifatida). Muammo 4 (Chapter 14): Bu vazifa uchun, oddiy for loop o'rniga, Chapter 14'dagi filter() ancha qisqa va o'qish oson yechim beradi.

To'liq tuzatilgan versiya:

script.js
JavaScriptNusxalash
01function getActiveUsers(users) {
02    return users.filter(user => user.active === true);
03}
04 
05let users = [
06    { name: "Ali", active: true },
07    { name: "Vali", active: false }
08];
09 
10console.log(getActiveUsers(users)); // [{ name: "Ali", active: true }]

</details>

📌 Chapter Summary

• console obyekti — log()dan tashqari, table(), time(), group() kabi kuchli metodlarga ega.
• debugger kalit so'zi va breakpoint'lar — kodni "to'xtatib", holatni aniq tekshirish imkonini beradi.
• Stack Trace — xatolik qayerdan boshlanganini, chaqiruvlar zanjiri bo'yicha ko'rsatadi.
• Debugging — tizimli yondashuv (o'qish, joylashtirish, tekshirish, taxmin qilish) talab qiladi.
• Yaxshi kod yozish odatlari — kitobning barcha boblarida o'rgangan tamoyillarni birlashtiradi.

🎯 Key Takeaways

• Xato xabarining birinchi qatoriga va Stack Trace'ning eng tepasiga har doim diqqat bilan qarang.
• console.log()dan tashqari, console.table() va debugger kabi vositalar debugging'ni ancha tezlashtiradi.
• Har bir xato — kitobda o'rgangan qandaydir tushuncha (scope, async, type coercion) bilan bog'liq bo'lishi mumkin — tizimli tekshiring.
• Kod sifatini oshirish — bitta katta qoidaga emas, balki kitob davomida o'rgangan ko'plab kichik, izchil odatlarga asoslanadi.
• Eng muhimi: JavaScript'ni chinakam o'zlashtirish — amaliyot orqali keladi. Har bir bobdagi mashqlarni qayta ishlang, o'z loyihalaringizni yarating, va xatolardan qo'rqmang — ular eng yaxshi o'qituvchidir.

⚡ Quick Cheat Sheet

script.js
JavaScriptNusxalash
01console.log(value);
02console.error("xatolik");
03console.warn("ogohlantirish");
04console.table(arrayOfObjects);
05console.time("label");
06console.timeEnd("label");
07 
08debugger; // kodni to'xtatish nuqtasi

🎉 Handbook yakunlandi!
Siz JavaScript'ni Zero dan Hero gacha — 51 ta bob, Variables'dan tortib Debugging Best Practices'gacha — to'liq bosib o'tdingiz. Endi bu bilimlarni mustahkamlashning eng yaxshi yo'li — amaliyot: kichik loyihalar qiling, kodni qayta yozing, xatolarga duch keling va ularni kitobda o'rgangan bilimlar bilan hal qiling.
Omad tilaymiz! 🚀

---