Giriş
Çok cihazlı web'i hedefleyen bir web geliştiricisiyseniz sitelerinizi ve web uygulamalarınızı bir dizi farklı cihaz ve yapılandırmada test etmeniz gerekebilir. Bu noktada senkronize testler yardımcı olabilir ve aynı etkileşimi birkaç cihaz ve tarayıcıda aynı anda otomatik olarak gerçekleştirmenin etkili bir yoludur.
Senkronize testler, özellikle zaman alan iki sorunun çözümüne yardımcı olabilir:
- Tüm cihazlarınızı, test etmek istediğiniz URL ile senkronize edin. Bunların her bir cihaza manuel olarak yüklenmesi eskiden gerçekleştirilir, daha uzun sürer ve regresyonları gözden kaçırmayı kolaylaştırır.
- Etkileşimleri senkronize etme. Bir sayfanın yüklenebilmesi görsel test için harika bir yöntemdir. Ancak etkileşim testi için ideal olarak kaydırmaları, tıklamaları ve diğer davranışları senkronize edebilmek de istersiniz.
Neyse ki, hedef cihazlarınızdan bazılarına erişebiliyorsanız masaüstünüzden mobil cihazlarınıza akışı iyileştirmeyi amaçlayan bir dizi araç bulunmaktadır. Bu makalede Ghostlab, Remote Preview, Adobe Edge Denetleme ve Grunt'a göz atacağız.
Araçlar
GhostLab (Mac)
Ghostlab, sitelerin ve web uygulamalarının testlerini birden fazla cihazda senkronize etmek için tasarlanmış ticari bir Mac uygulamasıdır (49 ABD doları). Minimum kurulumda, aşağıdakileri aynı anda senkronize etmenize olanak tanır:
- Tıklamalar
- Gezinme
- Kaydırmalar
- Form girişi (ör.giriş formları, kayıt)
Bu, sitenizin uçtan uca kullanıcı deneyimini birden fazla cihazda test etmeyi çok kolaylaştırır. Sayfanızı cihazlarınızdaki bir tarayıcıda açtığınızda, gezinme üzerinde yapılan değişiklikler (yenilemeler dahil) diğer bağlı cihazların anında yenilenmesine neden olur. Ghostlab, yerel dizinlerin izlenmesini destekler. Dolayısıyla bu yenileme, yerel dosyalarda yaptığınız düzenlemeleri kaydettiğinizde de gerçekleşir. Böylece her şey her zaman senkronize olur.
Ghostlab'i sorunsuz bir şekilde kurdum. Başlamak için deneme sürümünü (veya satın almak istiyorsanız tam sürümü) indirin, yükleyin ve çalıştırın. Ardından, Mac'inizi ve test etmek istediğiniz cihazları aynı kablosuz ağa bağlayarak, bu cihazların bulunabilir olmasını istersiniz.
Ghostlab çalışmaya başladıktan sonra, test edilecek URL'yi eklemek için "+" işaretini tıklayabilir veya URL'yi tarayıcınızın adres çubuğundan sürükleyebilirsiniz. Alternatif olarak, test etmek istediğiniz yerel klasörü ana pencereye sürükleyin. Yeni bir site girişi oluşturulur. Bu makalede, http://html5rocks.com sitesinin canlı bir sürümünü test ediyorum. Arsız, değil mi? ; )
Ardından, sitenizin adının yanındaki ">" oynat düğmesini tıklayarak yeni bir Ghostlab sunucusu başlatabilirsiniz. Bu işlem, ağınıza özgü bir IP adresinde kullanılabilen yeni bir sunucu başlatır (ör.http://192.168.21.43:8080).
Burada bir Nexus 4 bağladım ve Android için Chrome'u Ghostlab'in verdiği IP adresine yönlendirdim. Tek yapmam gereken bu kadar. Ghostlab, diğer bazı çözümlerde olduğu gibi her cihaz için özel bir istemci yüklemenizi gerektirmez ve daha da hızlı bir şekilde test etmeye başlayabilirsiniz.
Ghostlab URL'sine bağladığınız tüm cihazlar, ana Ghostlab penceresinin sağ tarafındaki kenar çubuğunda bulunan bağlı istemciler listesine eklenir. Cihaz adını çift tıkladığınızda ekran boyutu, işletim sistemi gibi ek ayrıntılar görüntülenir. Artık gezinmeyi ve tıklamaları senkronize etmeyi test edebilirsiniz! Yaşasın.
Ghostlab, bağlı cihazlarla ilgili UA dizesi, görüntü alanı genişliği ve yüksekliği, cihaz piksel yoğunluğu, en boy oranı gibi bazı istatistikleri de gösterebilir. İncelediğiniz temel URL'yi istediğiniz zaman bir girişin yanındaki ayarlar dişli simgesini tıklayarak manuel olarak değiştirebilirsiniz. Bu işlem, aşağıdakine benzer bir yapılandırma penceresi açar:
Artık diğer bağlı cihazlarımdan birini seçip HTML5Rocks'taki farklı bağlantıları tıklayabiliyorum. Gezinme, hem masaüstü Chrome cihazımda (aynı Ghostlab URL'sini girdiğim yer) hem de tüm cihazlarımda senkronize ediliyor.
Daha da iyisi, Ghostlab'in ağ üzerinden geçen tüm bağlantılara proxy uygulamanıza olanak veren bir seçeneği vardır.Bu sayede, http://192.168.21.43:8080/www.html5rocks.com adresine gitmek yerine (örneğin, www.html5rocks.com/tr/performance4.com.tr21.5 adresine gitmek yerine) tüm çözümlerin tamamı yeni duruma getirilebilir.Bu da tümçözümlerin sorunsuz bir şekilde yenilenmesine neden olur.
Etkinleştirmek için, "İçerik Yükleme" sekmesinin altındaki "Tüm içeriği Ghostlab yoluyla yükle"yi işaretleyin.
İşleyiş şeklini görün:
Ghostlab, desteklenen tüm tarayıcılarda istenilen sayıda site veya pencere yükleyebilir. Bu, yalnızca sitenizi farklı çözünürlüklerde test etmenizi değil, kodunuzun farklı tarayıcı ve platformlarda nasıl davrandığını da gösterir. Yaşasın!
Ghostlab, önizlediğiniz proje çalışma alanının kurulumunu yapılandırmanıza ve tespit edildiğinde dizinde yapılan değişikliklerin izlenip yenilenmesini isteyip istemediğinizi belirtebilirsiniz. Bu, değişikliklerin tüm bağlı istemcilerin yenilenmesine neden olacağı anlamına gelir. Artık manuel yenilemeye gerek yok.
Ghostlab'in başka hangi konularda yardımcı olabileceğini merak ediyor olabilirsiniz. Bir isviçre bıçağı olmasa da bağlı cihazlarda uzaktan kod incelemesini destekler. Ana arayüzde, herhangi bir cihaz adını çift tıkladığınızda "hata ayıklama" seçeneği karşınıza çıkar. Bu seçenek, Chrome Geliştirici Araçları'nın farklı bir sürümünü başlatacaktır.
Ghostlab, bağlı cihazlarda komut dosyalarında hata ayıklamanıza ve stillerde ince ayar yapmanıza olanak tanıyan, paket halinde sunulan Weinre uzak web denetleyicisi ile bunu mümkün kılar. Android için Chrome'da sunulan uzaktan hata ayıklama deneyimine benzer şekilde, öğeleri seçebilir, bazı performans profili oluşturma işlemini çalıştırabilir ve komut dosyalarını hata ayıklayabilirsiniz.
Sonuç olarak, Ghostlab'i farklı cihazlarda günlük testler için ne kadar hızlı kullanabildiğim için çok etkilendim. Serbest çalışansanız ticari lisansın maliyeti biraz yüksek olabilir (diğer seçenekler için aşağıya bakın). Ancak, aksi takdirde Ghostlab'i önermekten memnuniyet duyarım.
Adobe Edge Denetle CC (Mac, Windows)
Adobe Edge İncele, Adobe Creative Cloud abonelik paketinin bir parçasıdır ancak ücretsiz deneme olarak da sunulur. Chrome ile birden fazla iOS ve Android cihazı (Edge Denetleyici Chrome uzantısı aracılığıyla) kullanmanızı sağlar. Böylece, belirli bir URL'ye göz attığınızda tüm bağlı cihazlarınız senkronize halde kalır.
Kurulumu yapmak için önce bir Adobe Creative Cloud hesabına kaydolun veya varsa mevcut bir hesaba giriş yapın. Ardından, Adobe.com'dan Edge Inspection'ı indirip yükleyin (şu anda Mac ve Windows'da kullanılabilir, ancak Linux'ta kullanılamaz, maalesef.). Edge Denetle'ye ilişkin docs elinizin altında olması için faydalı olduğunu unutmayın.
Yüklendikten sonra, bağlı cihazlar arasında göz atma senkronizasyonunu yapabilmek için Chrome için Edge inspect uzantısını edinmek istersiniz.
Ayrıca, işlemleri senkronize etmek istediğiniz her cihaza bir Edge İncele istemcisi yüklemeniz gerekir. Neyse ki müşteriler iOS, Android ve Kindle'ı kullanabilir.
Kurulum süreci arkamızda olduğuna göre artık sayfalarımızı incelemeye başlayabiliriz. Bu özelliğin çalışması için tüm cihazlarınızın aynı ağa bağlı olduğundan emin olmanız gerekir.
Masaüstünüzde Edge Denetle'yi, Chrome'daki Edge Denetle uzantısını ve ardından cihazlarınızdaki uygulamayı başlatın (aşağıya bakın):
Artık masaüstünde HTML5Rocks.com gibi bir siteye gidebiliriz, mobil cihazımız da otomatik olarak aynı sayfaya gider.
Uzantıda, cihazınızın aşağıdaki ekran görüntüsündeki gibi yanında bir <> simgesiyle listelendiğini de görürsünüz. Bu seçeneği tıkladığınızda sayfanızı inceleyip hata ayıklamanıza olanak tanıyan bir Weinre örneği başlatılır.
DOM görüntüleyici ve konsolu olan Weinre, Chrome Geliştirici Araçları'nda JavaScript hata ayıklama, profil oluşturma ve ağ şelalesi gibi özelliklere sahip değildir. Geliştirici araçları için sınırlı bir araç olsa da DOM ve JavaScript durumunun sağlıklılık kontrolü için faydalıdır.
Edge Denetle uzantısı, bağlı cihazlardan kolayca ekran görüntüsü oluşturmayı da destekler. Düzen testleri veya yalnızca sayfanızın görüntülerini başkalarıyla paylaşmak için yararlıdır.
CC için zaten ödeme yapan geliştiriciler için Edge Audit mükemmel bir çözümdür. Ancak, her bir cihazın özel bir istemcinin yüklenmesini gerektiren olması ve Ghostlab gibi alternatif bir uygulamada bulamayacağınız biraz ek kurulum çalışması gibi bazı uyarılara sahiptir.
Uzaktan Önizleme (Mac, Windows, Linux)
Remote Preview, birden çok cihazda görüntüleyebileceğiniz HTML sayfalarını ve içeriği barındırdığınız açık kaynaklı bir araçtır.
Uzaktan önizleme, yapılandırma dosyasındaki bir URL'nin değişip değişmediğini kontrol etmek için her 1.100 ms'lik aralıkta bir XHR çağrısı yürütür. Komut dosyası, mevcut olduğunu tespit ederse her cihaz için sayfaya yüklenen bir iframe'in src özelliğini güncelleyerek sayfayı buna yükler. Değişiklik algılanmazsa komut dosyası, değişiklik yapılana kadar yoklamaya devam eder.
Bu, cihazları birbirine bağlamak ve hepsindeki bir URL'yi kolayca değiştirmek için idealdir. Başlamak için:
- Uzaktan Önizleme indirin ve dosyanın tüm dosyalarını yerel olarak erişilebilen bir sunucuya taşıyın. Bu Dropbox, bir geliştirme sunucusu ya da başka bir şey olabilir.
- Bu indirmeden "index.html" dosyasını tüm hedef cihazlarınızda yükleyin. Bu sayfa sürücü olarak kullanılacak ve bir iframe kullanarak test etmek istediğiniz sayfayı yükleyecektir.
- Önizlemek istediğiniz URL ile "url.txt" dosyasını (indirme işlemine dahil edilmiştir ve artık sunucunuzda sunulmaktadır) düzenleyin. Bu dosyayı kaydedin.
- Remote Preview, url.txt dosyasının değiştiğini fark eder ve URL'nizi yüklemek için tüm bağlı cihazları yeniler.
Bir lo-fi çözümü olsa da, Remote Preview ücretsizdir ve çalışır.
Grunt + Canlı Yeniden Yükleme (Mac, Windows, Linux)
Grunt (ve Yeoman), ön uçta yapı iskelesi ve proje oluşturmak için kullanılan komut satırı araçlarıdır. Bu araçları zaten kullanıyorsanız ve canlı yeniden yükleme kurulumunuz varsa iş akışınızı, cihazlar arası testi etkinleştirmek için kolayca güncelleyebilirsiniz. Bu durumda düzenleyicinizde yaptığınız her değişiklik, yerel uygulamanızı açtığınız tüm cihazlarda yeniden yükleme yapılmasına neden olur.
Muhtemelen grunt server ürününü kullanmaya alışkınsınız. Projenizin kök dizininden çalıştırıldığında, kaynak dosyalarınızda yapılan değişiklikleri izler ve tarayıcı penceresini otomatik olarak yeniler. Bunun nedeni, sunucunun bir parçası olarak çalıştırdığımız grunt-contrib-watch görevidir.
Projenizi oluşturmak için Yeoman'ı kullandıysanız, masaüstü bilgisayarınızda canlı tekrar yükleme yapmaya başlamak için ihtiyacınız olan her şeyi içeren bir Gruntfile oluşturacaktır. Cihazlar arası çalışmasını sağlamak için tek bir özelliği, yani hostname özelliğini değiştirmeniz gerekir (masaüstü bilgisayarınızda). connect altında listelenmelidir. hostname politikasının localhost olarak ayarlandığını fark ederseniz bunu 0.0.0.0 olarak değiştirmeniz yeterlidir. Daha sonra grunt server komutunu çalıştırın. Her zaman olduğu gibi, sayfanızın önizlemesini gösteren yeni bir pencere açılır. URL, muhtemelen http://localhost:9000 (bağlantı noktası 9000) şeklinde görünür.
Yeni bir sekme veya terminal açın ve sisteminizin dahili IP'sini keşfetmek için ipconfig | grep inet hizmetini kullanın. 192.168.32.20 şeklinde görünebilir. Son adım, canlı yüklemeleri senkronize etmek istediğiniz cihazda Chrome gibi bir tarayıcı açmak, bu IP adresini ve ardından önceki bağlantı noktası numarasını yazarak (ör. 192.169.32.20:9000) bir IP adresi yazmaktır.
İşte bu kadar. Canlı yeniden yükleme, artık masaüstünüzdeki kaynak dosyalarda yaptığınız tüm düzenlemelerin hem masaüstü tarayıcınızda hem de mobil cihazınızdaki tarayıcıda yeniden yüklemeleri tetiklemesine neden olacaktır. Mükemmel!
Yeoman'da bu iş akışını ayarlamayı kolaylaştıran bir Mobil jeneratör de mevcuttur.
Emmet Canlı Stili
Emmet LiveStyle, geliştirme iş akışınıza canlı CSS düzenleme özelliği sunan bir tarayıcı ve düzenleyici eklentisidir. Şu anda Chrome, Safari ve Sublime Text'te kullanılabilmektedir ve çift yönlü (tarayıcıda düzenleyici ve tarayıcı tersi) düzenlemeyi destekler.
Emmet LiveStyle, değişiklik yaptığınızda tarayıcı yenileme işlemini zorunlu kılmaz, bunun yerine CSS düzenlemelerini Geliştirici Araçları uzaktan hata ayıklama protokolüne aktarır. Diğer bir deyişle, ister masaüstü Chrome ister Android için Chrome olsun, masaüstü düzenleyicinizde yapılan değişiklikleri tüm bağlı Chrome sürümlerinde görebilirsiniz.
LiveStyle "çoklu görünüm modu"na sahiptir. Bu mod, duyarlı tasarımları pencerelerde ve cihazlarda test etmek ve değiştirmek için idealdir. Çoklu görünüm modunda, aynı sayfa için Geliştirici Araçları güncellemelerinin yanı sıra tüm düzenleyici güncellemeleri tüm pencerelere uygulanır.
LiveStyle paketi yüklüyken canlı CSS düzenleme özelliğini kullanmaya başlamak için:
- Sublime Text'i başlatın ve bir projede CSS dosyası açın
- Chrome'u başlatın ve düzenlemek istediğiniz CSS'nin bulunduğu sayfaya gidin
- DevTools'u açıp LiveStyle paneline gidin. "LiveStyle'ı Etkinleştir" seçeneğini işaretleyin. Not: Stil güncellemelerinin uygulanabilmesi için canlı düzenleme oturumunuz sırasında Geliştirici Araçları'nın her bir pencerede açık tutulması gerekir.
- Bu etkinleştirildiğinde, solda stil sayfaları ve sağ tarafta düzenleyici dosyalarınızın listesi görüntülenir. Tarayıcıyla ilişkilendirilecek düzenleyici dosyasını seçin. İşte bu kadar. Boom mikrofon.
Düzenleyici dosyalarının listesi artık dosyaları düzenlediğinizde, oluşturduğunuzda, açtığınızda veya kapattığınızda otomatik olarak güncellenecektir.
Sonuçlar
Cihazlar arası test, hâlâ geliştirilmekte olan birçok yeni yarışmacı bulunan yeni ve hızlı bir alandır. Neyse ki çok sayıda cihaz grubu arasında uyumluluk ve test gerçekleştirmenizi sağlayacak bir dizi ücretsiz ve ticari araç mevcuttur.
Bununla birlikte, bu alanda hâlâ çok sayıda iyileştirme potansiyeli var ve farklı cihazlarda test etme araçlarının nasıl daha da geliştirilebileceği üzerine düşünmenizi öneriyoruz. Kurulum süresini azaltan ve cihazlar arası iş akışınızı iyileştiren her şey avantajlıdır.
Sorunlar
Bu araçlarla test ederken karşılaştığım en büyük sorun belki de sürekli Uykuya giren cihazlar oldu. Bu durum anlaşmayı bozamaz, ancak bir süre sonra can sıkıcı hale gelir. Mümkün olduğunda, çözüm olarak cihazlarınızı uyku moduna almayacak şekilde ayarlamak iyi bir fikirdir. Ancak, bu işlemin, her zaman fişe takılı değilken pilinizi tüketebileceğini unutmayın.
GhostLab'de büyük bir sorunla karşılaşmadım. 49 dolar olan bazıları fiyatı biraz fazla bulabilir. Ancak düzenli olarak kullandığınızda bu fiyatı daha çok veya daha az ödeyebildiğinizi unutmayın. Kurulumun en güzel taraflarından biri, her hedef cihaz için bir istemci yükleyip yönetme konusunda endişelenmenize gerek olmamasıydı. Aynı URL her yerde çalışıyordu.
Adobe Edge Denetle'yi kullanırken her bir cihaza belirli istemciler yüklemek ve bunları kullanmak biraz yorucu buldum. Ayrıca, bağlı tüm istemcilerin tutarlı bir şekilde yenilenmediğini fark ettim. Yani bunu Chrome uzantısından kendim yapmak zorunda kaldım. Ayrıca Creative Cloud aboneliği de gerektirir ve siteleri cihazlarınızdaki belirli bir tarayıcıyla değil istemcide yükleme ile sınırlıdır. Bu durum, doğru test yapma kapasitenizi sınırlandırabilir.
Uzaktan Önizleme işlevi tanıtıldığı gibi çalışıyor, ancak son derece hafif. Yani, sitenizi cihazlar arasında yenilemekten daha fazlası için daha gelişmiş bir araç seçeneğine ihtiyacınız var. Örneğin, tıklamaları veya kaydırmaları senkronize etmez.
Öneriler
Başlamak için ücretsiz bir platformlar arası çözüm arıyorsanız Remote Preview'u kullanmanızı öneririz. Ücretli bir çözüm arayan bir şirkette çalışan kişiler için GhostLab, deneyimim açısından tutarlı bir mükemmellikti, ancak yalnızca Mac'te kullanılabilir. Windows kullanıcıları için Adobe Edge Audit en iyi çözümdür ve bazı süslemeler olmadan genellikle işin tamamlanmasını sağlar.
Grunt ve LiveStyle ayrıca geliştirme sırasında canlı yinelemenizi zenginleştirmek için mükemmeldir.