Bir web sitesi veya web uygulaması oluştururken, her zaman bir mobil cihazda veya hatta bir Tablette her şeyin doğru çalışıp çalışmadığını kontrol etme görevimiz vardır. Geliştirmede çalışıyorsak, bunu nasıl kontrol edeceğimiz yok, çünkü önce değişikliklerimizi sunucuya göndermemiz ve orada mobil cihazımızda danışmamız gerekecek.
Ancak Google Chrome, web sitemizin veya uygulamamızın istediğimiz mobil cihazda nasıl çalıştığını doğrulamamızı sağlayan birkaç basit adımla bize izin veren bir işlevselliğe sahip olduğundan endişelenmemeliyiz.
1. Google Chrome'da mobil cihazı taklit edin
Dediğimiz gibi, Google Chrome, hariç tutulan seçeneklere bir bakışta erişebileceğimiz geliştirici odaklı bir araç içeriyor. Bunlardan biri, Cihaz Modundaki Mobil Cihaz Emülatörüdür.
Aşama 1
En altta bize sayfanın HTML kodunu gösteren bir menümüz olacak. Chrome geliştirici panelini göstermek için "Menü / Diğer araçlar / Geliştirici araçları"na gideceğiz veya aşağıdaki tuş kombinasyonunu yapacağız:
Windows ve Linux'ta
Ctrl + Üst Karakter + M
Mac'te
⇧ + ⌘ + M
Adım 2
Bir kod panelinin açıldığını göreceğiz. "Cihaz Modu"na karşılık gelen ve mavi göründüğünde etkinleşecek olan simgeye bakıyoruz. Etkinleştirmek için üzerine tıklayın.
Aşama 3
Oradayken, öykünülmüş sayfanın üstündeki üst menüye gidip öykünmek istediğimiz cihazı seçiyoruz, bu durumda Apple iPhone x'i seçip, değişikliklerin etkili olması için yeniliyoruz. Tek bir tıklamayla simüle edilmiş modelimize sahip olmamız için yapılandırılmış çok çeşitli ön ayarlarımız var.
4. Adım
Özel ölçümler oluşturmak istiyorsak, terminal modelinin göründüğü yere gideceğiz ve "Düzenle" ye tıklayacağız.
Adım 5
Daha önce konfigüratör olan modeller görünecektir veya "Add custom device" butonuna tıklayarak kişiselleştirilmiş bir şekilde ekleyebiliriz.
6. Adım
Cihaz Modundaki seçeneklerde, dokunmatik ekranı simüle eden sensörleri etkinleştirme veya etkinleştirme olanağına sahip olacağız.
NotDiğerlerinin yanı sıra "Sensörler" seçeneğini görüntülemek için üç nokta simgesine tıklayın
2. Google Chrome'da mobil ağ bağlantısını taklit edin
Ağın durumu ve Chrome sayesinde test edilmesi, web sitemizi 3G gibi farklı ağ bağlantıları üzerinden ve hatta bağlantı olmadan test etmemizi sağlar.
Aşama 1
İçinde bulunduğumuz ağa da öykünebiliriz. Bunu yapmak için "Ağ" sekmesine gidiyoruz ve daraltılabilir listeden bir ağ türü seçiyoruz.
Adım 2
Bir limit belirlediysek, bunu etkinleştirdiğimizi hatırlatmak için bir uyarı bildirimi göreceğiz.
3. Google Chrome'da mobil ağ bağlantısına sınırlar ekleyin
Aşama 1
Bu limit önemlidir ve kendi ayarladığımız koşullarla özel limitler belirleyebiliriz. Bunun için aşağıdaki tuşa basarak Ayarlar panelini açıyoruz.
F1
Adım 2
"Kısma" seçeneğine tıklayın. "Özel profil ekle" seçeneğini seçiyoruz.
Aşama 3
Burada limit ayarlarını özel bir şekilde ayarlayacağız.
4. Google Chrome'da ağ koşulları panelini açın
DevTools'daki geliştirici panelinde daha fazla seçeneğimiz var.
Aşama 1
Bunu yapmak için sağ taraftaki üç noktalı menüye gidip “Diğer araçlar” / “Ağ koşulları” üzerine tıklıyoruz.
Adım 2
Buradan önbelleği etkinleştirebilir veya devre dışı bırakabilir ve varsayılan aracıyı özel bir aracıyla değiştirebiliriz.
Bu işlevsellik sayesinde, web sitemizin veya uygulamamızın doğru çalıştığını test etmek için artık cep telefonumuzu aramak zorunda kalmayacağız, sadece herkesin bu aracı biraz daha keşfetmesi ve test ve uygulama sürelerini kısaltmak için kullanması kalıyor.
