Chrome DevTools II: Network, Application va Lighthouse panellari

Qisqacha: Network paneli sahifa yuklagan har bir faylni ko'rsatadi: status kodi, turi, hajmi va qancha vaqt ketgani. U yerda keshni o'chirib, sekin internetni taqlid qilish mumkin. Application paneli brauzerda saqlangan cookie, localStorage va boshqa ma'lumotlarni ko'rsatadi va tozalaydi. Lighthouse esa sahifani tekshirib, tezlik, qulaylik, zamonaviy amaliyot va SEO bo'yicha 0 dan 100 gacha baho beradi.

Bu darsda

• Network panelida sahifa yuklagan fayllarni ko'rib, status, tur va hajmni o'qiy olasiz.
• Bitta so'rovning Timing bo'limidan DNS, ulanish va server kutish vaqtini topasiz.
• Disable cache va throttling bilan saytni "birinchi marta kirgan, sekin internetli" foydalanuvchi ko'zi bilan ko'rasiz.
• Application panelida cookie va localStorage'ni ko'rib, o'zgartira va tozalay olasiz.
• Lighthouse auditini ishga tushirib, natijasini o'qiy olasiz.

Oldin bilishingiz kerak: Chrome DevTools I: Elements va Console, HTTP sarlavhalari, MIME turlari, cookie va kesh, Brauzer xotirasi va xavfsizlik modeli.

1. Nega bu kerak?

Sizning kompyuteringizda sayt bir zumda ochiladi. Chirchiqdagi foydalanuvchida esa, eski telefon va sekin mobil internet bilan, 8 soniya oq ekran. Nega? Katta rasm aybdormi, server sekinmi yoki CSS fayl chizishni to'xtatyaptimi?

Yoki: foydalanuvchi tizimga kiradi, lekin sahifa yangilanganda yana chiqib ketadi. Cookie saqlanyaptimi?

Bu savollarga taxmin bilan emas, aniq raqamlar bilan javob berish kerak. Oldingi darsda Elements va Console bilan sahifaning "tanasini" ko'rdik. Bugun uchta panel bilan uning "qon aylanishi"ni (tarmoq), "xotirasi"ni (saqlangan ma'lumot) va umumiy "sog'lig'i"ni (Lighthouse) tekshiramiz.

2. Network paneli: har bir so'rov ko'z oldingizda

2.1 Yozib olishni boshlash

Network paneli faqat ochiq turgan paytdagi so'rovlarni yozadi. Shuning uchun tartib shunday:

1. DevTools'ni oching (F12) va Network yorlig'iga o'ting.
2. Sahifani yangilang (Ctrl + R yoki F5).
3. Ro'yxat so'rovlar bilan to'la boshlaydi.

Tepadagi asosiy tugmalar:

• Qizil doira — yozishni to'xtatish yoki davom ettirish (Ctrl + E).
• Taqiq belgisi — ro'yxatni tozalash (Ctrl + L).
• Keep log — boshqa sahifaga o'tganda ham ro'yxat o'chmasin. Eski versiyalarda va ko'p qo'llanmalarda u Preserve log deb atalgan.

2.2 Ustunlar

Har qator — bitta so'rov: HTML sahifa, CSS, JS, rasm, shrift. Standart ustunlar:

Ba'zi qiymatlarni izohlaymiz:

• Status 304 — sarlavhalar darsidagi "fayl o'zgarmagan, keshdagisini ishlating" javobi.
• Size'da (disk cache) yoki (memory cache) — fayl tarmoqdan emas, keshdan olingan. Tarmoq sarfi — nol.
• Qizil qator — so'rov muvaffaqiyatsiz: 404 (topilmadi) yoki umuman javob kelmagan.

