JavaScript Full-stack/2-qism. Internet, veb va brauzer19/20-dars13 daqiqa

Mundarija (30)

Chrome DevTools I: Elements va Console panellari

Qisqacha: DevTools — Chrome ichiga o'rnatilgan dasturchi asboblari. U F12 bilan ochiladi. Elements panelida istalgan sahifaning HTML tuzilmasi (DOM) va CSS uslublarini ko'rib, jonli o'zgartirish mumkin. Console panelida sahifadagi xatolar chiqadi va JavaScript'ni to'g'ridan-to'g'ri yozib sinash mumkin. O'zgarishlar faqat sizning brauzeringizda va sahifa yangilanguncha turadi.

Bu darsda

DevTools'ni uch xil usulda ocha olasiz.
Elements panelida sahifa elementini topib, matni va atributini o'zgartira olasiz.
Styles va Computed oynalarini o'qiy olasiz, ustidan chizilgan qoida nimani bildirishini tushunasiz.
Box model chizmasidan element o'lchamini aniqlaysiz.
Console'dagi xatoni o'qiy olasiz va uni kalkulyator sifatida ishlata olasiz.
Device mode bilan sahifani telefon ekranida ko'rasiz.

Oldin bilishingiz kerak: HTML'dan pikselgacha: Critical Rendering Path, Brauzer tuzilishi va dvigatellar.

1. Nega bu kerak?

Tasavvur qiling: Malika saytidagi tugma rangini tanlayapti. Kodda rangni o'zgartiradi, faylni saqlaydi, brauzerni yangilaydi, qaraydi — yoqmadi. Yana o'zgartiradi, saqlaydi, yangilaydi... Bitta rang uchun o'n marta.

DevTools bu aylanishni qisqartiradi. Rangni to'g'ridan-to'g'ri brauzerda o'zgartirib, darhol ko'rasiz. Yoqqanini topgach, uni bir marta kodga yozasiz.

DevTools — brauzerning rentgen apparati. U istalgan saytning "ichini" ko'rsatadi: HTML tuzilmasi, CSS uslublari, tarmoq so'rovlari, xatolar. Dasturchi uni har kuni, deyarli har soatda ochadi. Bu darsda eng ko'p ishlatiladigan ikki panelni o'rganamiz.

2. DevTools'ni ochish

2.1 Uch usul

Usul	Windows / Linux	macOS
DevTools'ni ochish/yopish	`F12` yoki `Ctrl + Shift + I`	`Cmd + Option + I`
Darhol Console	`Ctrl + Shift + J`	`Cmd + Option + J`
Element tanlash rejimi	`Ctrl + Shift + C`	`Cmd + Option + C`

Uchinchi usul eng qulayi: sahifadagi istalgan matn, rasm yoki tugma ustida sichqonchaning o'ng tugmasini bosing va Inspect ("Tekshirish") ni tanlang. DevTools ochiladi va aynan o'sha element belgilangan holda turadi.

Menyu orqali ham bo'ladi: ⋮ → More tools → Developer tools.

2.2 Panellar

DevTools oynasining tepasida panellar nomi turadi:

text

Elements | Console | Sources | Network | Performance | Memory |
Application | Security | Lighthouse | Recorder

Oyna tor bo'lsa, ba'zilari » tugmasi ortiga yashirinadi. Hozir bizga ikkitasi kerak: Elements va Console. Network, Application va Lighthouse'ni keyingi darsda ko'ramiz, qolganlarini kursda keyinroq.

Maslahat: DevTools sahifaning pastida yoki yonida ochilishi mumkin. Joyini o'zgartirish uchun DevTools ichidagi ⋮ menyusida Dock side belgilarini bosing. Telefon o'lchamida ishlaganda yon tomonda turgani qulay.

3. Elements paneli

3.1 Jonli DOM daraxti

Elements panelining chap qismida sahifaning HTML tuzilmasi daraxt ko'rinishida turadi:

text

<!DOCTYPE html>
<html lang="en">
  ▶ <head>…</head>
  ▼ <body>
      <h1>Menyu</h1>
      <p>Osh — 45 000 so'm</p>
    </body>
</html>

▶ belgisini bossangiz, teg ichi ochiladi (▼). Qator ustiga sichqonchani olib borsangiz, sahifadagi mos element rangli ramka bilan ajraladi.

Muhim nuqta: bu yerda ko'rayotganingiz — HTML faylning o'zi emas, DOM. CRP darsida ko'rgandik: brauzer HTML'dagi xatolarni tuzatadi, JavaScript esa DOM'ni o'zgartiradi. Shuning uchun Elements'dagi daraxt fayldan farq qilishi mumkin.

3.2 Jonli tahrirlash

Elements'da sahifani qo'l bilan o'zgartira olasiz:

Matn — matn ustiga ikki marta bosing, yangisini yozing, Enter.
Atribut — masalan, href yoki class ustiga ikki marta bosing va qiymatini o'zgartiring.
Butun teg — o'ng tugma → Edit as HTML. Tegni to'liq matn sifatida tahrirlaysiz.
O'chirish — elementni tanlab, Delete ni bosing.
Yashirish — elementni tanlab, H harfini bosing. Yana bossangiz — qaytadi.
Bekor qilish — Ctrl + Z.

Diqqat: Bu o'zgarishlar faqat sizning brauzeringizda va faqat sahifa yangilanguncha turadi. F5 ni bossangiz, sahifa asl holiga qaytadi. Serverdagi haqiqiy fayllarga hech narsa bo'lmaydi.

Bundan muhim xulosa kelib chiqadi: istalgan sahifadagi narxni, balansni yoki xabarni DevTools bilan o'zgartirib, skrinshot olish mumkin. Shuning uchun "mana, saytda shunday yozilgan" degan skrinshot — isbot emas.

Tekshirib ko'ring: Jasur internet-do'kondagi telefon narxini Elements'da 1 000 so'mga o'zgartirdi. U telefonni shu narxda sotib ola oladimi?

Javob

Yo'q. U faqat o'z brauzeridagi DOM'ni o'zgartirdi. Narx serverda saqlanadi. Buyurtma berilganda server o'zining haqiqiy narxini hisoblaydi. Sahifani yangilasa, eski narx qaytadi.

4. Styles va Computed

Elements panelining o'ng qismida elementning CSS uslublari turadi. Ikki asosiy yorliq bor: Styles va Computed.

4.1 Styles — qaysi qoidalar ta'sir qilyapti

Styles yorlig'i tanlangan elementga ta'sir qilayotgan barcha CSS qoidalarini ko'rsatadi:

text

element.style {
}
h1 {                                 style.css:12
  color: green;
  font-size: 32px;
}
h1 {                         user agent stylesheet
  display: block;
  font-size: 2em;
  font-weight: bold;
}

element.style — shu yerga yozgan qoidangiz faqat shu elementga qo'llanadi. Tajriba uchun eng qulay joy.
style.css:12 — qoida qaysi faylning nechanchi qatorida yozilganini ko'rsatadi. Ustiga bossangiz, fayl ochiladi.
user agent stylesheet — brauzerning o'z standart uslublari. Masalan, h1 hech qanday CSS'siz ham katta va qalin chiqadi — shu sababli.

Nima qilish mumkin:

Qiymat ustiga bosib, yangisini yozish: green → red.
Qoida yonidagi katakchani olib tashlab, uni vaqtincha o'chirish.
Rang yonidagi kichik kvadratni bosib, palitradan rang tanlash.
:hov tugmasi — elementni "sichqoncha ustida turgan" holatga majburan o'tkazish. Tugma ustiga kelganda nima o'zgarishini qo'lda ushlab turmasdan ko'rasiz.

4.2 Ustidan chizilgan qoida

Ba'zan qoida ustidan chiziq tortilgan bo'ladi: ~~font-size: 2em;~~. Bu — "brauzer bu qoidani qo'llamayapti" degani. Ikki sabab bo'lishi mumkin:

Boshqa qoida yutgan. Yuqoridagi font-size: 32px kuchliroq, shuning uchun pastdagi 2em bekor bo'ldi. Styles ro'yxatida yuqoridagi qoida odatda ustun turadi.
Qoida xato yozilgan. Masalan, colr: red. Brauzer tushunmagan qatorni o'tkazib yuboradi, yonida sariq ogohlantirish belgisi chiqadi.

Qaysi qoida nega yutishini CSS qismida o'rganamiz. Hozir chizilgan qatorni ko'rsangiz, qo'rqmang: bu DevTools sizga yordam beryapti.

4.3 Computed — yakuniy qiymatlar

Computed ("hisoblangan") yorlig'i barcha qoidalar, meros va hisob-kitobdan keyin qolgan yakuniy qiymatlarni ko'rsatadi. Masalan, font-size: 2em qanday bo'lishidan qat'i nazar, bu yerda aniq 32px yoziladi.

