JavaScript DevTools bilan xatolarni topish

Kod ishlamayotganda taxmin qilish o’rniga ko’rish kerak. Brauzerdagi DevTools buni beradi: kod qayerda to’xtaganini, o’zgaruvchilarda nima turganini va so’rovlar qanday ketganini.

Ochish

Tizim	Tugma
Windows / Linux	`F12` yoki `Ctrl + Shift + I`
macOS	`Cmd + Option + I`
Har qanday	O’ng tugma → “Inspect” / “Ko’rib chiqish”

Asosiy bo’limlar: Console (xabarlar), Sources (kod va to’xtash nuqtalari), Elements (DOM), Network (so’rovlar).

console — log’dan boshqasi ham bor

JavaScript

console.log("oddiy xabar");
console.info("ma'lumot");
console.warn("ogohlantirish");
console.error("xato");

Haqiqiy DevTools’da warn sariq, error qizil rangda va chaqiruvlar zanjiri bilan chiqadi — xato qayerdan kelganini ko’rsatadi.

Jadval ko’rinishi

JavaScript

const talabalar = [
{ ism: "Aziz", ball: 85, guruh: "IT-21" },
{ ism: "Dilnoza", ball: 92, guruh: "IT-20" },
{ ism: "Bobur", ball: 78, guruh: "IT-21" },
];

console.table(talabalar);

console.log(talabalar);

console.table obyektlar massivini chinakam jadval qilib chizadi — DevTools konsolida ustunlar bo’yicha saralash ham mumkin.

Guruhlash

JavaScript

console.group("Foydalanuvchi tekshiruvi");
console.log("ism: Aziz");
console.log("yosh: 20");

console.group("Huquqlar");
console.log("o'qish: ha");
console.log("yozish: yo'q");
console.groupEnd();

console.groupEnd();
console.log("Guruhdan tashqarida");

Uzun ro’yxatlarni yig’ib qo’yish uchun qulay.

Vaqt o’lchash

JavaScript

console.time("hisob");

let s = 0;
for (let i = 0; i < 1000000; i++) s += i;

console.timeEnd("hisob");

console.log("Natija:", s);

time va timeEnd bir xil nom bilan chaqiriladi — orasidagi vaqtni beradi. Bu tezlikni o’lchashning eng oson usuli.

Shartli tekshiruv

JavaScript

const ballar = [85, 45, 92, 30];

for (const b of ballar) {
console.assert(b >= 60, "Past ball topildi: " + b);
}

console.log("Tekshiruv tugadi");

assert shart yolg’on bo’lgandagina xabar chiqaradi — barcha holatni loglashdan ko’ra toza.

Sanash

JavaScript

function ishla(tur) {
console.count(tur);
}

ishla("o'qish");
ishla("yozish");
ishla("o'qish");
ishla("o'qish");

Funksiya necha marta va qaysi qiymat bilan chaqirilganini bilish uchun.

debugger — kodni to’xtatish

Eng kuchli vosita console.log emas, to’xtash nuqtasi:

function hisobla(a, b) {
  const yigindi = a + b;
  debugger;          // DevTools ochiq bo'lsa — shu yerda to'xtaydi
  return yigindi * 2;
}

hisobla(3, 4);

Kod shu qatorda to’xtaydi va siz:

barcha o’zgaruvchilar qiymatini ko’rasiz (Scope paneli);
chaqiruvlar zanjirini ko’rasiz (Call Stack);
qadamma-qadam yurasiz (F10 — keyingi qator, F11 — funksiya ichiga);
konsolda joriy kontekst bilan ifoda yozib sinaysiz.

Sources panelida qator raqamini bosib ham to’xtash nuqtasi qo’yiladi — kodga tegmasdan.

Xato xabarini o’qish

JavaScript

function ishlat(obyekt) {
return obyekt.ism.toUpperCase();
}

try {
ishlat({ ism: "Aziz" });
console.log("Birinchi ishladi");
ishlat({});
} catch (xato) {
console.log("Turi:", xato.name);
console.log("Xabar:", xato.message);
console.log("Zanjir bor:", typeof xato.stack === "string");
}

Xato xabarini o’qishda uch narsa muhim: turi (TypeError, ReferenceError), xabari va stack — qaysi funksiyalar orqali shu yerga kelgani. Xatolar darsida turlari sanab o’tilgan.

Keng uchraydigan xatolar

Xabar	Sabab
`x is not defined`	O’zgaruvchi e’lon qilinmagan yoki nomi xato
`Cannot read properties of null`	Element topilmadi (`querySelector` `null` qaytardi)
`x is not a function`	Nomi xato yoki obyektda bunday metod yo’q
`Unexpected token`	Sintaksis xatosi — qavs yoki tirnoq yopilmagan
`Cannot access before initialization`	`let`/`const` e’londan oldin ishlatilgan

Ikkinchisi eng ko’p uchraydi:

JavaScript

const yoq = document.querySelector("#bunday-element-yoq");

console.log("Natija:", yoq);

try {
yoq.textContent = "matn";
} catch (xato) {
console.log("Xato:", xato.message);
}

if (yoq) {
yoq.textContent = "matn";
} else {
console.log("Element yo'q — tekshiruv qutqardi");
}

querySelector topa olmasa null qaytaradi — natijani ishlatishdan oldin tekshirish kerak.

Network — so’rovlarni ko’rish

fetch bilan ishlaganda Network paneli ko’rsatadi:

so’rov manzili va usuli (GET/POST);
status kodi (200, 404, 500);
yuborilgan va qaytgan ma’lumot (Payload / Response);
qancha vaqt ketgani.

So’rov ishlamayotganda birinchi shu yerga qaraladi: so’rov umuman ketdimi, qanday status keldi va javob tanasida nima bor.

Amaliy mashq

F12 bilan DevTools’ni oching va Console’ga o’ting;
obyektlar massivini console.table bilan chiqaring;
console.time/timeEnd bilan sikl vaqtini o’lchang;
funksiyaga debugger qo’yib, Scope panelida o’zgaruvchilarni ko’ring;
mavjud bo’lmagan elementga murojaat qilib, xato xabarini o’qing;
Network panelida fetch so’rovini kuzating.

Qisqacha xulosa

DevTools F12 bilan ochiladi; asosiy panellar — Console, Sources, Network.
console da table, group, time, count, assert ham bor.
debugger yoki Sources’dagi to’xtash nuqtasi — eng kuchli usul.
Xatoda uch narsa muhim: turi, xabari va chaqiruvlar zanjiri.
Cannot read properties of null — element topilmagan, tekshirish kerak.
Network paneli so’rov status va javobini ko’rsatadi.

Keyingi darsda kod sifati va nomlash — o’qiladigan kod yozish qoidalari.