Rozet referansı

Sofia Emelianova

Öğeler panelindeki bu kapsamlı rozet referansıyla çeşitli yer paylaşımlarını açıp kapatın ve DOM ağacında gezinmeyi hızlandırın.

Rozetleri gösterme veya gizleme

Belirli rozetleri göstermek veya gizlemek için:

1. DevTools'u açın.
2. DOM ağacındaki bir öğeyi sağ tıklayın ve Rozet ayarları alt menüsünde bir veya daha fazla rozeti işaretleyin.

Öğeler panelinde, seçilen rozetler DOM ağacındaki ilgili öğelerin yanında gösterilir. Aşağıdaki bölümlerde her rozet açıklanmaktadır.

Izgara

display CSS özelliği grid veya inline-grid olarak ayarlanmış bir HTML öğesi ızgara kapsayıcısı olur. Bu tür öğelerin yanında, ilgili yer paylaşımlarını açan grid rozetleri bulunur.

Aşağıdaki önizlemede yer paylaşımını açıp kapatın:

kalemine göz atın.

1. Önizlemede öğeyi inceleyin.
2. DOM ağacında, öğenin yanındaki grid rozetini tıklayın ve yer paylaşımını gözlemleyin.

Yer paylaşımında sütunlar, satırlar, bunların numaraları ve boşluklar gösterilir.

Tablo düzeninde nasıl hata ayıklama yapacağınızı öğrenmek için CSS tablosunu inceleme başlıklı makaleyi inceleyin.

Alt ızgara

Alt ızgara, üst ızgarasıyla aynı kanalları kullanan iç içe yerleştirilmiş bir ızgaradır. grid-template-columns, grid-template-rows özelliklerinden biri veya ikisi de subgrid olarak ayarlanmışsa öğe bir alt ızgara kapsayıcısıdır. Bu tür öğelerin yanında, ilgili yer paylaşımlarını açan subgrid rozetleri bulunur.

Aşağıdaki önizlemede yer paylaşımını açıp kapatın:

.

1. Önizlemede öğeyi inceleyin.
2. DOM ağacında, öğenin yanındaki subgrid rozetini tıklayın ve yer paylaşımını gözlemleyin.

Yer paylaşımı, bir alt ızgaranın sütunlarını, satırlarını, numaralarını ve boşluklarını gösterir.

Yaratıcılığınızı

display CSS özelliği flex veya inline-flex olarak ayarlanmış bir HTML öğesi flex kapsayıcıdır. Bu tür öğelerin yanında, ilgili yer paylaşımlarını açan flex rozetleri bulunur.

Aşağıdaki önizlemede yer paylaşımını açıp kapatın:

.

1. Önizlemede öğeyi inceleyin.
2. DOM ağacında, öğenin yanındaki flex rozetini tıklayın ve yer paylaşımını gözlemleyin.

Yer paylaşımı, alt öğe konumlarını gösterir.

Esnek düzenleri nasıl hata ayıklayacağınızı öğrenmek için CSS esnek kutusunu inceleme ve hata ayıklama başlıklı makaleyi inceleyin.

Reklam

DevTools, bazı reklam çerçevelerini algılayıp etiketleyebilir. Bu tür çerçevelerin yanında ad rozetleri bulunur.

Aşağıdaki önizlemede bir reklamı keşfedin:

1. Önizlemede öğeyi inceleyin.
2. DOM ağacında, yanında ad rozeti bulunan bir öğe bulun.

ad rozeti tıklanabilir değildir ancak reklam çerçevelerini kırmızıyla vurgulamak için Oluşturma sekmesini kullanabilirsiniz.

Kaydırma

Bir HTML öğesi, overflow CSS mülkü scroll olarak ayarlanmışsa veya taşmaya neden olacak kadar içerik varsa kaydırma kapsayıcısı olur.auto Bu tür öğelerin yanında scroll rozetleri bulunur.

Kaydırmayla tutturma

Kaydırma kapsayıcıları, sabitleme noktalarını yapılandırmayla ilgili CSS özelliklerine sahip olabilir. Bu tür öğelerin yanında, ilgili yer paylaşımlarını açan scroll-snap rozetleri bulunur.

Aşağıdaki önizlemede yer paylaşımını açıp kapatın:

göz atın.

