Mobil cihazlara öncelik veren bir nesil için yeni bir cihaz modu
Yaklaşık bir yıl önce, cihazları taklit etmenin ve duyarlı tasarımlarla çalışmanın bir yolu olan Cihaz Modu'nu kullanıma sunduk. Şimdi, Chrome 49'dan itibaren ilk büyük yükseltme zamanı geldi. Peki, yenilikler neler?
Mobil, Chrome Geliştirici Araçları'nın başlangıç noktası haline geliyor. Geçmişte mobil cihazları taklit etmenin yollarını sunmuştuk ancak geliştirme için varsayılan olarak masaüstü kullanılıyordu. Mobil emülasyonun her zaman açık olması gerekiyordu. Mobil sitelerin kullanımı birçok yerde masaüstü sürümleri geride bıraktığına göre DevTools'taki konumumuzu da değiştiriyoruz.
Yenilikler
Öncelikle kullanıcı arayüzü basitleştirildi ve çok daha az alan kaplıyor. Yeni cihaz modunun çoğu kullanıcı için ana geliştirme modu olmasını beklediğimizden, ana DevTools gezinme çubuğunu genişleten temiz ve basit bir tasarım şarttı.
Medya sorgularının üzerindeki yeni hızlı atlama cihaz cetveli.
Ayrıca, ekran görüntüsünü ortaladık ve en üstte yeni bir hızlı geçiş cihaz cetveli ekledik. Bu cetvel, duyarlı tasarım yaparken size en yaygın cihaz boyutları hakkında fikir verir.
Son olarak, mümkün olduğunda birçok seçenek bir araya getirilmiş veya bir açma/kapatma düğmesinin arkasına gizlenmiştir. Bu yeni kompozit seçenekler, modlar arasında geçiş yapmayı çok daha kolay hale getirir. Belirli kontrolleri etkinleştirmek veya araç çubuğu deneyiminizi özelleştirmek için üç noktalı küçük menü simgesine dokunun.
Varsayılan olarak duyarlı
Ana DevTools araç çubuğu artık tarayıcı penceresinin sol tarafına genişletildi ve çeşitli mobil ve masaüstü cihazları taklit etmek için en önemli araçları içeriyor. İki geliştirme modu arasından seçim yapabilirsiniz:
- Duyarlı
- Belirli Cihaz
Her iki modda da görüntü alanı, Chrome'da kendi yeniden boyutlandırılabilir penceresinde yer alır. Bu yöntemin önemli bir avantajı, tarayıcı pencerenizi ve DevTools'u istediğiniz şekilde en üst düzeye çıkarabilmeniz ve sayfanızın birden fazla boyutunu test ederken ve ileri geri giderken bunların sıçramamasını sağlayabilmenizdir.
Sitenizin yalnızca belirli cihazlarda değil, her türlü cihazda çalıştığından emin olmak için etkin iterasyon sırasında Uyarlanabilir modunu kullanmanız gerekir. Bu modda, görüntü alanının yanındaki tutamaçların boyutu serbestçe değiştirilebilir.
Belirli Cihaz, belirli bir cihaz seçip görüntü alanını bu cihazın boyutuna kilitlediğinizde kullanılır. Bu, lansmana yakın bir zamanda birkaç popüler cihazda son düzeltmeleri ve dokunuşları yapmak istediğinizde kullanışlı olur. Bu nedenle, açılır listede her tür cihazın büyük bir listesini değil, şu anda en popüler olanları gösteriyoruz. Bir cihaz seçerseniz gerçek cihaza olabildiğince yakın davranması için elimizden geleni yaparız: Dokunma etkinlikleri, kullanıcı aracısı, ekran alanı, cihaz kromu ve kullanıcı arayüzü (varsa) hepsi taklit edilir.
Entegre Uzaktan Hata Ayıklama
En iyileri bile olsa emülasyonlar size yalnızca belirli bir noktaya kadar yardımcı olabilir. Emülasyonların şu anda yapamayacağı bazı şeyler vardır. Örneğin:
- Düğmelerin başparmağınız için yeterince büyük olup olmadığını kontrol edin.
- Sitenizin performansını daha yavaş bir telefonda test edin.
- Belirli cihazların rastgele tuhaflıklarını ve sınırlamalarını düzeltme
Bu senaryoların tümünü yeterince test etmek için gerçek fiziksel cihazları kullanarak test, çalışma ve hata ayıklama yapmanız gerekir.
Bir süredir chrome://inspect adresine göz atabilir, cihazınızı USB üzerinden bağlayabilir ve Geliştirici Araçları üzerinden uzaktan hata ayıklama oturumu açabilirsiniz. Ancak şimdi bir adım daha ileri giderek uzaktan hata ayıklamanın görünümünü ve davranışını yeniden yapılandırıp DevTools'un merkezine yerleştirdik. Artık başka bir sayfaya göz atmak yerine doğrudan yeni ana menüden iletişim kutusu olarak Cihazları İncele'ye erişebilirsiniz. Bu, fiziksel hata ayıklama işlemini iş akışınıza dahil etmeyi çok daha kolaylaştırır. DevTools'unuzdan çıkmanıza gerek kalmadan telefonunuzu takmanız yeterlidir.
Eski emülasyon kontrollerinin geri kalanı için yeni alanlar
Mobil artık DevTools'da varsayılan olarak kullanıldığı için ağ tarama hızı sınırlama gibi özellikler uygun yerlerine (bu durumda Ağ Paneli) taşındı.
Sensör emülasyonu veya baskı medyasını taklit etme gibi oluşturma ayarları gibi bazı özellikler, Çekmecesi'nde tutarlı bir yere taşındı. Tüm ekstraları yeni ana menüdeki "Diğer araçlar" bölümünde bulabilirsiniz.
Bu önemli değişikliğin hepimizin alışması gerektiğinin farkındayız. Bu sürümde yer alan her şeyle ilgili kapsamlı bilgileri yeni güncellenen cihaz modu dokümanlarında bulabilirsiniz. Twitter'dan veya 140 karakterden fazlasına ihtiyacınız varsa hata takip aracımızdan (evet, özellik istekleri için bile) bize ulaşabilirsiniz.