# JavaScript DevTools bilan xatolarni topish

> Brauzer DevTools: Console metodlari, Sources va breakpoint, debugger kalit so'zi, Network va xato o'qish. Kodni tekshirish va tuzatishni o'rganing.

Manba: https://learncode.uz/javascript/devtools/
Sana: 2026-06-06

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

```js
console.log("plain message");
console.info("ma'lumot");
console.warn("ogohlantirish");
console.error("error");
```

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

## Jadval ko'rinishi

```js
const students = [
  { name: "Aziz", score: 85, group: "IT-21" },
  { name: "Dilnoza", score: 92, group: "IT-20" },
  { name: "Bobur", score: 78, group: "IT-21" },
];

console.table(students);

console.log(students);
```

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

## Guruhlash

```js
console.group("Foydalanuvchi tekshiruvi");
console.log("ism: Aziz");
console.log("age: 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

```js
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

```js
const scores = [85, 45, 92, 30];

for (const b of scores) {
  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

```js
function run(tur) {
  console.count(tur);
}

run("o'qish");
run("yozish");
run("o'qish");
run("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**:

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

calculate(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.

> **Nega log'dan yaxshi**
>
> `console.log` bilan har o'zgaruvchi uchun alohida qator yozish kerak. To'xtash
> nuqtasida esa **hamma narsa** bir vaqtda ko'rinadi — va kodni o'zgartirmasdan.
> Chiqarishdan oldin `debugger` ni olib tashlashni unutmang.

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

## Xato xabarini o'qish

```js
function use(obj) {
  return obj.name.toUpperCase();
}

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

Xato xabarini o'qishda uch narsa muhim: **turi** (`TypeError`,
`ReferenceError`), **xabari** va **stack** — qaysi funksiyalar orqali shu
yerga kelgani. [Xatolar](https://learncode.uz/javascript/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:

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

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

try {
  missing.textContent = "text";
} catch (error) {
  console.log("Xato:", error.message);
}

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

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

## Network — so'rovlarni ko'rish

[fetch](https://learncode.uz/javascript/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

1. `F12` bilan DevTools'ni oching va Console'ga o'ting;
2. obyektlar massivini `console.table` bilan chiqaring;
3. `console.time`/`timeEnd` bilan sikl vaqtini o'lchang;
4. funksiyaga `debugger` qo'yib, Scope panelida o'zgaruvchilarni ko'ring;
5. mavjud bo'lmagan elementga murojaat qilib, xato xabarini o'qing;
6. 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](https://learncode.uz/javascript/kod-sifati) — o'qiladigan
kod yozish qoidalari.