1. Önizlemede öğeyi inceleyin.
2. DOM ağacında, öğenin yanındaki scroll-snap rozetini tıklayın.
3. Öğeyi sağa kaydırmayı deneyin ve yer paylaşımını gözlemleyin.

Yer paylaşımı, öğe konumlarını ve sabitleme noktalarını gösterir.

Kapsayıcı

container-type CSS özelliğine sahip bir HTML öğesi kapsayıcı olur. Bu tür öğelerin yanında, ilgili yer paylaşımlarını açan container rozetleri bulunur.

Not: CSS kapsayıcı sorguları deneysel bir özelliktir. DevTools'ta desteğini etkinleştirmek için chrome://flags altında Enable CSS Container Queries denemesini Enabled olarak ayarlayın. Aksi takdirde, sonraki önizleme çalışmaz.

Aşağıdaki önizlemede yer paylaşımını açıp kapatın:

.

1. Önizlemede öğeyi inceleyin.
2. DOM ağacında, öğenin yanındaki container rozetini tıklayın.
3. Sağ alt köşesini sürükleyerek öğeyi yeniden boyutlandırmayı deneyin ve düzen değişikliğini ve yer paylaşımını gözlemleyin.

Yer paylaşımı, alt öğe konumlarını gösterir.

Kapsayıcı sorgularında nasıl hata ayıklayacağınızı öğrenmek için CSS kapsayıcı sorgularını inceleme ve hata ayıklama başlıklı makaleyi inceleyin.

Alan

<slot> HTML öğesi, kendi içeriğinizle doldurabileceğiniz bir yer tutucudur. <template> öğesiyle birlikte <slot>, ayrı DOM ağaçları oluşturmanıza ve bunları birlikte sunmanıza olanak tanır. Slot içerik öğelerinin yanında, ilgili slotlara bağlantı görevi gören ink_selectionslot rozetleri bulunur.

Aşağıdaki önizlemede ink_selectionslot rozetini görebilirsiniz:

1. Önizlemede öğeyi inceleyin.
2. İlgili yuvayı bulmak için DOM ağacında öğenin yanındaki ink_selectionslot rozetini tıklayın.
   Önemli nokta: ink_selectionslot rozetinin, sizi geri götüren eşlenen bir ink_selectionreveal rozeti vardır.
3. ink_selectionreveal rozetini tıklayarak yuvanın içeriğine geri dönün.

Üst katman

Bu rozet, üst katman kavramını anlamanıza ve görselleştirmenize yardımcı olur. Üst katman, z-index'ten bağımsız olarak diğer tüm katmanların üstünde içerik oluşturur. .showModal() yöntemini kullanarak bir <dialog> öğesini açtığınızda tarayıcı bu öğeyi en üst katmana yerleştirir.

Öğeler paneli, üst katman öğelerini görselleştirmenize yardımcı olmak için kapatıcı </html> etiketinden sonra DOM ağacına bir #top-layer kapsayıcısı ekler.

Üst katman öğelerinin yanında ink_selectiontop-layer (N) rozetleri bulunur. Burada N, öğenin dizin numarasıdır. Rozetler, #top-layer kapsayıcısındaki ilgili öğelerin bağlantılarıdır.

Aşağıdaki önizlemede ink_selectiontop-layer (N) rozetini görebilirsiniz:

adlı kaleme göz atın.

1. Önizlemede İletişim kutusunu aç'ı tıklayın.
2. İletişim kutusunu inceleyin.
3. DOM ağacında, <dialog> öğesinin yanındaki ink_selectiontop-layer (1) rozetini tıklayın. Öğeler paneli, sizi kapatıcı </html> etiketinden sonra #top-layer kapsayıcısındaki ilgili öğeye yönlendirir.
   Önemli nokta: ink_selectiontop-layer (N) rozetinin, sizi geri götüren eşlenen bir ink_selectionreveal rozeti vardır.
4. Öğenin veya ::backdrop öğesinin yanındaki ink_selectionreveal rozetini tıklayarak <dialog> öğesine geri dönün.

Medya

media rozeti varsayılan olarak kapalıdır. Etkinleştirildiğinde <audio> ve <video> öğelerinin yanında görünür. Medya panelini açıp medyanızda hata ayıklama yapmak için bu rozeti tıklayın.

Daha fazla bilgi için Medya paneliyle medya oynatıcılarda hata ayıklama başlıklı makaleyi inceleyin.