Mobil cihazlara öncelik veren nesil için yeni Cihaz Modu
Cihazlara emüle etmenin ve duyarlı tasarımlarla çalışmanın bir yolu olan Cihaz Modu'nu bir yıldan biraz daha uzun bir süre önce kullanıma sunmuştuk. Şimdi Chrome 49'dan itibaren ilk büyük yükseltmenin zamanı geldi. Peki, sunulan yenilikler neler?
Mobil cihazlar, Chrome Geliştirici Araçları'nda başlangıç noktası haline geliyor. Geçmişte mobil emülasyon için yöntemler sunmuştuk ancak geliştirme varsayılanı masaüstü bilgisayardı. Mobil emülasyonun her zaman açık olması gerekiyordu. Mobil site tüketimi birçok yerde masaüstü bilgisayarları geçtiği için Geliştirici Araçları'ndaki konumumuzu da değiştiriyoruz.
Yenilikler
Her şeyden önce, kullanıcı arayüzü sadeleştirilmiştir ve çok daha az alan kullanır. Yeni Cihaz Modu'nun çoğu kullanıcı için ana geliştirme modu olmasını bekliyoruz. Bu nedenle, ana DevTools gezinme çubuğunu genişleten sade ve basit bir tasarım bir gereklilikti.
Medya sorgularının üzerine hızlıca atlanabilen yeni cihaz cetveli.
Buna ek olarak, görüntü alanını ortaladık ve en üste yeni bir hızlı atlama cihaz cetveli ekledik. Bu, duyarlı tasarıma çok yardımcı olacak ve en yaygın cihaz boyutları hakkında fikir edinmenizi sağlayacak.
Son olarak, birçok seçenek mümkün olduğunda bir araya getirildi veya bir açma/kapatma anahtarının arkasına gizlenmiş. Bu yeni birleşik seçenekler, modlar arasında geçiş yapmayı çok kolay hale getiriyor. Belirli kontrolleri açıp kapatmak veya araç çubuğu deneyiminizi özelleştirmek için üç nokta menü simgesine basın.
Varsayılan olarak duyarlı
Ana Geliştirici Araçları araç çubuğu artık tarayıcı penceresinin sol tarafına genişliyor ve çeşitli mobil ve masaüstü cihazları emüle etmek için en önemli araçları içeriyor. İki geliştirme modundan birini seçebilirsiniz:
- Duyarlı
- Belirli Cihaz
Her iki modda da, görüntü alanı, Chrome içinde kendi yeniden boyutlandırılabilir penceresinde yer alır. Bunun önemli avantajı, tarayıcı pencerenizi ve DevTools'u istediğiniz gibi büyütebilmeniz ve sayfanızın birden fazla boyutunu test ettiğinizde ve ileri geri gittiğinizde atlamalarını gerektirmemesidir.
Duyarlı, sitenizin yalnızca birkaç cihazda değil, her tür cihazda çalıştığından emin olmak için etkin iterasyon sırasında kullanmak isteyeceğiniz moddur. Bu modda, görüntü alanının yanındaki tutma yerleri serbest bir şekilde yeniden boyutlandırılabilir.
Belirli bir Cihaz, belirli bir cihazı seçip görüntü alanını cihazın boyutuna kilitlediğinizi belirtir. Bu, lansmana yakın birkaç popüler cihaz için son düzeltmeler yapmak ve dokunuşları yapmak istediğinizde yararlı olur. Bu nedenle, açılır listede her tür cihazı içeren devasa bir liste yerine, şu anda en popüler olanları gösteriyoruz. Birini seçerseniz, onun gerçektekine yakın olması için elimizden geleni yaparız: Dokunma etkinlikleri, kullanıcı aracısı, görüntü alanı, cihaz chrome ve kullanıcı arayüzü (varsa) emüle edilir.
Entegre Uzaktan Hata Ayıklama
Emülasyonlar, en iyi olanlar bile sizi bu noktaya kadar ulaştırabilir. Emülasyonların şu anda yapamayacağı basit şeyler vardır. Örneğin:
- Bir düğmenin 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 cihazlarla ilgili rastgele tuhaflıklarda ve sınırlamalarda hata ayıklayın.
Tüm bu senaryoları yeterince test etmek için gerçek fiziksel cihazları kullanarak test etmeniz, çalışmanız ve hata ayıklamanız gerekir.
Bir süreliğine chrome://inspect platformuna göz atabilir, cihazınızı USB üzerinden bağlayabilir ve Geliştirici Araçları'nı kullanarak uzaktan hata ayıklama oturumu açabilirsiniz. Ancak şimdi bir adım daha ileri gidip uzaktan hata ayıklamanın görünümünü ve davranışını yeniden düzenleyerek
DevTools'un merkezine yerleştirdik. Artık başka bir sayfaya gitmek yerine doğrudan yeni ana menüden Cihazları İncele iletişim kutusu olarak erişebilirsiniz. Böylece, fiziksel hata ayıklama işlemini iş akışınıza dahil etmek çok daha kolay olur. Telefonunuzu takmanız yeterlidir, Geliştirici Araçları'nızdan çıkmanız gerekmez.
Eski emülasyon kontrollerinin geri kalanı için yeni evler
Mobil uygulama Geliştirici Araçları'nda artık varsayılan olduğundan, ağ sınırlama gibi özellikler kendi doğru ana alanlarına (bu örnekte Ağ Paneli) taşındı.
Sensörlerin emülasyonu veya basılı medya emülasyonu gibi oluşturma ayarları gibi bazı özellikler Çekmecede tutarlı bir yere taşındı. Tüm ekstraları yeni ana menüde, "Diğer araçlar"ın altında bulabilirsiniz.
Bunun önemli bir değişiklik olduğunu ve alışkın olmamız gerektiğini biliyoruz. İçerikteki her şey hakkında ayrıntılı bilgiyi yeni güncellenen Cihaz Modu belgelerinde bulabilirsiniz. Twitter'da veya 140'tan fazla karaktere ihtiyacınız varsa hata izleyicimizde (evet, özellik istekleri için bile) yanıt almak isteriz.