Rozet referansı

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

HTML öğesi, display CSS özelliği grid veya inline-grid olarak ayarlanmışsa bir ızgara kapsayıcısıdır. Bu tür öğelerin yanlarında, ilgili yer paylaşımlarını açıp kapatan grid 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 grid rozetini tıklayın ve yer paylaşımını inceleyin.

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

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, kendi ü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 tablo kapsayıcısıdır. Bu tür öğelerin yanlarında, ilgili yer paylaşımlarını açıp kapatan 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ı inceleyin.

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

Flex

HTML öğesi, display CSS özelliği flex veya inline-flex olarak ayarlanmışsa bir esnek kapsayıcıdır. Bu tür öğelerin yanlarında, ilgili yer paylaşımlarını açıp kapatan flex 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 flex rozetini tıklayın ve yer paylaşımını inceleyin.

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 çerçevelerin yanında ad rozeti vardır.

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ıklanamaz ancak Oluşturma sekmesini kullanarak kırmızı renkli reklam çerçevelerini vurgulayın.

Kaydırmalı Tuttur

HTML öğesi, overflow CSS özelliği scroll olarak ayarlanırsa veya taşmaya neden olacak kadar içerik olduğunda auto olarak ayarlanmış bir kaydırma kapsayıcısıdır. Kaydırma kapsayıcıları, tutturma noktalarını yapılandıran 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çın/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 tutturma noktalarını gösterir.

Kapsayıcı

HTML öğesi, container-type CSS özelliğine sahipse bir kapsayıcı olur. Bu tür öğelerin yanlarında, ilgili yer paylaşımlarını açıp kapatan container 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 container rozetini tıklayın.
3. Öğenin sağ alt köşesini sürükleyerek yeniden boyutlandırmayı deneyin ve düzen değişikliği ile yer paylaşımına bakın.

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. <slot>, <template> öğesiyle birlikte ayrı DOM ağaçları oluşturmanıza ve bunları birlikte sunmanıza olanak tanır. Alan içeriği öğelerinin yanında, ilgili alanlara bağlantı işlevi gören slot rozetleri bulunur.

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

1. Önizlemede öğeyi inceleyin.
2. DOM ağacında, ilgili alanı bulmak için öğenin yanındaki slot rozetini tıklayın.
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. Üst katman, z-index özelliğinden bağımsız olarak içeriği diğer tüm katmanların üzerinde oluşturur. Bir <dialog> öğesini .showModal() yöntemini kullanarak açtığınızda tarayıcı bunu üst katmana yerleştirir.

Üst katman öğelerini görselleştirmenize yardımcı olmak için Öğeler paneli, </html> kapanış etiketinden sonra DOM ağacına 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 inceleyin.
3. DOM ağacında, <dialog> öğesinin yanındaki top-layer (1) rozetini tıklayın. Öğeler paneli, </html> kapanış etiketinden sonra #top-layer kapsayıcısında ilgili öğeye gitmenizi sağlar.
4. Öğenin veya ait ::backdrop öğesinin 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çıp medyanızdaki hataları ayıklamak 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.