Oluşturma sekmesi seçeneklerine ilişkin bu referansı kullanarak sayfanıza uygulayabileceğiniz yararlı efektleri keşfedin.
Reklam çerçevelerini vurgula
Çerçevelerin reklam olarak etiketlenip etiketlenmediğini kontrol etmek için:
- Bu demoda Oluşturma sekmesini açın ve Reklam çerçevelerini vurgula'yı işaretleyin.
- Kırmızıyla vurgulanan reklam çerçevesine dikkat edin.
Odaklanılmış sayfa emülasyonu
Odağı, sayfadan Geliştirici Araçları'na değiştirirseniz bazı yer paylaşımı öğeleri odak tarafından tetiklendiğinde otomatik olarak gizlenir. Örneğin açılır listeler, menüler veya tarih seçiciler. check_box Odaklanmış sayfa emülasyonu seçeneği, böyle bir öğede odaktaymış gibi hata ayıklamanızı sağlar.
Odaklanılmış bir sayfa emülasyonu için:
- Hata ayıklama yapılacak öğeyi içeren bir sayfayı (ör. arama çubuğu olan YouTube web sitesi) açın.
Sayfada Oluşturma sekmesini açın, ardından Odaklanmış sayfa emülasyonu seçeneğini işaretleyip temizleyin.
Yerel yazı tiplerini devre dışı bırak
@font-face
kurallarında local()
kaynaklarını devre dışı bırakarak yerel yazı tipi alternatiflerinin beklendiği gibi çalışıp çalışmadığını kontrol edin.
Geliştiriciler ve tasarımcılar genellikle geliştirme sırasında aynı yazı tipinin iki farklı kopyasını kullanırlar:
- Tasarım araçlarınız için yerel bir yazı tipi ve
- Kodunuz için bir web yazı tipi
Yerel yazı tiplerini devre dışı bırakmak aşağıdakileri kolaylaştırır:
- Web yazı tiplerinin yükleme performansında ve optimizasyonunda hata ayıklayıp bunları ölçün
- CSS
@font-face
kurallarınızın doğruluğunu onaylayın - Web yazı tipleri ve yerel sürümleri arasındaki farkları öğrenin
@font-face
kurallarında eksik local()
kaynakları emülasyonu:
Yukarıdaki cümleyi inceleyin, Öğeler > Hesaplanan'ı açın, ekranı aşağı kaydırın ve Oluşturulan Yazı Tipleri bölümünde Chrome'un yerel dosyalarda Courier New'u bulduğunu keşfedin.
Oluşturma sekmesini açın, Yerel yazı tiplerini devre dışı bırak'ı işaretleyin ve sayfayı yeniden yükleyin.
Web'de bulunan Roboto'daki cümleye dikkat edin.
Otomatik koyu modu etkinleştir
Sitenizi uygulamamış olsanız bile koyu modda nasıl görünebileceğine bakın.
Chrome 96, Android'de Otomatik Koyu Tema için Kaynak Denemesini kullanıma sundu. Bu özellik sayesinde, kullanıcı işletim sisteminde koyu temaları etkinleştirdiyse tarayıcı, açık temalı sitelere otomatik olarak oluşturulan koyu temayı uygular.
Otomatik koyu modu etkinleştirmek için:
- Bu sayfada, Oluşturma sekmesini açın ve Otomatik koyu modu etkinleştir'i işaretleyin.
- Bu sayfayı koyu modda izleyin.
Görme bozuklukları emülasyonu
Herkes web'e erişebilmeli ve web'in keyfini çıkarabilmelidir. Google, bunu gerçeğe dönüştürmeyi ilke edinmiştir.
Chrome Geliştirici Araçları ile görme bozukluğu olan kullanıcıların sitenizi nasıl gördüğünü öğrenerek sitenizi onlar için daha iyi hale getirebilirsiniz. Daha fazla bilgi için Renk görme bozukluklarını simüle etme konusuna bakın.
Görme bozuklukları emülasyonu için:
- Oluşturma sekmesini açın.
Görme bozukluklarını emüle et bölümünde, açılır listeden aşağıdakilerden birini seçin:
- Emülasyon yok.
- Bulanık görüş.
- Azaltılmış kontrast.
- Kırmızı körlüğü. Düşük kırmızı algısı; yeşil, kırmızı ve sarı tonlarının karışımıdır.
- Yeşil körlüğü. Düşük yeşil algısı; yeşil, kırmızı ve sarı tonlarının karışımıdır.
- Tritanopia (mavi yok). Mavi algısının düşük olması; yeşil ve mavinin karıştırılmasıdır.
- Akromatopsi (renksiz). Kısmi veya tamamen renk görme kaybıdır.
AVIF ve WebP resim biçimlerini devre dışı bırak
Bu emülasyonlar, geliştiricilerin tarayıcı değiştirmek zorunda kalmadan farklı resim yükleme senaryolarını test etmelerini kolaylaştırır.
Yeni tarayıcılarda bir resmi AVIF ve WebP biçimlerinde, eski tarayıcılarda ise yedek bir PNG resmi sunmak için aşağıdaki HTML koduna sahip olduğunuzu varsayalım.
<picture>
<source srcset="test.avif" type="image/avif">
<source srcset="test.webp" type="image/webp">
<img src="test.png" alt="A test image">
</picture>
Bir sayfadaki tüm AVIF resimlerini (veya benzer şekilde WebP resimlerini) devre dışı bırakmak için:
- Oluşturma sekmesini açın, AVIF resim biçimini devre dışı bırak'ı işaretleyin.
img src
simgesinin üzerine gelin. Geçerli resim src (currentSrc
) artık yedek WebP resmidir.
Sayfayı yeniden yükleyin ve fareyle
Benzer şekilde, WebP resimlerini devre dışı bırakabilirsiniz.