# Brauzer DevTools va debugging

> Brauzer DevTools orqali HTML va CSSni tekshirish, Console xatolari, Network so'rovlari, breakpoint va web muammosini tizimli ravishda topish usuli.

Manba: https://learncode.uz/web-dasturlash/devtools-debugging/
Sana: 2026-05-12

![Dasturchi brauzer DevTools orqali Elements, Console va Network panellarida web xatoni tekshirishi](https://learncode.uz/images/web-dasturlash/devtools-debugging-hero.webp)

*DevTools brauzer ko'rayotgan DOM, CSS, JavaScript xatolari va tarmoq so'rovlarini bevosita tekshirish imkonini beradi.*

**Debugging** — xatoni tasodifiy kod o'zgartirib emas, sababini topib tuzatish
jarayoni. Brauzer DevTools'i frontend va HTTP muammolari uchun eng muhim
asboblardan biridir. Uni ochish uchun ko'p brauzerda `F12` yoki
`Ctrl+Shift+I` ishlaydi.

## Asosiy panellar

### Elements — brauzer ko'rayotgan sahifa

Elements panelida serverdan kelgan asl fayl emas, brauzer xotirasidagi joriy
DOM ko'rinadi. JavaScript qo'shgan elementlar ham shu yerda paydo bo'ladi.

Elementni tanlab:

- qaysi CSS qoida ishlayotganini;
- qaysi qoida ustidan chizilib, yutqazganini;
- box modeldagi margin, border, padding va o'lchamni;
- accessibility tree'dagi rol va nomni ko'rish mumkin.

DevTools ichidagi HTML yoki CSS o'zgarishi vaqtinchalik. Sahifani yangilasangiz
yo'qoladi, shuning uchun topilgan tuzatishni keyin source faylga yozish kerak.

Bu vaqtinchalikligi aslida afzallik: xavfsiz tajriba maydoni. Rangni, masofani
yoki `display` qiymatini darhol o'zgartirib natijani ko'rasiz — kod tahrirlash,
saqlash va yangilash tsiklisiz.

### CSS nega ishlamayapti

Eng ko'p uchraydigan frontend savoli shu. Elements panelidagi `Styles`
bo'limida javob deyarli har doim ko'rinadi:

- Qoida **ustidan chizilgan** bo'lsa — uni boshqa, kuchliroq selektor yengib
  o'tgan.
- Qoida umuman **ko'rinmasa** — selektor bu elementga tushmayapti yoki fayl
  yuklanmagan.
- Qiymat to'g'ri, lekin natija yo'q bo'lsa — element `display` turi buni
  qo'llab-quvvatlamasligi mumkin.

`Computed` bo'limi esa yakuniy, brauzer haqiqatan qo'llagan qiymatni ko'rsatadi.
Bahs tugatadigan joy aynan shu.

### Responsive va qurilma sinovi

DevTools'dagi qurilma rejimi (`Ctrl+Shift+M`) sahifani turli ekran o'lchamida
ko'rsatadi. Bu haqiqiy telefon o'rnini bosmaydi, lekin layout muammosining
ko'pini topadi.

Tekshiring: matn kesilmayaptimi, tugmalar barmoq uchun yetarlicha kattami,
gorizontal aylantirish paydo bo'lmadimi? Oxirgisi eng ko'p uchraydigan xato va
odatda sababi bitta juda keng element bo'ladi.

### Console — xato va kuzatuvlar

Console JavaScript xatolari, ogohlantirishlar va dasturchi chiqargan loglarni
ko'rsatadi. Xato matnidagi fayl va qator havolasini ochib, muammo qayerda
yuz berganini ko'rish mumkin.

```js
console.log('Yuklangan mahsulotlar:', products.length);
console.error('So\'rov bajarilmadi:', error);
```

Log foydali, lekin tasodifiy ko'p log muammoni yashiradi. Nimani tekshirayotganingizni
aniq yozing va maxfiy token, parol yoki shaxsiy ma'lumotni Console'ga chiqarmang.

`console.log` dan tashqari bir necha foydali usul bor. `console.table()` massiv
yoki obyektlar ro'yxatini jadval ko'rinishida chiqaradi — ma'lumot tuzilishini
tekshirishda ancha qulay. `console.warn()` va `console.error()` esa xabarni
ajratib ko'rsatadi va filtrlash imkonini beradi.

Console'da xato xabari ko'rinsa, uning yonidagi uchburchakni bosing: u
**stack trace** ni ochadi, ya'ni xato qaysi funksiyalar zanjiri orqali
yuzaga kelganini ko'rsatadi. Ro'yxatning yuqorisi — xato sodir bo'lgan joy,
pastroqda esa uni chaqirgan kod turadi.

Muhim tafsilot: Console'da ko'rsatilgan obyekt **jonli havola** bo'lishi
mumkin. Ya'ni siz uni ochganingizda, obyektning hozirgi holati ko'rinadi —
log yozilgan paytdagi emas. Aniq nusxa kerak bo'lsa,
`console.log(JSON.stringify(obyekt))` ishlating.

### Network — so'rov va javob dalili

Network paneli sahifa yuborgan HTTP so'rovlarni ko'rsatadi. Muammo frontenddami
yoki serverdami, aniqlashda quyidagi savollar yordam beradi:

1. So'rov umuman yuborildimi?
2. URL va metod to'g'rimi?
3. Holat kodi nima?
4. Request body va headerlarda kutilgan ma'lumot bormi?
5. Server javobi qanday formatda?
6. So'rov qancha vaqt oldi va nimani kutdi?

![Elements DOM va CSSni, Console JavaScript xatolarini, Network HTTP so'rovlarni tekshirishi](https://learncode.uz/images/web-dasturlash/devtools-panellari.webp)

*Elements ko'rinishni, Console kod bajarilishini, Network esa brauzer-server almashinuvini tekshiradi.*

> **Natija bo'sh chiqdi**
>
> Ro'yxat sahifasi bo'sh bo'lsa, avval Network'ni tekshiring. So'rov `500`
> qaytarsa, muammo serverda. `200` va bo'sh massiv qaytsa, so'rov ishlagan,
> ammo ma'lumot yo'q. To'g'ri JSON kelib, ekran bo'sh qolsa, frontend render
> mantig'ini tekshirish kerak. Bitta kuzatuv uch xil sababni ajratdi.

### Sources va breakpoint

Sources panelida JavaScript bajarilishini ma'lum qatorda to'xtatish uchun
**breakpoint** qo'yiladi. Kod to'xtaganda o'zgaruvchilar qiymati, call stack va
keyingi qadamni ko'rish mumkin. Bu ketma-ket o'nlab `console.log` yozishdan
aniqroq bo'lishi mumkin.

Breakpoint turlari faqat qator bilan cheklanmaydi. Event listener, DOM
o'zgarishi yoki ma'lum `fetch` so'rovi paytida ham bajarilishni to'xtatish
mumkin.

Ayniqsa foydali turi — **shartli breakpoint**. Sikl ming marta aylanayotgan
bo'lsa, har aylanishda to'xtash foyda bermaydi. Qator raqamiga o'ng tugma bosib
shart yozasiz, masalan `id === 42`, va kod faqat o'sha holatda to'xtaydi.

Kod to'xtaganda `Scope` bo'limida o'sha paytdagi barcha o'zgaruvchi qiymati
ko'rinadi, `Call Stack` esa bu funksiya qayerdan chaqirilganini ko'rsatadi.
Ikkinchisi ayniqsa qimmatli: xato funksiya ichida ko'rinsa ham, sabab uni
noto'g'ri qiymat bilan chaqirgan joyda bo'lishi mumkin.

Kod minifikatsiya qilingan bo'lsa (production'da odatda shunday), `source map`
yordam beradi — u brauzerga asl, o'qiladigan kodni ko'rsatish imkonini beradi.

### Application va boshqa panellar

Elements, Console, Network va Sources — eng ko'p ishlatiladigan to'rttasi.
Lekin yana bir nechtasi bilim beradi.

**Application** panelida brauzer saqlagan ma'lumot ko'rinadi: cookie'lar,
`localStorage`, `sessionStorage` va service worker. Login muammosini
tekshirishda birinchi navbatda shu yerga qaraladi — cookie o'rnatilganmi,
`HttpOnly` belgilanganmi, muddati tugamaganmi?

**Lighthouse** sahifani avtomatik tahlil qilib, performance, accessibility va
SEO bo'yicha ball va aniq tavsiyalar beradi. Bu boshlang'ich tekshiruv sifatida
juda foydali, lekin ball ortidan quvmang — tavsiyalarni o'qing va qaysi biri
sizning foydalanuvchingizga haqiqatan ta'sir qilishini baholang.

**Performance** paneli sahifa yuklanishi va ishlashini vaqt bo'yicha yozib
oladi. Sahifa "sekin" ekanini his qilish boshqa, sabab qayerdaligini ko'rish
boshqa. Bu vosita murakkabroq, lekin
[performance](https://learncode.uz/web-dasturlash/cache-cdn-performance) bilan jiddiy ishlaganda
kerak bo'ladi.

> **Console'dagi foydali buyruqlar**
>
> `$0` — Elements panelida hozir tanlangan elementni bildiradi, ya'ni uni
> darhol JavaScript orqali tekshirish mumkin. `$$('div.karta')` esa mos
> elementlarning massivini qaytaradi. Bu ikkisi tez tekshiruv uchun juda qulay.

## Tizimli debugging usuli

1. **Takrorlang.** Xato qaysi aniq qadamda yuz berishini yozing.
2. **Kutilgan natijani belgilang.** Nima bo'lishi kerak edi?
3. **Chegarani toraytiring.** DOM, CSS, JavaScript, HTTP yoki serverdan qaysi biri?
4. **Bitta taxmin tuzing.** Masalan, "API 401 qaytaryapti".
5. **Dalil bilan tekshiring.** Network yoki breakpointdan foydalaning.
6. **Eng kichik tuzatishni qiling.** Bir vaqtning o'zida ko'p narsani almashtirmang.
7. **Qayta test va regressiya.** Muammo ketdimi, boshqa joy buzilmadimi?

![Xatoni takrorlash, chegarani toraytirish, taxminni tekshirish, tuzatish va qayta test qilish debugging jarayoni](https://learncode.uz/images/web-dasturlash/debugging-jarayoni.webp)

*Yaxshi debugging xatoni takrorlaydi, sabab doirasini toraytiradi va har taxminni dalil bilan tekshiradi.*

> **Xato matnini to'liq o'qing**
>
> Faqat "ishlamadi" degan natijaga qaramang. Xato turi, xabar, fayl, qator,
> holat kodi va server javobi ko'pincha keyingi qadamni aytib turadi. Xabarni
> tushunmasangiz, avval undagi o'z loyihangizga tegishli birinchi qatorni toping.

## Keng tarqalgan xatolar va ularning belgisi

Tajriba orttirgani sari ba'zi xatolarni belgisidan tanib olasiz. Quyidagi
jadval eng tez-tez uchraydiganlarini jamlaydi:

| Belgi | Ehtimoliy sabab | Qayerga qarash |
|---|---|---|
| `undefined is not a function` | Nom noto'g'ri yoki obyekt hali yuklanmagan | Console, Sources |
| Ekran bo'sh, xato yo'q | Ma'lumot keldi, render mantig'i xato | Network + breakpoint |
| Tugma bosilmayapti | Hodisa ulanmagan yoki ustida boshqa element bor | Elements, Console |
| Stil qo'llanmayapti | Selektor yutqazgan yoki fayl yuklanmagan | Elements → Styles |
| So'rov ketmayapti | `preventDefault` yo'q yoki JS xatosi to'xtatgan | Console, Network |
| `401` qaytmoqda | Cookie yuborilmayapti yoki muddati tugagan | Application, Network |

Bu jadval o'ylashni almashtirmaydi, lekin qayerdan boshlashni aytadi. Xato
belgisi va tekshiriladigan panel orasidagi bog'lanish vaqt bilan avtomatik
bo'lib qoladi.

## Amaliy mashq

Har kuni ishlatadigan bitta saytni oching va uch vazifani bajaring.

Avval Elements panelida biror sarlavhaning rangini o'zgartiring va natijani
ko'ring. Keyin Network panelida sahifani yangilab, eng uzoq davom etgan
so'rovni toping. Oxirida Console'da `document.querySelectorAll('img').length`
yozib, sahifada nechta rasm borligini aniqlang.

So'ng ataylab xato qiling: Console'da mavjud bo'lmagan funksiyani chaqiring va
xato xabarini diqqat bilan o'qing. Unda fayl, qator va sabab ko'rsatilganini
ko'rasiz — aynan shu ma'lumot haqiqiy debuggingda yo'l ochadi.

## Qisqacha xulosa

- Elements DOM, CSS va box modelni tekshiradi.
- Console JavaScript xatosi va nazorat loglarini ko'rsatadi.
- Network HTTP so'rovi, javob, holat kodi va vaqtni ochib beradi.
- Breakpoint kodni to'xtatib, qiymatlarni qadam-baqadam ko'rishga yordam beradi.
- Debuggingning asosi — muammoni takrorlash, toraytirish va dalil bilan tekshirish.

Keyingi darsda [HTTP amaliy laboratoriya](https://learncode.uz/web-dasturlash/http-amaliy-laboratoriya)
— DevTools bilan real so'rovni qadam-baqadam tahlil qilamiz.