Mobil için geliştirme yapmak, masaüstü için geliştirme kadar kolay olmalıdır. İşlerinizi sizin için kolaylaştırmak amacıyla Chrome Geliştirici Araçları'nda çok çalışıyoruz ve şimdi, mobil web geliştirme sürecinizi büyük ölçüde geliştirecek bazı yeni özellikleri açıklamanın zamanı geldi. İlk olarak, uzaktan hata ayıklamayı inceleyeceğiz. Ardından, uygun mobil emülasyonu açıklayacağız.
Cihazınızın ekranını masaüstüne video kaydı
Şu ana kadar uzaktan hata ayıklarken sürekli olarak cihazınızla geliştirme araçları arasında geçiş yapmak zorundaydınız. Artık Ekran Kaydı, cihazlarınızın ekranını geliştirme araçlarınızın hemen yanında gösterir. Görmek güzeldir, ancak onunla etkileşimde bulunmak çok daha iyidir:
- Ekran video kaydına yapılan tıklamalar dokunma sayısına dönüştürülür ve cihazda uygun dokunma etkinlikleri tetiklenir.
- Masaüstü işaretçinizle cihazınızdaki öğeyi inceleyin
- Masaüstü klavyenizde yazın. Tüm tuş vuruşları cihaza gönderilir. Baş parmaklarınızla yazmaktan büyük zaman tasarrufu.
- Sayfayı işaretçinizle veya dizüstü bilgisayarınızın dokunmatik yüzeyinde kaydırarak kaydırın.
Ekran video kaydına ilişkin dokümanların tamamı, iki parmak ucunu yakınlaştırma ya da uzaklaştırma hareketi gönderme gibi tüm bu etkinlikleri ve daha fazlasını içerir. Android'de Chrome Beta (m32) gereklidir.
Kolay Uzaktan Hata Ayıklama
18 ay önce Chrome, WebKit tarayıcıları için uygun uzaktan hata ayıklamayı kullanıma sundu ancak o zaman denediyseniz Android SDK'sında 400 MB'lık indirme işlemi yapmak zorunda kaldınız ve $PATH dosyanıza adb ikili dosyası ve bazı sihirli komut satırı sihirbazları eklediniz.
Artık bunların hepsini unutabileceğinizi duyurmaktan mutluluk duyuyoruz. Chrome artık USB'ye bağlı cihazlarınızı yerel olarak keşfedebilir ve bunlarla konuşabilir. adb protokolünü Chrome'da doğrudan USB üzerinden uyguladık. Böylece kolayca Menu > Tools > Inspect Devices sitesine gidip 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 gerektiğini unutmayın. Daha önce hiç denemediyseniz cihazda USB üzerinden hata ayıklamayı etkinleştirmeniz ve Android için Chrome Beta sürümünü kullandığınızı onaylamanız gerekir. Dokümanların tamamını okuyun..
Yerel projeler için yönlendirme
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. Tünel korsanlığı olmadan tüm projeleriniz üzerinde çalışmak artık çok kolay. about:inspect sisteminde, kullanılabilir olmasını istediğiniz bağlantı noktalarını ayarlamak için Bağlantı Noktası Yönlendirme'yi tıklayın. Kullanılabilir olduğunda bağlantı noktaları yeşil renkte yanar.
Mobil Emülasyon
Uyumluluğu test etmeniz gereken cihazlar her zaman elinizin altında değildir, değil mi? Gerçek cihazlarla uzaktan hata ayıklama, en iyi performans ve dokunma hissini verecek olsa da artık masaüstünde birçok cihaz özelliğini gerçekçi bir şekilde emüle ederek zamandan tasarruf edebilir ve yineleme döngünüzü çok daha hızlı hale getirebilirsiniz.
Tam dokunma etkinlik simülasyonuyla ekran boyutu, cihazPixelRatio ve <meta viewport> emülasyonu
Önceki Cihaz Metrikleri özelliğini gördüyseniz şimdi sunulan özellik büyük bir yükseltmedir. Ekip, yeni mobil emülasyonun gerçek cihazlarda gördüklerinizin neredeyse gerçeğe yakın bir temsilini elde etmesini sağlamak için çok çalıştı. Örneğin, WebKit tarayıcıları karmaşık bir metin otomatik boyutlandırma algoritması kullanır ve aslında her cihaz, metnin okunaklı kalmasını sağlamak için değişen otomatik metin boyutlandırması için belirli bir "geçiş yapma faktörü"ne sahiptir. Emülasyon modunda, bu davranışın uygulanmakta olduğunu onaylayıp sonuçları görebilirsiniz.
Cihaz Piksel Oranı
Şimdiye kadar yüksek DPI'lı bir cihazda, düşük DPI'ya sahip bir cihazda nelerin görüntüleneceğini görmek neredeyse imkansızdı. Artık Geliştirici Araçları'ndaki dPR emülasyonu, görünümünüzü derin DPI senaryolarına odaklanmanızı sağlayacak şekilde uyarlayacak. Ayrıca window.devicePixelRatio, @media (-webkit-min-device-pixel-ratio: 2), image-set( url(pic2x.jpg) 2x, …) vb. ayarların ayarlarınızı yansıtmasını bekleyebilirsiniz. Böylece, dpi'ye özel farklı öğeler yüklemek de dahil olmak üzere uygulamanızın nasıl uyum sağladığını görebilirsiniz.
Cihaz emülasyonu tarayıcı özelliklerini veya hatalarını 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ıyla karşılaşmazsınız. Bu değişkenliği deneyimlemek için cihaza gidin.
<meta viewport> (ve @viewport) için doğru emülasyon
width=device-width ve minimum-scale:1.0 oyunlarının davranışını test etmek daha önce yalnızca cihaza özel bir oyundu. 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 olarak yorumlanmasını sağlar. Ayrıca, yakınlaştırma, kaydırma ve kaydırma gibi sentetik etkinlikler de çalışacaktır. İçeriği yakınlaştırmak için shift+sürüklemeniz veya shift+kaydırmanız yeterlidir. Görüntü alanının ötesinde ölçeklenen içeriği harika bir şekilde görebilirsiniz.
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ülasyonunun beklemedeki kullanım özellikleri 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çmenize, tam dokunma etkinlikleri ve emüle edilmiş görüntü alanı ile birlikte doğru ekran boyutunu (dPR, UA) almanıza olanak tanır. Belirli hazır ayarları deneyebilir veya bu özellikleri tek tek kolayca değiştirebilirsiniz.
Devtools.chrome.com adresinden Geliştirici Araçları'nı kullanarak Mobil Öykünme ile ilgili tüm dokümanlara ulaşabilirsiniz
Demografi
Tüm bu özelliklerin işleyiş şeklini ayrıntılı olarak görmek için, Mobil Cihazlar için Geliştirici Araçları üzerine Chrome Geliştirici Zirvesi'nde yaptığım 23 dakikalık konuşmamı izleyin: