Performans panelinde Web Vitals bilgileri pop-up'ı
Performansın iyi mi, iyileştirme gerektiriyor mu yoksa kötü mü olduğunu anlamak için Performans panelindeki bir Web Verileri işaretçisinin üzerine gelin.
Chromium sorunu: 1147872
CSS scroll-snap özelliğini görselleştirme
Artık CSS scroll-snap hizalamasını incelemek için Öğeler panelindeki scroll-snap rozetini açıp kapatabilirsiniz.
Sayfanızdaki bir HTML öğesine (ör. bu demo sayfası) scroll-snap-type uygulandığında, Öğeler panelinde öğenin yanında bir scroll-snap rozeti görürsünüz. Sayfada kaydırma-yakalama yer paylaşımının gösterilmesini açmak veya kapatmak için rozeti tıklayın.
Yukarıdaki örnekte, tutturma kenarlarında nokta işaretleri görebilirsiniz. Kaydırma bağlantı noktasının düz çizgili kenarlığı, tutturma öğelerinin ise kesikli çizgili kenarlığı vardır. Kaydırma dolgusu yeşil renkle, kaydırma kenar boşluğu ise turuncu renkle doldurulur.
Chromium sorunu: 862450
Yeni bellek denetleyicisi
JavaScript'teki bir ArrayBuffer'yi ve Wasm belleğini incelemek için yeni Bellek inceleyici'yi kullanın.
Bu demo sayfasını açın. Kaynaklar panelinde demo-js.js dosyasını açın ve 18. satırda bir kesme noktası ayarlayın.
Sayfayı yenileyin. Sağdaki hata ayıklayıcı bölmesinde Kapsam bölümünü genişletin. Arabellek değerinin yanındaki yeni simgeye dikkat edin. Bellek Denetleyicisi'ni göstermek için bu simgeyi tıklayın.
Bu yeni bellek inceleme aracıyla JavaScript'i inceleme ArrayBuffer ve WebAssembly.Memory hakkında daha fazla bilgi edinmek için dokümanlara göz atın.
Chromium sorunu: 1166577
Nesne panelinde yeni rozet ayarları bölmesi
Artık Öğeler panelindeki Rozet ayarları aracılığıyla rozetleri seçerek etkinleştirebilir veya devre dışı bırakabilirsiniz. Bu özelliği kullanarak web sayfalarını incelerken önemli rozetleri özelleştirebilir ve bunlara odaklanabilirsiniz.
Öğeler panelinde herhangi bir öğeyi sağ tıklayın. Bağlam menüsünden Badge settings'i (Rozet ayarları) seçin. Rozet ayarları bölmesi üstte görünür. Rozetleri göstermek veya gizlemek için herhangi bir onay kutusunu etkinleştirin veya devre dışı bırakın.
Chromium sorunu: 1066772
En boy oranı bilgileriyle geliştirilmiş resim önizlemesi
Öğeler panelindeki resim önizlemelerinde artık resimle ilgili daha fazla bilgi (oluşturulan boyut, oluşturulan en boy oranı, doğal boyut, doğal en boy oranı ve dosya boyutu) gösteriliyor.
Bu bilgiler, resimlerinizi daha iyi anlamanıza ve gerekirse optimizasyon uygulamanıza yardımcı olur.
Resim en boy oranı bilgileri, resmi önizlemek için tıkladığınızda Ağ panelinde de kullanılabilir.
Chromium sorunları: 1149832, 1170656
Content-Encoding yapılandırma seçeneklerinin bulunduğu yeni ağ koşulları düğmesi
Ağ paneline yeni bir ağ koşulları düğmesi eklendi. Ağ koşulları sekmesini açmak için bu düğmeyi tıklayın.
Ağ koşulları sekmesine yeni bir Kabul edilen içerik kodlamaları seçeneği eklenir. Sunucu yanıtlarının gzip, brotli veya gelecekteki diğer Content-Encoding'leri desteklemeyen tarayıcılarda doğru şekilde kodlanıp kodlanmadığını test etmek için yapılandırın.
Chromium sorunu: 1162042
Stiller bölmesinde yapılan geliştirmeler
Stiller bölmesinde hesaplanan değeri görüntülemek için yeni kısayol
Artık Stiller bölmesinde bir CSS özelliğini sağ tıklayıp Hesaplanmış değeri görüntüle'yi seçerek hesaplanmış CSS değerini görüntüleyebilirsiniz.
Chromium sorunu: 1076198
accent-color anahtar kelimesi için destek
Stiller bölmesinin otomatik tamamlama kullanıcı arayüzü artık accent-color CSS anahtar sözcüğünü algılıyor.Bu sayede web geliştiriciler, öğe tarafından oluşturulan kullanıcı arayüzü kontrolleri (ör. onay kutusu, radyo düğmesi) için vurgu rengini belirleyebiliyor.
accent-color CSS özelliği şu anda deneyseldir. Test etmek için lütfen chrome://flags/#enable-experimental-web-platform-features seçeneğini etkinleştirin.
Chromium sorunu: 1092093
Sorun türlerini renkler ve simgelerle kategorize etme
Sorunlar sekmesinde artık sorunlar, daha iyi bir önem derecesi göstergesi için sayfa hataları, yaklaşan zarar veren değişiklikler ve olası iyileştirmeler olarak sınıflandırılıyor. Console'daki sorun sayısı düğmesini tıklayarak Sorunlar sekmesini açabilirsiniz.
- Sayfa hataları (kırmızı). Doğru CORS başlıklarının ayarlanmaması gibi sayfa işlevselliğini doğrudan etkileyen sorunlar
- Yakında yapılacak zarar veren değişiklikler (sarı). Web platformunda yakında yapılacak ve uyumsuz bir değişiklikle ilgili bilgi veren, sayfa işlevlerinin kaybına neden olabilecek sorunlar (ör. yakında yapılacak CORS RFC 1918 değişiklikleri hakkında uyarı).
- Olası iyileştirmeler (mavi). Sayfada iyileştirme yapılabilecek noktalar var ancak bunlar şu anda sayfanın temel işlevlerini (ör.erişilebilirlik sorunları) etkilemiyor.
Chromium sorunu: 1183241
Güven jetonlarını silme
Artık Uygulama panelinin altındaki Güven jetonları bölmesinde bulunan yeni silme düğmesiyle güven jetonlarını silebilirsiniz.
Trust Token, pasif izleme olmadan sahtekarlıkla mücadele etmeye ve botları gerçek insanlardan ayırt etmeye yardımcı olan yeni bir API'dir. Trust Tokens'ı kullanmaya nasıl başlayacağınızı öğrenin.
Chromium sorunu: 1126824
Çerçeve ayrıntıları görünümünde engellenen özelliklerle ilgili ayrıntıları görüntüleme
Artık çerçeve ayrıntıları görünümündeki İzin politikası bölümünde engellenen özelliklerle ilgili ayrıntıları görüntüleyebilirsiniz.
Bu demo sayfasını açın. Uygulama paneline gidin ve bir çerçeve seçin. İzin Politikası bölümünde Devre Dışı Bırakılan Özellikler özelliğine gidin. Özelliğin neden engellendiğiyle ilgili ayrıntıları görmek için Ayrıntıları göster'i tıklayın. Özelliğin engellenmesine neden olan iFrame'e veya ağ isteğine gitmek için her politikanın yanındaki simgeyi tıklayın.
İzin politikası, bir web sitesine kendi çerçevesinde veya yerleştirdiği iFrame'lerde tarayıcı özelliklerinin kullanımına izin verme ya da bunları engelleme olanağı tanıyan bir web platformu API'sidir.
Chromium sorunu: 1158827
Denemeler ayarındaki denemeleri filtreleme
Yeni deneme filtresiyle denemeleri daha hızlı bulun. Örneğin, Ayarlar > Denemeler'e gidin. Filtre metin kutusuna "kontrast" yazarak "kontrast" kelimesini içeren tüm denemeleri filtreleyin.
Önbellek depolama bölmesinde yeni Vary Header sütunu
Vary HTTP yanıt başlığını görüntülemek için Önbellek Depolama bölmesindeki yeni Vary Header sütununu kullanın.
Chromium sorunu: 1186049