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

Paul Bakaus
Paul Bakaus

Her zaman açık olan yeni ve basitleştirilmiş Cihaz Modu ile Geliştirici Araçları'nın nasıl önce mobil ortama geçtiğini öğrenin. Seçicilerinize hızla renk eklemek ve yakında Geliştirici Araçları'ndaki yenilikleri öğrenmek için renk düğmelerini kullanın.

İçerik üretmenin geleceğine kısa bir bakış

Size, Geliştirici Araçları ile çalışmanın bugün ve gelecekte nasıl görüneceğini gösterdiğim Chrome Geliştirici Zirvesi'nden geliyoruz. Genelde bu özette hâlâ deneme aşamasında olan veya üzerinde yoğun bir çalışma yapılan özelliklerden bahsetmemekle birlikte bu kez bir istisna yapıyorum. Konuşmanın tamamını izlemeye vaktiniz yoksa ana fikrinizi buradan okuyabilirsiniz:

Cihaz Modu sürüm 2

Cihaz Modu'nun bu yeni ve dikkat çekici iterasyonu üzerinde çalışmaya devam ediyoruz ancak herkese bu özelliği deneme fırsatı vermek istediğimiz için bu özelliği bugün Canary'de etkinleştirdik. Bu değişikliklerle birlikte, Geliştirici Araçları'nı, mobil geliştirmenin varsayılan, masaüstü geliştirmenin ise "eklenti" olduğu, mobil cihazlara öncelik veren bir geleceğe taşıyoruz. Çalışmayı tamamladığımızda, önümüzdeki birkaç hafta boyunca daha fazla iterasyona sahip olmayı bekleyebilirsiniz.

Güçlü animasyon denetimi

Devam eden çalışma olan Animasyon Denetimi, hareket eden her şeyde neler olup bittiğini eksiksiz ve ayrıntılı olarak gösterir. Tek seferde bir öğede geçiş göstermek yerine, gördüğünüz her şeye odaklanabilmeniz için karmaşık animasyonları gruplandıran buluşsal yöntemler ekledik. 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 (hızlı bakış)

Tam kullanıma hazır değil ancak yeni Düzen Modu çok yakında kullanıma sunulacak. Tam olarak geliştirildiğini görmek için sabırsızlanıyorum. Düzen Modu, sayfadaki herhangi bir öğe için Geliştirici Araçları'na WYSIWYG düzenleme özellikleri ekler. Şu ana kadar yükseklik, genişlik, dolgular ve kenar boşlukları bağlam içinde düzenlenebilir. Denemeniz için hazır olmamız biraz zaman alacak. Sizi gelişmelerden haberdar edeceğiz.

Güncellenmiş Zaman Çizelgesi paneliyle performans profili çıkarma

Yeni RAIL performans modelini kullanıma sunmanın daha büyük bir çabası kapsamında, Zaman Çizelgesi panelinde daha küçük ve daha büyük yüzlerce değişiklik yapıldı. Bu değişiklikler birlikte performans profili oluşturma hikayesini önemli ölçüde dönüştürüp iyileştiriyor. Böylece her bir değişikliği ayrı ayrı göstermek yerine, kendi Paul Ireland bize bir sitenin (bu örnekte Hotel Tonight'ın mobil sitesi) sahnede olan bir sitenin performansında doğru hata ayıklamanın nasıl yapılacağını gösterdi. Yeni duyurulan özellikler arasında yük ve performans filmleri şeridi, dahil edilen ağ şelalesi, ağaç görünümü özeti ve performans maliyetlerini alan ve dosyaya göre görüntüleme olanağı yer alır.

Tüm öğelere ön ve arka plan renklerini kolayca ekleyin

Öğenize arka plan rengi veya renk özelliği eklemek istediğinizde renk seçiciyi açmanız yeterli olmazdı. Bunun yerine, çoğu kullanıcı her seferinde "background: red;" gibi bir şey yazar, böylece renk seçici simgesi görünür, ardından istediğiniz gerçek rengi seçersiniz.

Bu süreci basitleştirebileceğimizi düşündük. İmleci bir seçicinin sağ alt köşesine getirdiğinizde görünen, tek bir tıklamayla renk eklemenize ve seçiciyi açmanıza olanak tanıyan iki şık düğme ekledik:

En iyiler

  • Genel medya türlerini göstererek Stil panelinde eski mülklerin büyük bir kısmını boşa harcadık. Olağan dışı bir durum değilse artık bu öğeleri seçicilerinizden önce gizleyeceğiz.
  • Artık Stil panelinde bir CSS seçicinin üzerine uzun süre gelerek sayfada kaç öğeye uygulandığını görebilirsiniz.
  • Baskıdan vazgeçmediniz mi? Sayfanızın yazdırıldığında nasıl görüneceğini anlamak için yazılı medya emülasyonu hâlâ kullanılıyor. Sayfanızı Oluşturma Ayarları'na taşıdık.
  • İncelenecek bir öğe seçilirken artık ilgili DOM alt ağacını otomatik olarak genişletip kapatıyoruz. Açıklanması zor, görmek inanmaktır.

Her zaman olduğu gibi, Twitter üzerinden veya aşağıdaki yorumlardan düşüncelerinizi bizimle paylaşabilir ve hataları crbug.com/new adresinden iletebilirsiniz.

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