Ustunlar sarlavhasiga o'ng tugma bossangiz, yana ustunlar qo'shish mumkin. Ikkitasi foydali: Protocol — so'rov qaysi HTTP versiyasida ketgani (h2, h3), va Waterfall — vaqt chizig'i (pastroqda ko'ramiz).

2.3 Pastki qator — umumiy natija

Panel pastida bitta qator bor:

42 requests | 1.2 MB transferred | 3.4 MB resources |
Finish: 2.8 s | DOMContentLoaded: 640 ms | Load: 2.1 s

• requests — jami so'rovlar soni.
• transferred — tarmoq orqali haqiqatda kelgan hajm (siqilgan).
• resources — fayllarning ochilgandagi to'liq hajmi.
• DOMContentLoaded — HTML to'liq o'qilib, DOM tayyor bo'lgan payt (bloklovchi resurslar darsidagi defer skriptlar shundan oldin bajariladi).
• Load — sahifa va uning barcha rasmlari, CSS va skriptlari yuklangan payt.

2.4 Filtrlar

Tepadagi tugmalar faqat kerakli turdagi so'rovlarni qoldiradi:

All | Fetch/XHR | Doc | CSS | JS | Font | Img | Media |
Manifest | Socket | Wasm | Other

Eng ko'p ishlatiladiganlari: Doc (HTML sahifa), CSS, JS, Img (rasmlar) va Fetch/XHR. Oxirgisi — JavaScript sahifa ochilgandan keyin serverdan ma'lumot so'ragan so'rovlar. Ularni fetch darsida o'zingiz yuborasiz.

Yonidagi Filter maydoniga matn yozsangiz, nomida shu matn bor so'rovlar qoladi.

Tekshirib ko'ring: Size ustunida (disk cache) yozilgan. Bu fayl uchun internetdan necha bayt yuklandi?

2.5 So'rov tafsilotlari va Timing

Istalgan qatorni bossangiz, yon tomonda tafsilotlar ochiladi. Yorliqlar:

• Headers — HTTP xabarining o'zi. General bo'limida Request URL, Request Method, Status Code va serverning IP manzili. Pastda — javob va so'rov sarlavhalari, jumladan Content-Type, Cache-Control, Set-Cookie.
• Preview va Response — serverdan kelgan mazmun.
• Initiator — so'rovni qaysi fayl boshlagan.
• Timing — vaqt qayerga ketgani.
• Cookies — shu so'rov bilan borgan va kelgan cookie'lar.

Timing — eng qiziq yorliq. U To'liq sayohat darsidagi bekatlarni raqamlar bilan ko'rsatadi:

flowchart TD
  Q["Queueing: navbat kutish"] --> S["Stalled: to'xtab turish"]
  S --> D["DNS lookup: IP manzilni topish"]
  D --> C["Initial connection: TCP va SSL"]
  C --> R["Request sent: so'rov yuborildi"]
  R --> W["Waiting for server response"]
  W --> L["Content download: yuklab olish"]

Waiting for server response — DevTools'da ilgari TTFB (Time To First Byte — birinchi baytgacha vaqt) deb atalgan. E'tibor bering: to'liq sayohat darsida curl o'lchagan TTFB DNS va ulanish vaqtini ham o'z ichiga olardi, bu qator esa faqat server kutishini ko'rsatadi. U katta bo'lsa (masalan, 1 soniyadan ortiq), muammo serverda: sekin kod yoki sekin ma'lumotlar bazasi. Content download katta bo'lsa — fayl og'ir yoki internet sekin.

Qayta ulanishda DNS va ulanish bosqichlari umuman bo'lmasligi mumkin: brauzer ochiq ulanishdan qayta foydalanadi.

Maslahat: Queueing uzun bo'lsa, so'rov navbat kutgan. Eski HTTP/1.1'da brauzer bitta serverga bir vaqtda faqat 6 ta ulanish ochadi, qolgan so'rovlar navbatda turadi. HTTP/2 va HTTP/3 da bitta ulanish ichida ko'p so'rov ketadi (HTTP versiyalari darsi).

Waterfall ustuni (qo'shsangiz) har so'rovni vaqt chizig'ida rangli chiziq qilib ko'rsatadi. Chiziqlar zinapoya bo'lib pastga tushadi — "sharshara" nomi shundan. Qaysi fayl kech boshlangani, qaysi biri uzoq cho'zilgani bir qarashda ko'rinadi. Panel tepasidagi Overview chizig'i ham xuddi shu manzarani kichik ko'rinishda beradi.

2.6 Disable cache va throttling

Network tepasida ikki muhim sozlama bor.

Disable cache — belgilansa, DevTools ochiq turganda brauzer keshdan foydalanmaydi. Har bir fayl serverdan qayta yuklanadi. Foydasi ikkita: CSS'ni o'zgartirganingizda yangisi darhol ko'rinadi. Saytni birinchi marta kirgan odam ko'zi bilan ko'rasiz.

Throttling — tezlikni sun'iy cheklash. Ro'yxatda:

No throttling | Fast 4G | Slow 4G | 3G | Offline

Slow 4G yoki 3G ni tanlab, sahifani yangilang. Uyingizdagi tez internetda turib, qishloqdagi sekin mobil internetni his qilasiz. Offline esa internet butunlay uzilganini taqlid qiladi.

Maslahat: DevTools ochiq turganda brauzerning yangilash tugmasiga o'ng tugma bossangiz, maxsus menyu chiqadi: Normal reload, Hard reload va Empty cache and hard reload. Oxirgisi keshni tozalab, sahifani noldan yuklaydi.

3. Application paneli: brauzer xotirasi

3.1 Chap menyu

Brauzer xotirasi darsida ko'rgan omborlarni shu yerda o'z ko'zingiz bilan ko'rasiz. Application panelining chap menyusi:

Application
  Manifest
  Service workers
  Storage
Storage
  Local storage
  Session storage
  Extension storage
  IndexedDB
  Cookies
  Private state tokens
  Cache storage
  Storage buckets
Background services
Frames

Hozir bizga kerakli qismlar: Local storage, Session storage, IndexedDB, Cookies va tepadagi Storage. Manifest va Service workers — telefonga "ilova" sifatida o'rnatiladigan saytlar uchun. Ularni kursda keyinroq o'rganamiz, hozir bilish shart emas.

3.2 Cookies

Cookies ni oching va sayt manzilini tanlang. Jadval ko'rinadi. Muhim ustunlar:

HttpOnly va Secure ustunida ✓ belgisi turgan cookie — shu bayroq bilan o'rnatilgan.

Qiymat ustiga ikki marta bosib, uni o'zgartirish mumkin. Tanlangan cookie'ni Delete bilan o'chirasiz. Tepadagi tugma esa hammasini tozalaydi (Clear all cookies).

3.3 Local storage va Session storage

Bu yerda brauzer xotirasi darsidagi "kalit — qiymat" jadvali ko'rinadi:

Qiymatni ikki marta bosib o'zgartirasiz. Bo'sh qatorga ikki marta bosib, yangi juftlik qo'shasiz. Masalan, mavzu ni oq ga o'zgartirib, sahifani yangilang — sayt shu sozlamani o'qisa, yorug' rejimga o'tadi.

3.4 Clear site data

Chap menyudagi Storage bandida Clear site data tugmasi bor. U shu saytning cookie, localStorage, IndexedDB va keshini bir yo'la tozalaydi. Sayt sizni "birinchi marta kirgan foydalanuvchi" deb ko'radi. Tugma ostida sayt qancha joy egallagani ham yozilgan.

Tekshirib ko'ring: Tizimga kirgan holda Clear site data ni bosib, sahifani yangiladingiz. Nima bo'ladi va nega?

4. Lighthouse: sayt sifati tekshiruvi

4.1 Ishga tushirish

Lighthouse — Google'ning sahifa sifatini tekshiruvchi vositasi. U DevTools ichida alohida panel.

1. Tekshiriladigan sahifani oching, DevTools'da Lighthouse yorlig'iga o'ting.
2. Mode — Navigation (default) ni qoldiring: sahifa ochilishini tekshiradi.
3. Device — Mobile yoki Desktop. Ko'pincha Mobile muhimroq.
4. Categories — qaysi yo'nalishlar tekshirilsin.
5. Analyze page load tugmasini bosing va bir necha soniya kuting.

Maslahat: Lighthouse'ni inkognito oynada ishga tushiring. Oddiy oynada kengaytmalar (reklama to'suvchi va boshqalar) natijani buzishi mumkin.

4.2 To'rt asosiy yo'nalish

Ro'yxatda beshinchi — Agentic browsing ham bor. U sayt sun'iy intellekt agentlari uchun qanchalik qulayligini tekshiradi. Bu yo'nalish hali ishlab chiqilmoqda.

Har yo'nalish 0–100 ball oladi: 90–100 — yashil (yaxshi), 50–89 — to'q sariq (yaxshilash kerak), 0–49 — qizil (yomon).

4.3 Performance hisobotini o'qish

Performance bo'limida uch qism bor:

Metrics — asosiy o'lchovlar:

• First Contentful Paint — birinchi matn yoki rasm qachon ko'rindi.
• Largest Contentful Paint (LCP) — eng katta element (odatda asosiy rasm yoki sarlavha) qachon chizildi.
• Total Blocking Time — asosiy oqim (dvigatellar darsi) og'ir ish bilan qancha vaqt band bo'lgani.
• Cumulative Layout Shift (CLS) — sahifa elementlari yuklanish paytida qancha "sakradi".
• Speed Index — sahifa mazmuni qanchalik tez to'lib bordi.

Insights — aniq tavsiyalar. Ularning ba'zilari sizga tanish:

• Render-blocking requests — chizishni to'xtatuvchi CSS va skriptlar (bloklovchi resurslar darsi).
• Forced reflow — majburiy layout (o'sha dars).
• Optimize DOM size — DOM juda katta (CRP darsi).
• Improve image delivery — rasmlar keragidan og'ir.

Diagnostics — qo'shimcha texnik ma'lumotlar.

Eski qo'llanmalarda tavsiyalar bo'limi Opportunities deb atalgan. Lighthouse'ning yangi versiyalarida uning o'rnini Insights egalladi.

Mobile rejimida Lighthouse sekin internet va 4 barobar sekin protsessorni taqlid qiladi. Shuning uchun Mobile balli Desktop'dan past chiqishi odatiy hol.

Diqqat: Lighthouse har ishga tushganda balli biroz farq qilishi mumkin — kompyuteringiz yuklamasi va tarmoqqa bog'liq. Bitta natijaga emas, 2–3 marta o'tkazilgan o'rtacha natijaga qarang.

5. Boshqa brauzerlarda DevTools

Firefox DevTools ham F12 bilan ochiladi. Vazifalar o'xshash, nomlar boshqacha:

Firefox'ning kuchli tomonlari: CSS Grid va Flexbox joylashuvlarini (CSS qismida o'rganasiz) ekranda juda aniq chizib beradi, shriftlar haqida batafsil Fonts bo'limi bor.

Safari'da DevTools o'rnida Web Inspector. Avval uni yoqish kerak: Safari → Settings → Advanced → Show features for web developers. iPhone'dagi sahifani tekshirish uchun esa telefonni Mac kompyuterga ulash kerak.

6. Ko'p uchraydigan xatolar

6.1 Network bo'sh

DevTools'ni ochdingiz — Network paneli bo'm-bo'sh.

Nega: panel faqat ochiq turgan paytdagi so'rovlarni yozadi. Sahifa undan oldin yuklangan.

Tuzatish: Network ochiq holda sahifani yangilang (Ctrl + R).

6.2 CSS o'zgardi, lekin sahifa eskicha

Nega: brauzer eski CSS'ni keshdan oldi (sarlavhalar darsi).

Tuzatish: Network'da Disable cache ni belgilab, sahifani yangilang. Yoki qattiq yangilash: Ctrl + Shift + R (macOS: Cmd + Shift + R).

6.3 Throttling'ni yoqiq qoldirish

Kecha Offline'ni sinab ko'rdingiz. Bugun sayt ochilmayapti:

No internet
ERR_INTERNET_DISCONNECTED

Tarjimasi: "Internet yo'q. Xato: internet uzilgan".

Nega: DevTools ochiq turgan tabda throttling hali ham Offline holatida.

Tuzatish: throttling'ni No throttling ga qaytaring. Disable cache ham ishni tugatgach o'chirilsin: haqiqiy foydalanuvchilar keshdan foydalanadi.

6.4 404 qatorlarini e'tiborsiz qoldirish

Nega xato: sahifa ochilaveradi, lekin qaysidir rasm yoki shrift topilmagan. Brauzer behuda so'rov yuboradi, dizayn buziladi.

Tuzatish: Network'dagi qizil qatorlarni ko'rib chiqing va fayl yo'lini tuzating (Yo'llar).

