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ı...'nı seçin.
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 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 ı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ı inceleyin.

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ı

HTML öğesi, display CSS özelliği flex veya inline-flex olarak ayarlanmışsa bir esnek 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çı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 rozetleri 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ıklanabilir değildir ancak reklam çerçevelerini kırmızıyla vurgulamak için Oluşturma sekmesini kullanabilirsiniz.

Kaydırmayla tutturma

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. 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çı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 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. <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 keşfedin:

1. Önizlemede öğeyi inceleyin.
2. DOM ağacında, ilgili alanı bulmak için öğenin yanındaki ink_selectionslot rozetini tıklayın. .
3. ink_selectionreveal 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'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.

Ü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 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 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 ink_selectiontop-layer (1) rozetini tıklayın. Öğeler paneli, sizi kapanış </html> etiketinden sonra #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 başlıklı makaleyi inceleyin.