Google Chrome ile mobilde olduğu gibi web sayfaları nasıl görüntülenir?

Akıllı telefon pazarı büyümeyi bırakmıyor. Google bile arama motoru sonuçlarındaki tüm "web dostu" sayfaları ödüllendirir. Bu nedenle, giderek daha fazla web sitesi, masaüstü sürümlerini bir kenara bırakarak veya bazı işlevleri veya bunların içindeki bazı içerikleri sınırlandırarak, her tür mobil cihazda doğru şekilde açılacak şekilde optimize edilmektedir. gibi web tarayıcıları Google krom , bir web sitesini nereden yüklediğimizi (bir bilgisayar, cep telefonu, tablet vb.) tespit edin ve sunucudan ilgili sürümü isteyin. Ama neyse ki sunucuyu kandırmak çok kolay.

Web tarayıcısını kullandığımızda, genellikle içine bir URL yazmaya veya doğrudan arama motorunda bir sorgu yapmaya ve sonuçları beklemeye alışkınız. Ama bunu yaparken altta olan her şeyi gerçekten biliyor muyuz?

Google Chrome ile web sayfalarını mobilde olduğu gibi görüntüleyin

Chrome Developer Console

Başta Chrome olmak üzere tüm web tarayıcıları, tüm kullanıcılar için her türlü işleve ve araca sahiptir. Bunlardan biri geliştirme konsolu . Adından da anlaşılacağı gibi, bu, web tasarımcılarının web sitelerinin nasıl çalıştığını görebilmeleri, ön uçta olan her şeyi ayrıntılı olarak bilmeleri ve "anında" sayfada farklı değişiklik ve ayarlamaları test edebilmeleri için tasarlanmış bir konsoldur.

Bu konsolu istediğimiz zaman sadece tuşuna basarak açabiliriz. F12 tuşu klavyemizde. Ayrıca bir sayfada herhangi bir yere sağ tıklayıp ” seçeneğini seçerek de bu konsolu açabiliriz. Denetlemek ” seçeneği veya klavye kısayolu ile Control + Üst Karakter + I. Bu (varsayılan olarak değiştirebilsek de) pencerenin sağ tarafında açılacak ve oradan çok sayıda seçenek görebileceğiz.

Google Chrome - İnternet üzerinden iletişim kurun 1

Yapacağız HTML'nin tamamını görebilmek açtığımız sayfanın, onu oluşturan tüm unsurların, sunucu ile yapılan bağlantıların her birinin, sayfanın performansının, tükettiği hafızanın… Kesinlikle web ile ilgili her şey.

Yapabiliriz koda eleman ekle , sayfadaki herhangi bir noktayı değiştirin, bizi ilgilendirmeyen içeriği ortadan kaldırın, hataları görün, olası darboğazları veya web'in SEO'sunu olumsuz etkileyebilecek sorunları tespit edin… olasılıklar sonsuzdur. Nasıl yanıt verdiğini görmek için konsolunuzdan doğrudan sayfaya kod bile enjekte edebiliriz.

Elbette bu konsoldan yaptığımız değişikliklerin yerel olduğunu unutmamalıyız. Söz konusu web sitesini hacklemiyoruz veya herhangi bir değişikliği kaydetmiyoruz. Sayfayı yeniden yüklemek için, güncellemek için F5'e basmamız yeterlidir ve sayfa orijinal durumuna dönecektir.

Konsolu kapatmak için tekrar F12 tuşunu kullanabiliriz veya bu geliştirme konsolunun sağ üst kısmında bulduğumuz kapat düğmesine tıklamanız yeterlidir.

Bir web sitesinin görüntüleme türünü değiştirin

Bu geliştirme konsolunda bulabileceğimiz en ilginç araçlardan biri, sayfanın yüklenmesini simüle eden cihazın türünü değiştirme olasılığıdır. Varsayılan olarak Chrome, bilgisayarımızın özelliklerini kullanır (yani, sunucuya bizim bir bilgisayar olduğumuzu belirtir ve Ekranın çözünürlüğüne ve oranına bağlı olarak, ilgili sayfayı gösterecektir) sayfayı görüntülemek için. Ancak web duyarlıysa, bu değişebilir.

