Mobil cihazlara yönelik uygulama geliştirme, masaüstü için geliştirme kadar kolay olmalıdır. İşlerinizi kolaylaştırmak için Chrome Geliştirici Araçları'nda yoğun bir şekilde çalışıyoruz. Şimdi ise mobil web geliştirme sürecinizi büyük ölçüde iyileştirecek bazı yeni özellikleri duyurmanın zamanı geldi. İlk olarak uzaktan hata ayıklama işlemini gerçekleştireceğiz. Ardından uygun mobil emülasyonu açıklayacağız.
Cihazınızın ekranını masaüstünde ekran olarak yayınlayın
Şimdiye kadar, uzaktan hata ayıklama sırasında cihazınız ile geliştirici araçlarınız arasında geçiş yapmak zorunda kalıyordunuz. Artık Ekran kaydı, cihazlarınızın ekranını geliştirici araçlarınızın hemen yanında gösteriyor. Görmek güzeldir ancak onunla etkileşimde bulunmak daha da iyidir:
- Ekran video kaydına yapılan tıklamalar dokunma işlemlerine dönüştürülür ve cihazda uygun dokunma etkinlikleri tetiklenir.
- Masaüstü işaretçinizle cihazınızdaki öğeyi inceleme
- Masaüstü klavyenizde yazarken tüm tuş vuruşları cihaza gönderilir. Baş parmaklarınızla yazma konusunda büyük zaman tasarrufu.
- İşaretçinizle veya dizüstü bilgisayarınızdaki dokunmatik yüzeyle kaydırarak sayfayı kaydırın.
Ekran video kaydı ile ilgili dokümanların tamamı, yakınlaştırma ve uzaklaştırma hareketi gibi tüm bunları ve daha fazlasını yakalar. Android'de Chrome Beta (m32) gerekir.
Kolay Uzaktan Hata Ayıklama
18 ay önce Chrome, WebKit tarayıcıları için uygun uzaktan hata ayıklama özelliğini kullanıma sunmuştu. Ancak o zaman bunu denediyseniz 400 MB'lık Android SDK indirmesiyle uğraşmanız gerekecekti. Bu durumda, adb ikili programını $PATH dosyanıza ve bazı sihirli komut satırı sihirli sözlere dönüştürüyorsunuz.
Artık bunların hepsini unutabileceğinizi duyurmaktan mutluluk duyuyoruz. Chrome artık USB'ye bağlı cihazlarınızı yerel olarak keşfedip konuşabilir. adb protokolünü, doğrudan Chrome'da USB üzerinden uyguladık. Böylece Menu > Tools > Inspect Devices sayfasına giderek uzaktan hata ayıklama oturumunuzu hemen başlatabilirsiniz.
Bu, Chrome OS dahil olmak üzere tüm platformlarda sorunsuz bir şekilde çalışır. Ancak Windows'da, cihazla konuşmak için önce uygun USB sürücülerini yüklemeniz gerekeceğini unutmayın. Bunu daha önce hiç denemediyseniz, cihazda USB üzerinden hata ayıklamayı etkinleştirmeniz ve Android için Chrome Beta'yı kullandığınızdan emin olmanız da gerekir. Dokümanların tamamını okuyun..
Yerel projeler için taşıma
localhost:8000'de geliştirme yapıyorsunuz ancak telefonunuz buna erişemiyor. Bu nedenle, bağlantı noktası yönlendirmeyi doğrudan uzaktan hata ayıklama iş akışına ekledik. Artık tünellere girmek zorunda kalmadan tüm projeleriniz üzerinde kolayca çalışabilirsiniz. about:inspect üzerinde Bağlantı Noktası Yönlendirme'yi tıklayarak kullanılabilir bağlantı noktalarını ayarlayın. Kullanılabilir bağlantı noktaları varsa bunlar yeşil renkte yanar.
Mobil Emülasyon
Uyumluluğu test etmeniz gereken cihazlar her zaman yanınızda olmuyor mu? Gerçek cihazlarda uzaktan hata ayıklama, size daha iyi performans ve dokunma deneyimi sağlasa da artık masaüstünde birçok cihaz özelliğini gerçekçi bir şekilde emüle edebilirsiniz. Bu sayede zamandan tasarruf edebilir ve yineleme döngünüzü çok daha hızlı hale getirebilirsiniz.
Tam dokunma etkinliği simülasyonuyla ekran boyutu, cihazPixelRatio ve <meta viewport> emülasyonu
Önceki Cihaz Metrikleri özelliğini gördüyseniz şu anda kullanabileceğiniz özellik büyük bir yükseltmedir. Ekip, yeni mobil emülasyonun gerçek cihazlarda gördüğünüz şeylerin neredeyse gerçeğe yakın bir şekilde temsil edilmesini sağlamak için çok çalıştı. Örneğin, WebKit tarayıcıları karmaşık bir metin otomatik boyutlandırma algoritması kullanır ve hatta her cihazın, metni okunabilir tutmaya yardımcı olmak için değiştirilen metin otomatik boyutlandırma için belirli bir "fudge faktörü" vardır. Emülasyon modunda bu davranışın uygulandığını onaylayabilir ve sonuçları görebilirsiniz.
Cihaz Piksel Oranı
Yüksek DPI'ya sahip cihazlarda, düşük DPI'ya sahip cihazlarda nelerin görüntülendiğini görmek şimdiye kadar neredeyse imkansızdı. Şimdi, Geliştirici Araçları'ndaki dPR emülasyonu, görünümünüzü derin bir DPI senaryosuna yakınlaştırmanızı sağlayacak şekilde uyarlayacak. Ayrıca window.devicePixelRatio, @media (-webkit-min-device-pixel-ratio: 2), image-set( url(pic2x.jpg) 2x, …) gibi uygulamaların ayarınızı yansıtmasını bekleyebilirsiniz. Böylece, uygulamanızın adapte olup olmadığını (dpi'ye özel farklı öğeler yüklemek dahil) görebilirsiniz.
Cihaz emülasyonu, tarayıcı özelliklerine veya hatalara kadar kapsamaz. Dolayısıyla, iOS emülasyonu yapılırken WebGL çalışmaya devam eder ve iOS 5 yön yakınlaştırma hatası ile karşılaşmazsınız. Bu çeşitliliği deneyimlemek için cihaza gidin.
<meta viewport> (ve @viewport) için uygun emülasyon
Daha önce yalnızca cihaza dayalı bir oyun olan width=device-width ve minimum-scale:1.0 oyununun davranışını test ettik. Artık farklı görüntü alanlarını hızlı bir şekilde deneyebilir ve nasıl oluşturulduklarını gözlemleyebilirsiniz.
Dokunma Etkinliği simülasyonu
Dokunmatik ekran emülasyonu ayarı, tıklamalarınızın touchstart vb. olarak yorumlanmasını sağlar. Ayrıca yakınlaştırma, kaydırma ve kaydırma gibi sentetik etkinlikler de kullanılabilir. İki parmak ucunuzu yakınlaştırmak ya da yakınlaştırmak/uzaklaştırmak için shift+sürüklemek veya shift+kaydırmak yeterlidir. Böylece, içeriğin görüntü alanının ötesinde ölçeklenmesini çok iyi bir şekilde izleyebilirsiniz.
Son olarak, kullanıcı aracısı adres sahteciliği (hem istek başlığı hem de window.navigator düzeyinde), coğrafi konum ve yön emülasyonuna yönelik beklemeleriniz, cihazınızın tüm işlevlerini keşfetmenize olanak tanır.
Cihaz Hazır Ayarları
Emülasyon hazır ayarları, bir telefon veya tablet seçip ilgili cihaz için doğru ekran boyutunu (dPR, UA'yı, ayrıca tam dokunma etkinlikleri ve görüntü alanı emülasyonunu) elde etmenizi sağlar. Belirli hazır ayarları deneyebilir veya bu özellikleri tek tek kolayca değiştirebilirsiniz.
DevTools ile Mobil Emülasyon ile ilgili tüm belgeler için devtools.chrome.com adresini ziyaret edin.
Demo
Tüm bu özelliklerin uygulamalı olarak nasıl çalıştığını anlamak için mobil cihazlar için Geliştirici Araçları'ndaki Chrome Geliştirici Zirvesi'nde 23 dakikalık konuşmama göz atın: