- HTML elementlarini tez tahrir qiling
- Barcha bolalar elementlarini ochish
- Inspektorni ko'chirish
- DOM elementlarini qidirish
- Paletkalar
- Ko'p kursor
- Base64 tasvirini kodlash
- Pseudo-sinfni almashtirish
- Ustunni tanlash
- CURL uchun so'rovni nusxalash
- Ekran klaviaturasi
- Butun sahifaning ekrani
- Sensorli qurilmalarning taqlid qilishlari
- Foydali xususiyatlar
Nomidan kelib chiqqanidek, Chrome DevTools yoki veb-inspektor veb-ishlab chiquvchilar va u bilan bog'liq odamlar uchun mo'ljallangan vositadir. Veb-inspektor quyidagilarni bajarishga imkon beradi:
- Displeyning to'g'riligini tekshiring.
- Skriptlarning bajarilishini JavaScript-da kuzatib boring.
- Tarmoq faoliyatini ko'rish.
Ushbu maqolani yozishda men foydalanar edim Kanareykalar - yangi xususiyatlar sinab ko'rilgan Chrome brauzerining versiyasi, keyin Chrome-ning barqaror versiyasiga tushadi.
Tekshirgichni boshlash uchun sahifadagi istalgan joyni o'ng tugmasini bosib, "View item code" ni tanlab, Ctrl + Shift + C ni bosishingiz mumkin.
HTML elementlarini tez tahrir qiling
Eng oddiy: tartibga solish elementlaridan boshlaylik.
Qanday tekshirish mumkin:
- Elementlar yorlig'ini tanlang.
- Panel ichidagi har qanday HTML elementni tanlang.
- Yorliqni ikki marta bosish va o'zgartirish, masalan, teg nomi.
Tahrirlash tugallangandan so'ng, yakunlovchi yorliq avtomatik ravishda yangilanadi.
Barcha bolalar elementlarini ochish
Qanday tekshirish mumkin:
- Elementlar paneliga o'ting.
- Elementni tanlang va Alt ushlab turganda elementning chap tomonidagi o'qni bosing.
Inspektorni ko'chirish
Inspektor panelini brauzer oynasining pastki qismiga va o'ng tomoniga bosish mumkin. Masalan, keng ekran monitorlarida ishlaydigan panelning o'ng tomonidagi joylashuvi qulay. Bundan tashqari, inspektor paneli alohida oynaga joylashtirilishi va masalan, boshqa monitorga o'tkazilishi mumkin.
Qanday tekshirish mumkin:
- Ctrl + Shift + D - Manzilni almashtirish
DOM elementlarini qidirish
Ehtimol, bu ko'pchilik uchun kashfiyot bo'ladi, lekin "Elements" tabida siz DOM tomonidan qo'ng'iroq qilishingiz mumkin.
Qanday tekshirish mumkin:
- Ctrl + F tugmalarini bosing va taklif qilingan qidiruv so'rovini kiriting.
Paletkalar
Paletdan rangni tanlang Chrome brauzerining so'nggi versiyalarida rang tanlovi ba'zi o'zgarishlarga uchradi: rangni tanlash uchun ikki palet qo'shildi.
Ko'p kursor
Kursorni siljiting va Ctrl ni ushlab turib, kursorni qo'shish uchun kerakli maydonni bosing. Ushbu amalni Ctrl + U. yordamida bekor qilishingiz mumkin. Shaxsan men hech qachon foydalandim.
Base64 tasvirini kodlash
Qanday tekshirish mumkin:
- Tarmoq paneliga o'ting.
- Rasmni tanlang
- Tasvir ustida o'ng tugmasini bosing va ""
Pseudo-sinfni almashtirish
Pseudo-sinflar elementlarning holati va ularning nisbiy pozitsiyalarini aks ettiradi.
Qanday tekshirish mumkin:
- Element panelidagi elementni o'ng birini tanlab, kuchlar elementlari ro'yxatida pseudo-sinfni tanlang.
- Elementlar panelining o'ng tomonida pseudo-sinfni tanlashingiz mumkin.
Ustunni tanlash
Qanday tekshirish mumkin:
- "Manbalar" paneliga o'ting.
- Har qanday faylni tanlang.
- Alt ushlab turgan matnni tanlang.
Ustun tanlash HTML elementlari Element panelida tahrir qilinganida ham ishlaydi.
CURL uchun so'rovni nusxalash
Tarmoq yorlig'idagi har qanday so'rovni nusxalash va kalladan foydalanib bajarish uchun terminalga joylashtirilishi mumkin.
Ekran klaviaturasi
Agar Nexus 5X profili tanlansa, ekrandagi klaviatura yoqilganida sayt qanday ko'rinishini ko'rishingiz mumkin.
Chrome DevTools: Ekran klaviaturasi
Butun sahifaning ekrani
Butun sahifa tasvirini olish juda oddiy. Faqat kerak ...
- Ochiq inspektor.
- Konsolga o'ting.
- Ctrl + Shift + R tugmalarini bosing
- "Ekran tasvirini"
- "To'liq o'lchamdagi ekran tasvirini yozib olish" -ni tanlang
Butun sahifaning ekrani Sensorli qurilmalarning taqlid qilishlari
Siz shuningdek ba'zi sensorlar simüle qilishingiz mumkin:
- Sensorli ekran
- Joylashtirish koordinatalari
- Accelerometer
Qanday qilib sinash kerak:
- Elementlar panelini tanlang.
- "Esc" tugmasini bosing va "Emulation> Sensors" -ni tanlang.
Foydali xususiyatlar
kalitlari va qiymatlari
Kalitlar va funktsiyalar funktsiyalari ob'ektning tugma yoki qiymatlarini konsolga chiqarishga imkon beradi. 
Tugmalar va ob'ektlar qiymatlarini alohida ko'rsatish