Google Chrome Kullanarak Web Sitenizi Farklı Cihazlarda Önizleme

Bir web sitesi oluşturduğunuzda, onun duyarlı olmasını ve farklı ekran boyutlarına uyum sağlamasını istersiniz. Bunu test etmenin bir yolu, Google Chrome'un yerleşik geliştirici araçlarını kullanmaktır.

Chrome'un DevTools'u, web sitenizin farklı yönlerinde hata ayıklamanıza olanak tanır. Bu, HTML kaynak kodunu ve CSS'yi değiştirmeyi ve önizlemeyi içerir. Ayrıca, istemci tarafı JavaScript kodunda hata ayıklamanıza ve ağ trafiğini görüntülemenize olanak tanır.

DevTools ayrıca web sitenizi farklı cihazlarda önizleme seçeneğine de sahiptir. Buna farklı türde mobil cihazlar, iPad'ler, tabletler ve daha fazlası dahildir.

Google Chrome'da Cihaz araç çubuğunu açmak için, Chrome Geliştirici Araçları penceresi:

1. Bir web sitesi açın.
2. Sayfaya sağ tıklayın ve tıklayın İncelemek.
3. Chrome DevTools penceresi açılacaktır. Tarayıcınızın yanına veya altına veya yeni bir pencere olarak açılabilir.
4. Pencerenin sol üst köşesinde iki simge vardır. Farklı boyutlarda birden fazla cihazı gösteren simgeye tıklayın.
5. Ekran, web sitesinin bir mobil cihazda nasıl görüneceğini size gösterecek şekilde değişecektir.

Farklı Cihazlar Arasında Nasıl Geçiş Yapılır?

Farklı cihazlar arasında geçiş yapmak için cihaz araç çubuğunun üst kısmındaki açılır menüyü kullanın.

1. Araç çubuğunun en üst kısmı, web sitenizi şu anda ne tür bir cihazda görüntülediğinizi gösterecektir. Listeden başka bir cihaz seçmek için açılır menüyü tıklayın.
2. Mevcut bir cihazı seçmek yerine, web sitesini duyarlı modda görüntülemeyi seçebilirsiniz. Açılır menüyü tıklayın ve duyarlı seçenek.
3. Açılır menünün yanında, bir cihazın özel genişliğini ve yüksekliğini girmeyi de seçebilirsiniz.
4. Genişlik ve yükseklik yazmak yerine, boyutu ayarlamak için pencerenin köşelerini tıklayıp sürükleyebilirsiniz.

Özel Cihaz Nasıl Eklenir

Özel bir genişlik ve yükseklik kaydetmek isterseniz, özel bir cihaz ekleyebilirsiniz. Cihaz araç çubuğu, cihazlar için açılır menüde yeni cihazınızı görüntüler.

1. Tüm cihazları listeleyen açılır menüyü tıklayın.
2. Tıklamak Düzenlemek.
3. Ayarlar kenar çubuğunun altında, cihazlar sekmesi seçildi. Burada, aralarından seçim yapabileceğiniz daha fazla cihazın listesini de görüntüleyebilirsiniz.
4. Tıklamak Özel cihaz ekle.
5. Cihaz için bir ad, genişlik ve yükseklik girin. Bir mobil veya masaüstü cihaz olup olmadığı gibi cihaz türünü de seçtiğinizden emin olun. genişletirseniz Kullanıcı aracısı istemci ipuçları seçeneği, cihaz modeli, markası veya sürümü gibi diğer ayrıntıları ekleyebilirsiniz.
6. Tıklamak Ekle.
7. Tüm cihazları listeleyen açılır menüye geri dönün. Yeni özel cihazınızı listede göreceksiniz.
8. Özel cihaz sayfasına geri dönerek bu ayrıntıları daha sonra tekrar düzenleyebilirsiniz. Tıkla Düzenle Düzenlemeye başlamak için cihazınızın adının yanındaki düğmeyi tıklayın.

Çeşitli nedenlerle web sitenizi farklı cihazlarda ve ekran boyutlarında önizleyebilmeniz çok faydalıdır.

İlk olarak, web sitenizin performansını farklı cihazlarda test edebilirsiniz. Bazı cep telefonları diğerlerinden daha yüksek ağ hızlarına veya CPU kısıtlamalarına sahip olabilir.

Cihaz araç çubuğu, farklı ağ hızı seçenekleri arasında geçiş yapmanızı sağlar. Bu, bir sunucuya yapılan herhangi bir aramanın hızını test etmenize veya web sitenizdeki verilerin yüklenmesini ve işlenmesini test etmenize olanak tanır.

Ek olarak, tasarımın belirli bir cihazda nasıl göründüğünü UI açısından da görüntüleyebilirsiniz. kullanıyorsanız CSS medya sorguları, beklediğiniz gibi çalışıp çalışmadıklarını kontrol etmek için bu aracı kullanabilirsiniz.

Web sitenizin farklı ekran boyutlarına nasıl uyum sağladığını test etmek ve web sitenizin yanıt verdiğinden emin olmak için Google Chrome'un DevTools penceresini kullanabilirsiniz. Web sitenizin performansını ve medya sorgularınızın beklendiği gibi çalışıp çalışmadığını test etmek için de kullanabilirsiniz.

Google Chrome'un DevTools'unu başka amaçlar için de kullanabilirsiniz. Öğe penceresinin Stiller sekmesi altında CSS'yi değiştirerek herhangi bir CSS sorununu ayıklamak için kullanabilirsiniz. Bu, kodlama iş akışınızı hızlandırabilecek herhangi bir CSS değişikliğini hemen görmenizi sağlar.

CSS Hatalarını Ayıklamak için Google Chrome Nasıl Kullanılır?

Sonrakini Oku