DevTools Özeti (CDS Sürümü): Geleceğe Bakış ve RAIL Profili Oluşturma

Paul Bakaus
Paul Bakaus

Geliştirici Araçları'nın her zaman açık olan yeni ve kullanımı kolay Cihaz Modu ile mobil cihazlara öncelik vermek için neler yaptığını öğrenin. Seçicilerinize hızlıca renk eklemek ve yakında Geliştirici Araçları'nda kullanıma sunulacak özellikleri öğrenmek için renk düğmelerini kullanın.

İçerik yazarlığının geleceğine kısa bir bakış

Chrome Geliştirici Zirvesi'nden geri dönüyoruz. Bu etkinlikte, Geliştirici Araçları ile çalışmanın bugün ve gelecekte ne anlama geldiğini açıklamıştım. Bu özette genellikle henüz deneysel özellikler ya da yoğun ilerleme çabalarından bahsedmiyorum ancak bu sefer istisna yapıyorum. Konuşmanın tamamını izlemek için zamanınız yoksa genel hatlarıyla şöyledir:

Cihaz Modu sürüm 2

Cihaz Modu'nun bu yeni ve dikkat çekici iterasyonu üzerinde çalışmaya devam ediyoruz. Ancak herkese denemek üzere bir fırsat sunmak istediğimiz için bu özelliği bugün Canary'nizde etkinleştirdik. Bu değişikliklerle birlikte Geliştirici Araçları'nı, mobil geliştirmenin varsayılan, masaüstü geliştirme ise "eklenti" olduğu, mobil öncelikli bir geleceğe taşıyoruz. Çalışmamız tamamlandığında, önümüzdeki birkaç hafta boyunca daha fazla iterasyon ve kapsamlı bir blog yayınından bahsedeceğiz.

Güçlü animasyon denetimi

Devam etmekte olan Animasyon Denetimi, hareket eden bir şeyde neler olup bittiğine dair kapsamlı ve ayrıntılı bir resim sunar. Her seferinde bir öğe için geçişi göstermek yerine, karmaşık animasyonları gruplandıran buluşsal yöntemler ekledik. Böylece gördüğünüz her şeye odaklanabilirsiniz. Videoya göz atın. Tam olarak kullanıma sunulduğunda daha büyük ve bağımsız bir blog yayını sunacağız.

Düzen Modu (kısa tanıtım)

Şu anda kullanıma tam anlamıyla hazır değiliz. Ancak tam olarak kullanıma sunulması için sabırsızlandığım yeni Düzen Modu, gelecek vadeden yeni bir özellik. Düzen Modu, sayfadaki herhangi bir öğe için Geliştirici Araçları'na WYSIWYG düzenleme özelliklerini ekler. Şu ana kadar yükseklik, genişlik, dolgu ve kenar boşlukları bağlam içinde düzenlenebilir. Denemeye hazır olmamız biraz daha uzun sürecek ancak gelişmelerden sizi haberdar edeceğiz.

Güncellenen Zaman Çizelgesi paneliyle performans profili oluşturma

Yeni RAIL performans modelini kullanıma sunmak için yaptığımız büyük çabanın bir parçası olarak, Zaman Çizelgesi panelinde yüzlerce küçük ve daha büyük değişiklik yapıldı. Bu değişiklikler bir araya geldiğinde, performans profili oluşturma hikayesini büyük ölçüde dönüştürüp iyileştirdi. Bu nedenle kendi Paul Ireland, her değişikliği ayrı ayrı göstermek yerine bize bir sitenin (bu örnekte, sahnede yayında olan Hotel Tonight mobil sitesinin) performansında doğru hata ayıklamanın nasıl yapılacağını gösterdi. Yeni duyurulan özellikler arasında yükleme ve performansa yönelik film şeritleri, dahil edilen ağ şelalesi, ağaç görünümü özeti ve alan ve dosyaya göre performans maliyetlerini görüntüleme olanağı yer alıyor.

Dilediğiniz öğeye ön ve arka plan renklerini kolayca ekleyin

Öğenize bir arka plan rengi veya renk özelliği eklemek istediğinizde renk seçiciyi açamazsınız. Bunun yerine, çoğunuz renk seçici simgesinin görünmesi için her seferinde "arka plan: kırmızı;" gibi bir şey yazar, ardından asıl rengi istediğiniz rengi seçersiniz.

Bu işlemi basitleştirebileceğimizi düşündük. Bir seçicinin sağ alt köşesine gelindiğinde görünen iki şık düğme ekledik. Bu düğme, tek tıklamayla renk eklemenize ve seçiciyi açmanıza olanak tanır:

En iyiler

  • Genel medya türlerini göstererek Stil panelinde önceki birçok alanı boşa harcadık. Olağan dışı bir durum söz konusu değilse artık bunları seçicilerinizden önce gizliyoruz!
  • Artık Stil panelindeki CSS seçicinin üzerine gelerek sayfada kaç öğe için geçerli olduğunu görebilirsiniz.
  • Baskı hizmetini kullanmayı henüz bırakmadınız mı? Basılı medya emülasyonu, yazdırıldığında sayfanızın nasıl görüneceğini öğrenmek için hâlâ kullanılıyor. Sayfayı Oluşturma Ayarları'na taşıdık.
  • Denetlenecek bir öğe seçerken, artık ilgili DOM alt ağacını otomatik olarak genişletip kapatıyoruz. Açıklaması zor. Görmek inanmaktır.

Her zaman olduğu gibi, düşüncelerinizi Twitter veya aşağıdaki yorumlar üzerinden bize iletin ve hataları crbug.com/new adresine gönderin.

Gelecek ay görüşmek üzere!
Paul Bakaus ve Geliştirici Araçları Ekibi