Chrome DevTools: Elements Panel (Elementlar paneli)

Chrome DevTools: Elements Panel (Elementlar paneli)

Elements paneli — bu Chrome DevTools’ning asosiy qismi bo’lib, sahifadagi HTML va CSS’ni real vaqtda ko’rish va tahrirlash imkonini beradi. Ushbu panel yordamida DOM tuzilmasini, CSS qoidalarini, layout (joylashuv), event listeners va accessibility atributlarini chuqur tahlil qilish mumkin.

Umumiy ko’rinish

Elements paneli DOM’ni (HTML daraxtini) ko’rsatadi va har bir elementni tanlab, unga tegishli CSS, event, va boshqa xususiyatlarni ko’rish va tahrirlash imkonini beradi.

Asosiy imkoniyatlar:

• DOM tree: HTML tuzilmasini daraxt ko’rinishida ko’rish va har bir tugunni tanlash. Hujjat
• Styles: Tanlangan elementga taalluqli barcha CSS qoidalarini ko’rish va tahrirlash. Har bir style sheetdan kelgan qoidalar, bekor qilingan (overridden), noto’g’ri yoki ishlamaydigan CSS’lar ham ko’rsatiladi.
• Computed: Elementga realda qo’llanayotgan barcha CSS xossalarining yakuniy qiymatlari. Hujjat
• Layout: Grid va Flexbox overlay’larini ko’rish va tahrirlash imkoniyati. Hujjat
• Event listeners: Elementga biriktirilgan barcha event listener’larni ko’rish, ularning manbasini topish va passiv/bloklovchi filtrlarni qo’llash. Hujjat
• DOM breakpoints: DOM o’zgarishlari uchun breakpointlar qo’shish va ularni boshqarish. Hujjat
• Properties: Tanlangan DOM tugunining barcha xususiyatlarini (o’z va meros bo’lgan) ko’rish. Hujjat
• Accessibility: ARIA label’lari va accessibility xususiyatlarini ko’rish, accessibility tree’ni tahlil qilish (eksperimental). Hujjat

Elements panelini ochish

DevTools’ni ochganingizda, odatda Elements paneli avtomatik ochiladi. Shuningdek, sahifadagi istalgan elementni “Inspect” (tekshirish) orqali tanlasangiz, Elements paneli ochiladi.

Elements panelini qo’lda ochish uchun:

1. DevTools’ni oching.

2. Command menyusini oching:

   • macOS: Command+Shift+P
   • Windows, Linux, ChromeOS: Control+Shift+P

Foydali qismlar va tavsiyalar

• Styles: CSS’ni to’g’ridan-to’g’ri tahrirlash, yangi deklaratsiya qo’shish, klasslarni qo’llash va Box model bilan ishlash.
• Computed: Elementga realda qanday CSS xossalari ta’sir qilayotganini ko’rish.
• Layout: Grid va Flexbox overlay’larini ko’rish va tahrirlash.
• Event listeners: Barcha event listener’larni ko’rish va ularning manbasini aniqlash.
• DOM breakpoints: DOM o’zgarishlarini kuzatish va debugging uchun qulay.
• Accessibility: ARIA label’lar va accessibility tree’ni tahlil qilish.

Xulosa

Elements paneli — front-end dasturchilar va veb-inspektorlar uchun eng muhim vositalardan biri. U yordamida sahifa tuzilmasini, CSS va interaktivlikni chuqur tahlil qilish va debugging qilish mumkin.