Bunu yapmak için yapacağımız şey, bir önceki noktada gördüğümüz geliştirme araçlarını açmak ve o bölümün sol üst kısmında görünen küçük bir simgeye bakacağız.

Google Chrome - İnternet üzerinden iletişim kurun 2

Bu simge, web tarayıcısının görünüm türünü hızlı bir şekilde değiştirmemizi sağlar. Üzerine tıkladığımızda nasıl olduğunu görebiliyoruz. sayfanın boyutu değişir , ve öğelerin yüklenme şekli. Olmazsa, yeniden yüklemek için F5'e basmamız gerekebilir.

Google Chrome - İnternet üzerinden iletişim kurun 3

En üstte, bu mobil görünümün çeşitli yönlerini değiştirebileceğimiz bir çubuk görebiliriz. Örneğin, simüle edebiliriz web'in belirli bir cihazda nasıl görüneceği veya yakınlaştırma düzeylerini ayarlayın. Varsayılan olarak gelen seçeneklerin hiçbiri aradığımıza uymuyorsa, ekranın boyutlarını piksel cinsinden manuel olarak da belirtebiliriz.

Google Chrome - İnternet üzerinden iletişim kurun 4

Bulabildiğimiz çok ilginç bir düğme de bilgisayar ekranını döndürmemizi sağlayan düğme. Böylece, kullanıcılar onu yatay modda oynattığında web'in nasıl görüneceğini görebiliriz.

Google Chrome - İnternet üzerinden iletişim kurun 5

İstediğimiz testleri yaptığımızda, basitçe geliştirici konsolunu kapatarak bu moddan çıkabiliyoruz. Yine, doğru şekilde görüntülenmesi için sayfayı yenilememiz gerekebilir.

Chrome uzantıları

Geliştirici konsolunu kullanmanın yanı sıra, Chrome Store'da tamamen ücretsiz bulabildiğimiz bazı uzantıları kullanarak da bunu yapabileceğiz. En iyilerinden bazıları şunlardır:

Mobil Görünüm Değiştirici

Bu uzantı, tek tıklamayla normal görünüm ve mobil görünüm arasında geçiş yapmamızı sağlar. Yüklerken, araç çubuğunda, etkinleştirmek veya devre dışı bırakmak isteyip istemediğimize bağlı olarak bir anahtar görevi gören bir simge oluşturur. Varsayılan olarak bir simülasyonu simüle eder iOS 14 sistem, ancak onu değiştirebilir ve uzantıyı beğenimize göre ayarlayabiliriz.


Duyarlı Görüntüleyici

Geliştiricilerin duyarlı web sitelerinin ne kadar iyi çalıştığını kontrol etmeleri için çok kullanışlı bir başka araç. Bu, aynı anda farklı boyutlarda birkaç ekranı görmemizi sağlar. Bu şekilde, birkaç konfigürasyonu görüntüleyebilir ve her şeyin doğru göründüğünü ve herhangi bir cihaz türünde sorun yaratmadığını kontrol edebiliriz.


Chrome için mobil simülatör

Bu araç, çok sayıda gerçek cihazı simüle etmemizi sağlar (5 android modeller, 15 Apple, 4 tablet ve 4 özel cihaz) her birinin ekran boyutuna göre istenen CSS'ye bağlı olarak sayfaların nasıl göründüğünü görebilmek için.


Duyarlı Web Tasarımı Test Cihazı

Son olarak, bu uzantı, daha az bilinmesine rağmen, bir web sitesinin duyarlı görünümlerinin birkaç farklı parametreye dayalı olarak nasıl çalıştığını kapsamlı bir şekilde test etmemize olanak tanır. Varsayılan olarak en yaygın çözünürlükler ve oranlar dahil olmak üzere çeşitli cep telefonlarıyla test etmemize olanak tanır. Ayrıca bu uzantı, sonuçların daha doğru olması için sunucuya uygun User-Agent'ı gönderir. Çevrimdışı bile çalışır, tüm uzantıların yapmadığı bir şey.