Rozet referansı

Öğeler panelindeki bu kapsamlı rozet referansıyla çeşitli yer paylaşımlarını açın ve DOM ağacı gezinmesini 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 işaretlerini kaldırın.

Öğeler paneli, seçilen rozetleri DOM ağacındaki uygun öğelerin yanında gösterir. Sonraki bölümlerde her bir rozet açıklanmaktadır.

Tablo

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

Şu önizlemede yer paylaşımını değiştirin:

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

Bu yer paylaşımı; sütunları, satırları, bunların sayılarını ve boşlukları gösterir.

Izgara düzeninde nasıl hata ayıklayacağınızı öğrenmek için CSS ızgarasını inceleme bölümüne bakın.

Alt ızgara

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

Şu önizlemede yer paylaşımını değiştirin:

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ında sütunlar, satırlar, bunların sayıları ve alt ızgaradaki boşluklar gösterilir.

Flex

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

Şu önizlemede yer paylaşımını değiştirin:

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üzenlerde hata ayıklamayı öğrenmek için CSS flexbox'ı inceleme ve hata ayıklama bölümüne bakın.

Reklam

Geliştirici Araçları bazı reklam çerçevelerini algılayıp etiketleyebilir. Bu tür karelerin yanında ad rozeti bulunur.

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

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

ad rozeti tıklanamaz 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 ayarlandıysa bir kaydırma kapsayıcısı veya taşmaya neden olacak kadar içerik olduğunda auto öğesidir. Kaydırma kapsayıcılarında, yapışma noktalarını yapılandıran CSS özellikleri bulunabilir. Bu tür öğelerin yanında, ilgili yer paylaşımlarını açıp kapatan scroll-snap rozet bulunur.

Şu önizlemede yer paylaşımını değiştirin:

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 tutturma noktalarını gösterir.

Kapsayıcı

Bir HTML öğesi, container-type CSS özelliğine sahipse kapsayıcıdır. Bu tür öğelerin yanında, ilgili yer paylaşımlarını açıp kapatan container rozet bulunur.

Şu önizlemede yer paylaşımını değiştirin:

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ği ile 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. <slot>, <template> öğesiyle birlikte ayrı DOM ağaçları oluşturmanıza ve bunları bir arada sunmanıza olanak tanır. Slot içeriği öğelerinin yanında slot rozeti bulunur. Bu rozetler ilgili alanlara bağlantı oluşturur.

Aşağıdaki önizlemede slot rozetini keşfedin:

1. Önizlemede öğeyi inceleyin.
2. DOM ağacında, öğenin yanındaki slot rozetini tıklayarak karşılık gelen yuvayı bulun.
3. reveal rozetini tıklayarak alanın içeriğine geri dönebilirsiniz.

Üst katman

Bu rozet, üst katman kavramını anlamanıza ve görselleştirmenize yardımcı olur. En üst katman, z-index özelliğinden bağımsız olarak, içeriği diğer tüm katmanların üstünde oluşturur. Bir <dialog> öğesini .showModal() yöntemini kullanarak 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 DOM ağacına </html> kapanış etiketinden sonra bir #top-layer kapsayıcısı ekler.

Üst katman öğelerinin yanında top-layer (N) rozeti 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 top-layer (N) rozetini keşfedin:

1. Önizlemede, İletişim kutusunu aç'ı tıklayın.
2. İletişim kutusunu denetleyin.
3. DOM ağacında, <dialog> öğesinin yanındaki top-layer (1) rozetini tıklayın. Öğeler paneli, sizi #top-layer kapsayıcısında </html> kapanış etiketinden sonraki ilgili öğeye götürür.
4. Öğenin veya ::backdrop yanındaki reveal 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ızdaki hataları ayıklamak için bu rozeti tıklayın.

Daha fazla bilgi için Medya paneli ile medya oynatıcılarda hata ayıklama bölümüne bakın.