Rozet referansı

Öğ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öster veya gizle

Rozetleri göstermek veya gizlemek için:

1. Geliştirici Araçları'nı açın.
2. DOM ağacındaki bir öğeyi sağ tıklayın ve Rozet ayarları... seçeneğini belirleyin.
3. Seçilen rozetlerin yanındaki onay kutularını işaretleyin veya kutuların seçimini kaldırın.

Öğeler paneli, seçilen rozetleri DOM ağacındaki uygun öğelerin yanında gösterir. Sonraki bölümlerde tüm rozetler 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:

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, 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. Bir öğe, grid-template-columns, grid-template-rows özelliklerinden biri veya her ikisi de subgrid olarak ayarlanırsa 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çın/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ı; sütunları, satırları, bunların sayılarını ve bir alt ızgaranın 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 görebilirsiniz:

1. Önizlemede öğeyi inceleyin.
2. DOM ağacında, yanında ad rozeti olan 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 özelliği 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ırmalı Tuttur

Kaydırma kapsayıcıları, sabitleme noktalarını yapılandırmaya yarayan CSS özelliklerine sahip olabilir. Bu tür öğelerin yanlarında, ilgili yer paylaşımlarını açıp kapatan scroll-snap 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 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ıdır. Bu tür öğelerin yanında, ilgili yer paylaşımlarını açan container 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 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 bölümüne bakın.

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.
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 özelliğinden bağımsız olarak içeriği diğer tüm katmanların üzerinde 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 N öğenin dizin numarası olan ink_selectiontop-layer (N) rozetleri bulunur. 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:

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, kapatıcı </html> etiketinden sonra sizi #top-layer kapsayıcısındaki ilgili öğeye yönlendirir.
4. Öğenin veya ::backdrop öğesinin yanındaki ink_selectionreveal rozetini tıklayarak <dialog> öğesine geri dönün.

Medya

media rozeti varsayılan olarak devre dışıdır. Etkinleştirildiğinde <audio> ve <video> öğelerinin yanında görünür. Medya panelini açmak ve 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 bölümüne bakın.