"Nega shriftim bunday?" degan savolga eng tez javob — Computed'da. Qiymat yonidagi strelkani bossangiz, uni aynan qaysi qoida berganini ko'rsatadi.

4.4 Box model

Styles ro'yxatining eng pastida (va Computed yorlig'ining tepasida) rangli to'rtburchaklar chizmasi turadi — box model. U element qanday "qatlamlardan" iborat ekanini ko'rsatadi:

text

┌─ margin (tashqi masofa) ───────────┐
│ ┌─ border (chegara) ─────────────┐ │
│ │ ┌─ padding (ichki masofa) ───┐ │ │
│ │ │   content (mazmun)         │ │ │
│ │ │   480 × 127                │ │ │
│ │ └────────────────────────────┘ │ │
│ └────────────────────────────────┘ │
└────────────────────────────────────┘

Content (ko'k) — matn yoki rasmning o'zi.
Padding (yashil) — mazmun bilan chegara orasidagi ichki bo'shliq.
Border (sariq) — chegara chizig'i.
Margin (to'q sariq) — chegaradan tashqaridagi bo'shliq, qo'shni elementgacha.

O'xshatish: rasm ramkada. Rasm — content, rasm atrofidagi oq qog'oz — padding, ramka — border, ramka bilan devordagi qo'shni rasm orasidagi masofa — margin.

Chizmadagi har qatlam ustiga sichqonchani olib borsangiz, sahifada o'sha qism shu rangda bo'yaladi. Element nega kengayib ketganini yoki nega pastga tushib qolganini tushunishning eng tez yo'li. Box model'ni CSS qismidagi box model darsida batafsil o'rganamiz.

Tekshirib ko'ring: Styles'da qoidaning ustidan chizilgan. Buning ikki sababini ayting.

Javob

Birinchisi — shu xususiyat uchun boshqa, kuchliroq qoida yutgan. Ikkinchisi — qoida xato yozilgan va brauzer uni tushunmagan (yonida sariq belgi chiqadi).

5. Console paneli

5.1 Xatolar va ogohlantirishlar

Console — sahifaning "xabarlar daftari". Saytda xato yuz bersa, u shu yerda qizil qator bo'lib chiqadi:

text

✖ Uncaught TypeError: Cannot read properties of null
  (reading 'addEventListener')                     app.js:25

Qizil — xato (error): nimadir ishlamay qoldi.
Sariq — ogohlantirish (warning): hozircha ishlayapti, lekin e'tibor bering.
O'ngdagi app.js:25 — xato qaysi faylning nechanchi qatorida chiqqani. Ustiga bossangiz, DevTools o'sha qatorni ochib beradi.

Bu xatoni siz tanisiz — oldingi darslardan birida skript hali yo'q tugmani qidirganda chiqqandi. Xato xabarini o'qish san'atini Xato xabarini o'qish san'ati darsida mashq qilamiz.

Console tepasida Default levels menyusi bor. U orqali faqat xatolarni yoki faqat ogohlantirishlarni ko'rsatish mumkin. Console'ni tozalash — Ctrl + L.

5.2 Console — kalkulyator va sinov maydoni

Console'ning pastki qatoriga (> belgisi yoniga) yozib, Enter ni bossangiz, brauzer buni darhol hisoblaydi. JavaScript'ni 08-qismda o'rganamiz, lekin oddiy hisob hozirdan ishlaydi:

text

> 45000 * 3
< 135000
> 45000 * 3 + 5000 * 2
< 145000

* — ko'paytirish, + — qo'shish. Birinchi qator: 3 ta osh narxi. Ikkinchi qator: 3 ta osh va 2 ta choy.

Birinchi JavaScript dasturingizni ham shu yerda yozasiz — Birinchi dastur: konsol darsida.

Maslahat: Elements'da biror elementni tanlasangiz, Console'da u $0 nomi bilan chaqiriladi. $0 deb yozib Enter ni bossangiz, tanlangan element chiqadi. Bu kelajakda JavaScript bilan element ustida tajriba qilishda juda qulay.

5.3 Begona kodni joylashtirmang

Birinchi marta Console'ga matn joylashtirsangiz (Ctrl + V), Chrome to'xtatadi va ogohlantiradi:

text

Warning: Don't paste code into the DevTools Console that you
don't understand or haven't reviewed yourself. This could allow
attackers to steal your identity or take control of your
computer. Type "allow pasting" below and press Enter to allow
pasting.

Tarjimasi: "Tushunmagan yoki o'zingiz tekshirmagan kodni Console'ga joylashtirmang. Bu hujumchilarga shaxsingizni o'g'irlash yoki kompyuteringizni boshqarish imkonini berishi mumkin. Joylashtirishga ruxsat berish uchun pastga allow pasting deb yozing va Enter bosing".

Bu ogohlantirish bejiz emas. Firibgarlar "bu kodni Console'ga qo'ysangiz, sovg'a olasiz" deb yozishadi. Kod esa sizning akkauntingiz nomidan ish qiladi — axir u siz kirgan sahifa ichida bajariladi. Ba'zi yirik saytlar, masalan facebook.com, Console'da katta qizil "Stop!" yozuvini chiqarib, shu haqda ogohlantiradi.

Qoida: Console'ga faqat o'zingiz tushungan kodni yozing.

6. Device mode: telefon ekranida ko'rish

Foydalanuvchilarning ko'pchiligi saytga telefondan kiradi. DevTools telefon ekranini taqlid qila oladi.

DevTools ochiq holda Ctrl + Shift + M ni bosing (macOS: Cmd + Shift + M). Yoki DevTools'ning chap yuqorisidagi telefon-planshet belgisini bosing — Toggle device toolbar.
Sahifa ustida qurilma paneli paydo bo'ladi. Ro'yxatda Dimensions: Responsive yozuvi turadi.
Ro'yxatdan qurilma tanlang: masalan, iPhone SE yoki Samsung Galaxy A55.
Aylantirish belgisi bilan ekranni yotqizib ko'ring.

Responsive rejimida esa sahifa chetini sichqoncha bilan tortib, istalgan kenglikni sinaysiz.

Diqqat: Device mode — taqlid. U ekran o'lchamini va sensorli bosishni taqlid qiladi, lekin sahifani baribir Chrome'ning Blink dvigateli chizadi. iPhone'dagi Safari (WebKit) boshqacha ko'rsatishi mumkin (dvigatellar darsi). Muhim saytni haqiqiy telefonda ham tekshiring.

7. Ko'p uchraydigan xatolar

7.1 DevTools'dagi o'zgarish saqlanadi deb o'ylash

Yarim soat CSS tanlab, F5 bosildi — hammasi yo'qoldi.

Nega: o'zgarishlar faqat brauzer xotirasidagi DOM va CSSOM'da edi, faylda emas.

Tuzatish: DevTools — tajriba maydoni. Yoqqan qiymatni darhol o'z faylingizga ko'chirib yozing.

7.2 Noto'g'ri elementni tanlash

Rangni o'zgartiryapsiz, lekin sahifada hech narsa o'zgarmayapti.

Nega: ko'pincha tashqi o'rovchi tegni tanlab qo'yasiz, matn esa uning ichidagi boshqa tegda.

Tuzatish: Ctrl + Shift + C bilan element tanlash rejimini yoqib, aynan kerakli matn ustiga bosing. Elements pastidagi yo'l qatori (html body div h1) qaysi element tanlanganini ko'rsatadi.

7.3 Qizil xatolardan vahimaga tushish

Console'ni ochsangiz, begona saytda o'nlab qizil qator.

Nega: ko'p saytlarda mayda xatolar bor — reklama bloklangan, kengaytma aralashgan. Bu sizning aybingiz emas.

Tuzatish: o'z saytingizdagi xatoga e'tibor bering. Xato qatoridagi fayl nomi va qator raqamidan boshlang.

7.4 Device mode'ni haqiqiy telefon deb bilish

Nega xato: dvigatel baribir Blink, iPhone'dagi WebKit farqlarini ko'rsatmaydi.

Tuzatish: yakuniy tekshiruvni haqiqiy qurilmada qiling.

8. Mashqlar

1-mashq (oson): Sarlavhani qayta bo'yang

Istalgan yangiliklar saytini oching.
Birinchi sarlavha ustida o'ng tugma → Inspect.
Styles'da element.style bloki ichiga bosing va color: green yozing.
Box model chizmasidan sarlavhaning mazmun o'lchamini (kenglik × balandlik) yozib oling.
F5 bosing va nima bo'lganini kuzating.

Yechim

3-qadamdan keyin sarlavha darhol yashil bo'ladi. element.style ga yozilgan qoida faqat shu elementga qo'llanadi.

4-qadamda box model markazida 640 × 38 kabi ikki son turadi — piksellarda kenglik va balandlik. Aniq sonlar sayt va oynangiz kengligiga bog'liq.

5-qadamdan keyin sarlavha asl rangiga qaytadi: o'zgarish faqat brauzer xotirasida edi.

2-mashq (o'rta): "Soxta skrinshot" tajribasi

Istalgan internet-do'kon sahifasini oching.
Bitta mahsulot narxini Elements'da ikki marta bosib, 1 000 so'm ga o'zgartiring.
Mahsulot rasmini tanlab, H tugmasi bilan yashiring, keyin qayta ko'rsating.
O'ylang: nima uchun bu tajriba "skrinshotga ishonmang" degan qoidaning isboti?

Yechim

2-qadamda sahifada narx haqiqatan 1 000 so'm bo'lib ko'rinadi. 3-qadamda rasm yo'qolib, qayta paydo bo'ladi — H elementni yashiradi va qaytaradi.

DOM'ni har kim o'z brauzerida o'zgartira oladi. Skrinshotda sahifa haqiqiydek ko'rinadi, lekin u faqat bitta brauzerdagi holat. Haqiqiy narx serverda. Shuning uchun "saytda shunday yozilgan edi" degan skrinshot o'zi isbot bo'la olmaydi.

3-mashq (qiyin): Telefon ko'rinishi va Console hisobi

ilmhamroh.uz ni oching va Device mode'ni yoqing (Ctrl + Shift + M).
iPhone SE ni tanlang, keyin Samsung Galaxy A55 ni. Menyu va sarlavhalar qanday o'zgarganini yozing.
Console'ni oching. Qizil xato bormi? Bo'lsa, qaysi faylda?
Console'da hisoblang: choyxonada 4 ta osh (45 000 so'm) va 3 ta choy (5 000 so'm), xizmat haqi 10%. Ishora: 10% qo'shish — 1.1 ga ko'paytirish; qavs ( ) avval hisoblanadi.

Yechim

1–2. Tor ekranda sahifa bir ustunga tushadi, menyu ko'pincha bitta belgi (uch chiziq) ortiga yashirinadi. Aniq ko'rinish sayt dizayniga bog'liq.

Toza saytda Console bo'sh yoki faqat ogohlantirishlar bo'ladi. Xato bo'lsa, qatorning o'ng tomonida fayl nomi va qator raqami turadi.
Console'ga shunday yoziladi:

text

> (4 * 45000 + 3 * 5000) * 1.1
< 214500.00000000003

Javob — 214 500 so'm. Oxiridagi 00000000003 qo'rqitmasin: bu kompyuterda kasr sonlar qanday saqlanishi bilan bog'liq (Sonlar ichkarida darsini eslang). Pul hisobida natija yaxlitlanadi.

9. Real ishda

Har kunlik vosita. Frontend dasturchi CSS'ni ko'pincha avval DevTools'da tanlaydi, keyin faylga yozadi. CSS bilan DevTools'da ishlashning ko'p usullarini DevTools'da CSS bilan ishlash darsida o'rganamiz.
Xato hisoboti. Jamoada "sayt ishlamayapti" o'rniga Console'dagi xato matni va skrinshoti yuboriladi — bu muammoni topishni bir necha barobar tezlashtiradi.
Debugging. Sources panelida kodni qadamma-qadam bajarish — DevTools bilan debug qilish darsining mavzusi.
Intervyu savoli: "Sahifada element noto'g'ri joyda turibdi — qanday tekshirasiz?" Kutilgan javob: Inspect → Styles va Computed → box model.

Xulosa

DevTools F12 (macOS'da Cmd + Option + I) yoki o'ng tugma → Inspect bilan ochiladi.
Elements — jonli DOM daraxti: matn, atribut va teglarni o'zgartirish mumkin, lekin faqat sahifa yangilanguncha.
Styles — elementga ta'sir qilayotgan qoidalar, Computed — yakuniy qiymatlar, box model — content, padding, border va margin.
Console — xatolar (qizil), ogohlantirishlar (sariq) va jonli hisob-kitob joyi. Begona kodni u yerga joylashtirmang.
Device mode (Ctrl + Shift + M) telefon ekranini taqlid qiladi, lekin haqiqiy telefonni almashtirmaydi.

Manbalar

Chrome DevTools: Open Chrome DevTools — ochish usullari (ingliz tilida).
Chrome DevTools: CSS features reference — Styles va Computed imkoniyatlari.

Keyingi dars: Chrome DevTools II: Network, Application va Lighthouse — sahifa qaysi fayllarni yuklayotganini, brauzerda nima saqlanganini ko'ramiz va sayt sifatini avtomatik tekshiramiz.

Ulashish:Telegram'da

Izohlar (0)

Izoh yozish uchun kiring.

Hozircha izoh yo'q. Birinchi bo'ling!