DevTools'un her zaman açık olan yeni ve basitleştirilmiş bir cihaz moduyla mobil cihazlara nasıl öncelik verdiğini öğrenin. Seçicilerinize hızlıca renk eklemek için renk düğmelerini kullanın ve yakında DevTools'a eklenecek yeni özellikleri öğrenin.
İçerik üretmenin geleceğine bakış
DevTools ile çalışmanın şu anda ve gelecekte nasıl olacağını gösterdiğim Chrome Dev Summit'ten yeni döndük. Genellikle bu özetlerde henüz deneme aşamasında olan veya yoğun şekilde üzerinde çalışılan özelliklerden bahsetmem ancak bu sefer bir istisna yapıyorum. Konuşmanın tamamını izlemek için vaktiniz yoksa özetini burada bulabilirsiniz:
Cihaz Modu 2. sürüm
Cihaz Modu'nun bu yeni ve cesur iterasyonu üzerinde yoğun bir şekilde çalışmaya devam ediyoruz. Ancak herkese denemesi için bir fırsat sunmak istedik. Bu nedenle, Canary sürümünde bu özelliği bugün etkinleştirdik. Bu değişikliklerle DevTools'u, mobil geliştirmenin varsayılan ve masaüstü geliştirmenin "eklenti" olduğu mobil öncelikli bir geleceğe yönlendiriyoruz. Önümüzdeki birkaç hafta içinde daha fazla iterasyon yapacağız ve çalışmayı tamamladığımızda kapsamlı bir blog yayını paylaşacağız.
Güçlü animasyon denetimi
Hâlâ geliştirme aşamasında olan Animasyon İncelemesi, hareket eden her şeyde neler olduğuna dair tam ve ayrıntılı bir görünüm sunar. Size her seferinde tek bir öğedeki geçişi göstermek yerine, gördüğünüz her şeye odaklanabilmeniz için karmaşık animasyonları gruplandıran sezgisel kurallar ekledik. Videoya göz atın. Özellik tam olarak kullanıma sunulduğunda daha kapsamlı ve bağımsız bir blog yayını paylaşacağız.
Düzen modu (önizleme)
Henüz tam olarak kullanıma hazır olmasa da çok umut verici olan yeni Düzen Modu, tam olarak kullanıma sunulmasını sabırsızlıkla beklediğim bir özellik. Sayfadaki tüm öğeler için Geliştirici Araçları'na Görsel Olarak Ne Görüyorsanız Onu Düzenle (WYSIWYG) düzenleme özellikleri ekleyen düzen modu. Şu an için yükseklik, genişlik, dolgu ve kenar boşlukları bağlama göre düzenlenebilir. Bu özelliği denemeniz için hazır olmamız biraz zaman alacak. Gelişmeleri sizinle paylaşmaya devam edeceğiz.
Güncellenen zaman çizelgesi paneliyle performans profili oluşturma
Yeni RAIL performans modelini kullanıma sunma çalışmalarımızın bir parçası olarak Zaman Çizelgesi panelinde yüzlerce küçük ve büyük değişiklik yaptık. Bu değişiklikler, performans profilleme hikayesini önemli ölçüde dönüştürüp iyileştiriyor. Bu nedenle, her değişikliği tek tek göstermek yerine Paul Irish, bir sitenin (bu örnekte Hotel Tonight'ın mobil sitesi) performansında nasıl hata ayıklama yapılacağını sahnede canlı olarak gösterdi. Yeni duyurulan özellikler arasında yükleme ve performans film şeritleri, dahil edilen ağ şelalesi, ağaç görünümü özeti ve alan adına ve dosyaya göre performans maliyetlerini görüntüleme olanağı yer alıyor.
Herhangi bir öğeye kolayca ön plan ve arka plan renkleri ekleme
Öğenize background-color veya color özelliği eklemek istediğinizde renk seçiciyi açmanız yeterli değildi. Bunun yerine çoğunuz her seferinde "background: red;" gibi bir şey yazarak renk seçici simgesinin görünmesini sağlar ve ardından istediğiniz rengi seçersiniz.
Bu süreci basitleştirebileceğimizi düşündük. Fareyle seçicinin sağ alt köşesinin üzerine geldiğinizde görünen iki kullanışlı düğme ekledik. Bu düğmeler sayesinde tek tıklamayla renk ekleyebilir ve seçiciyi açabilirsiniz:
Diğerlerinin en iyisi
- Genel medya türlerini göstererek Stil panelinde daha önce çok fazla yer kaplıyorduk. Artık normal olmayan durumlar dışında bu tür öğeleri seçicilerinizden önce gizliyoruz.
- Artık Stil panelinde fareyle bir CSS seçicinin üzerine uzun süre gelerek seçicinin sayfadaki kaç öğe için geçerli olduğunu görebilirsiniz.
- Henüz baskıdan vazgeçmediniz mi? Sayfanızın yazdırıldığında nasıl görüneceğini görmek için Baskı ortamı emülasyonu özelliğini kullanmaya devam edebilirsiniz. Bu özelliği yalnızca Oluşturma Ayarları'na taşıdık.
- İncelenecek bir öğe seçtiğinizde artık ilgili DOM alt ağacı otomatik olarak genişletilir ve kapatılır. Anlatması zor, görmek inanmaktır.
Her zaman olduğu gibi, Twitter üzerinden veya aşağıdaki yorumlar bölümünden düşüncelerinizi bizimle paylaşın ve crbug.com/new adresinden hataları bize bildirin.
Görüşmek üzere.
Paul Bakaus ve Geliştirici Araçları Ekibi