6.5 Lighthouse'ni faqat Desktop rejimida o'tkazish

Nega xato: kuchli kompyuterda 100 ball, oddiy telefonda sahifa sekin.

Tuzatish: Mobile rejimini tanlang — u foydalanuvchilarning ko'pchiligi holatiga yaqinroq.

7. Mashqlar

1-mashq (oson): Eng og'ir faylni toping

1. kun.uz yoki istalgan yangiliklar saytini oching.
2. Network panelini oching va sahifani yangilang.
3. Size ustuni sarlavhasini bosib, ro'yxatni hajm bo'yicha tartiblang.
4. Eng og'ir faylning nomi, turi va hajmini yozing. Pastki qatordan jami so'rovlar sonini va transferred hajmini yozing.

2-mashq (o'rta): Timing va cookie tahlili

1. Istalgan saytni oching, Network'da ro'yxatning birinchi qatorini (turi document) bosing.
2. Headers'da Status Code ni toping. Ustunlarga Protocol ni qo'shib, HTTP versiyasini ham aniqlang.
3. Timing'da eng uzun bosqich qaysi?
4. Application → Cookies da shu sayt cookie'larini oching. HttpOnly belgili cookie bormi?

3-mashq (qiyin): Sekin internetda sinov va Lighthouse

1. Istalgan saytni oching. Network'da Disable cache ni belgilang, throttling — No throttling. Sahifani yangilang va pastki qatordagi Load vaqtini yozing.
2. Throttling'ni 3G ga o'zgartiring, yana yangilang. Load vaqtini yozing. Necha barobar sekinlashdi?
3. Throttling'ni No throttling ga, Disable cache'ni o'chiq holatga qaytaring.
4. Lighthouse'da Mobile rejimida Analyze page load ni bosing. Performance ballini, Largest Contentful Paint qiymatini va Insights'dagi bitta tavsiyani yozing. Tavsiya qaysi darsimizga tegishli?

8. Real ishda

• API bilan ishlash. Frontend dasturchi serverdan ma'lumot kelmasa, birinchi navbatda Network → Fetch/XHR'ni ochadi: so'rov ketdimi, status nima, javobda nima bor.
• Xato hisoboti uchun HAR fayl. Network panelidagi yuklab olish tugmasi barcha so'rovlarni HAR faylga saqlaydi (Export HAR (sanitized)…). Uni jamoadoshga yuborib, muammoni birga ko'rish mumkin. "Sanitized" ("tozalangan") varianti cookie va avtorizatsiya sarlavhalarini olib tashlaydi. To'liq variantda esa sizning sessiya cookie'laringiz bo'ladi — uni begona odamga yubormang.
• Tezlik nazorati. Jamoalar Lighthouse'ni muntazam o'tkazadi, ba'zilari har o'zgarishda avtomatik. Lighthouse va Google'ning PageSpeed Insights xizmatini HTML sahifani audit qilish darsida, Performance panelini DevTools: Performance, Memory va Network darsida o'rganamiz.
• Intervyu savoli: "Sayt sekin ochilyapti — qanday tekshirasiz?" Kutilgan javob: Network'da Timing (server yoki fayl hajmi), throttling bilan sinov, Lighthouse tavsiyalari.

Xulosa

• Network paneli ochiq turgandagi har so'rovni ko'rsatadi: status, tur, hajm, vaqt. Pastki qatorda jami hajm, DOMContentLoaded va Load vaqti.
• Timing yorlig'i vaqtni bo'laklaydi: DNS lookup, Initial connection (SSL bilan), Waiting for server response (TTFB), Content download.
• Disable cache — keshsiz yuklash, throttling (Fast 4G, Slow 4G, 3G, Offline) — sekin internet taqlidi. Ishdan keyin ikkalasini qaytaring.
• Application — cookie, localStorage, sessionStorage, IndexedDB; Clear site data hammasini tozalaydi.
• Lighthouse — Performance, Accessibility, Best practices va SEO bo'yicha 0–100 ball; Metrics, Insights va Diagnostics bo'limlari bilan.
• Firefox'da nomlar boshqacha (Inspector, Storage), Safari'da Web Inspector'ni avval yoqish kerak.

Shu dars bilan 02-qism: Internet, veb va brauzer tugadi. Siz tarmoq, IP va port, DNS, HTTP va HTTPS, cookie va keshdan tortib brauzer ichidagi chizish jarayoni va DevTools'gacha bo'lgan yo'lni bosib o'tdingiz. Endi brauzerga manzil yozilganda nima bo'lishini boshidan oxirigacha tushuntira olasiz.

Manbalar

• Chrome DevTools: Network features reference — Network panelining to'liq tavsifi (ingliz tilida).
• Lighthouse overview — Lighthouse haqida rasmiy sahifa.

Keyingi dars: Algoritm nima va yaxshi algoritm qanday bo'ladi — 03-qism "Dasturchi asboblari va fikrlash" boshlanadi. Avval muammoni aniq qadamlarga bo'lishni, keyin VS Code, Node.js va npm bilan ishlashni o'rganamiz.