Sayfanızın mobil cihazda nasıl göründüğünü ve performans gösterdiğini tahmin etmek için cihaz modunu kullanın.
Genel Bakış
Cihaz modu, Chrome Geliştirici Araçları'nda mobil cihazları simüle etmenize yardımcı olan bir özellikler koleksiyonunun adıdır. Bu özellikler şunlardır:
Sınırlamalar
Cihaz modunu, sayfanızın mobil cihazda nasıl göründüğüne ve nasıl bir deneyim sunduğuna dair birinci dereceden bir yaklaşım olarak düşünebilirsiniz. Cihaz modunda kodunuzu mobil cihazda çalıştırmazsınız. Mobil kullanıcı deneyimini dizüstü veya masaüstü bilgisayarınızda simüle edersiniz.
Mobil cihazların bazı yönlerini DevTools hiçbir zaman simüle edemez. Örneğin, mobil CPU'ların mimarisi, dizüstü veya masaüstü CPU'ların mimarisinden çok farklıdır. Emin olmadığınızda en iyi seçenek, sayfanızı mobil cihazda çalıştırmaktır. Bir sayfanın kodu mobil cihazda çalışırken dizüstü veya masaüstü bilgisayarınızdan bu kodu görüntülemek, değiştirmek, hata ayıklamak ve profillemek için uzaktan hata ayıklamayı kullanın.
Cihaz araç çubuğunu açma
Cihaz araç çubuğunu açmak için aşağıdaki adımları uygulayın:
- Geliştirici Araçları'nı açın.
- Üstteki işlem çubuğunda bulunan Cihaz araç çubuğunu aç/kapat'ı tıklayın.
Mobil görüntü alanını simüle etme
Varsayılan olarak cihaz araç çubuğu, Boyutlar'ın Duyarlı olarak ayarlandığı görüntü alanında açılır. Boyutlar açılır listesini kullanarak belirli bir mobil cihazın boyutlarını simüle edebilirsiniz.
Duyarlı Görüntü Alanı Modu
Görüntü alanını istediğiniz boyutlara göre yeniden boyutlandırmak için tutma yerlerini sürükleyin. Alternatif olarak, genişlik ve yükseklik kutularına belirli değerler girebilirsiniz. Bu örnekte genişlik 480, yükseklik ise 415 olarak ayarlanmıştır.
Alternatif olarak, genişliği aşağıdaki seçeneklerden birini tıklayarak ayarlamak için genişlik hazır ayarları çubuğunu kullanın:
| Mobile S | Mobile M | Mobile L | Tablet | Dizüstü bilgisayar | Geniş dizüstü bilgisayar | 4K |
|---|---|---|---|---|---|---|
| 320 piksel | 375 piksel | 425 piksel | 768 piksel | 1024 piksel | 1440 piksel | 2560 piksel |
Medya sorgularını göster
Medya sorgusu kesme noktalarını görüntü alanınızın üzerinde göstermek için Diğer seçenekler > Medya sorgularını göster'i tıklayın.
Diğer seçenekler > Medya sorgularını göster'i tıklayın.
DevTools artık görüntü alanının üzerinde iki ek çubuk gösteriyor:
max-widthkesme noktası içeren mavi çubuk.min-widthkesme noktası içeren turuncu çubuk.
Görüntü alanının genişliğini, kesme noktasının tetikleneceği şekilde değiştirmek için kesme noktaları arasında tıklayın.
İlgili @media bildirimini bulmak için kesme noktaları arasında sağ tıklayın ve Kaynak kodunda göster'i seçin. Geliştirici Araçları, Kaynaklar panelini Düzenleyici'deki ilgili satırda açar.
Cihaz piksel oranını ayarlama
Cihaz piksel oranı (DPR), donanım ekranındaki fiziksel pikseller ile mantıksal (CSS) pikseller arasındaki orandır. Diğer bir deyişle, DPR, Chrome'a bir CSS pikselini çizmek için kaç ekran pikseli kullanacağını söyler. Chrome, HiDPI (yüksek inç başına nokta sayısı) ekranlarda çizim yaparken DPR değerini kullanır.
Bir DPR değeri ayarlamak için:
Diğer seçenekler > Cihaz piksel oranı ekle'yi tıklayın.
Görünüm alanının üst kısmındaki işlem çubuğunda, yeni DPR açılır menüsünden bir DPR değeri seçin.
> Cihaz piksel oranı ekle'yi tıklayın.Cihaz türünü ayarlama
Mobil cihazı veya masaüstü cihazı simüle etmek için Cihaz Türü listesini kullanın.
En üstteki işlem çubuğunda listeyi göremiyorsanız Diğer seçenekler > Cihaz türü ekle'yi seçin.
> Cihaz türü ekle'yi seçin.Aşağıdaki tabloda seçenekler arasındaki farklar açıklanmaktadır.
Oluşturma yöntemi, Chrome'un sayfayı mobil veya masaüstü görünüm alanı olarak oluşturup oluşturmadığını ifade eder. İmleç simgesi, imleci sayfanın üzerine getirdiğinizde gördüğünüz imleç türünü ifade eder. Tetiklenen etkinlikler, sayfayla etkileşim kurduğunuzda sayfanın touch veya click etkinliklerini tetikleyip tetiklemediğini ifade eder.
| Seçenek | Oluşturma yöntemi | İmleç simgesi | Tetiklenen etkinlikler |
|---|---|---|---|
| Mobil | Mobil | Daire | dokun |
| Mobil (dokunma yok) | Mobil | Normal | click |
| Masaüstü | Masaüstü | Normal | click |
| Masaüstü (dokunmatik) | Masaüstü | Daire | dokun |
Cihaza özel mod
Belirli bir mobil cihazın boyutlarını simüle etmek için Boyutlar listesinden cihazı seçin.
Daha fazla bilgi için Özel mobil cihaz ekleme başlıklı makaleyi inceleyin.
Görünüm alanını yatay yönde döndürme
Görünüm alanını yatay yönde döndürmek için Döndür'ü tıklayın.
Cihaz araç çubuğunuz darsa Döndür düğmesinin kaybolacağını unutmayın.
düğmesinin kaybolacağını unutmayın.
Ayrıca Yönü ayarlama başlıklı makaleyi de inceleyin.
Çift ekran modunu açma/kapatma
Örneğin Surface Duo gibi bazı cihazlarda iki ekran ve bu ekranları kullanmanın iki yolu vardır: bir veya iki ekranı etkinleştirerek.
Çift ekran ve tek ekran arasında geçiş yapmak için araç çubuğunda Çift ekran modunu aç/kapat'ı tıklayın.
Cihazın duruşunu ayarlama
Örneğin, Asus Zenbook Fold gibi bazı cihazların ekranları katlanabilir. Bu tür ekranların duruşu sürekli veya katlanmış olabilir. Sürekli duruş, "düz" bir konumu ifade eder ve katlandığında ekran bölümleri arasında bir açı oluşur.
Cihaz duruşunu ayarlamak için araç çubuğundaki ilgili açılır menüden Sürekli veya Katlanmış'ı seçin.
Cihaz çerçevesini göster
Nest Hub gibi belirli bir mobil cihazın boyutlarını simüle ederken, görüntü alanının etrafındaki fiziksel cihaz çerçevesini göstermek için Diğer seçenekler > Cihaz çerçevesini göster'i seçin.
> Cihaz çerçevesini göster'i seçin.
Bu örnekte, Geliştirici Araçları Nest Hub'ın çerçevesini gösteriyor.
Özel bir mobil cihaz ekleme
Özel cihaz eklemek için:
Cihaz listesini tıklayın ve Düzenle'yi seçin.
Ayarlar > Cihazlar sekmesinde, desteklenen cihazlar listesinden bir cihaz seçin veya kendi cihazınızı eklemek için Özel cihaz ekle'yi tıklayın.
Kendi cihazınızı ekliyorsanız cihaz için bir ad, genişlik ve yükseklik girip Ekle'yi tıklayın.
Cihaz piksel oranı, kullanıcı aracısı dizesi ve cihaz türü alanları isteğe bağlıdır. Cihaz türü alanı, varsayılan olarak Mobil olarak ayarlanan listedir.
Görünüm penceresine geri dönün ve Boyutlar listesinden yeni eklenen cihazı seçin.
Cetvelleri göster
Cetvelleri görmek için Diğer seçenekler > Cetvelleri göster'i tıklayın. Cetvellerin boyutlandırma birimi pikseldir.
> Cetvelleri göster'i tıklayın. Cetvellerin boyutlandırma birimi pikseldir.
DevTools, görüntü alanının üstünde ve solunda cetveller gösterir.
Görüntü alanının genişliğini ve yüksekliğini ayarlamak için cetvelleri belirli işaretlerde tıklayın.
Görüntü alanını yakınlaştırma
Yakınlaştırmak veya uzaklaştırmak için Yakınlaştır listesini kullanın.
Ekran görüntüsü alma
Görünüm alanında gördüğünüz içeriğin ekran görüntüsünü almak için Diğer seçenekler > Ekran görüntüsü yakala'yı tıklayın.
Diğer seçenekler > Ekran görüntüsü yakala'yı tıklayın.
Görüntü alanında görünmeyen içerik de dahil olmak üzere tüm sayfanın ekran görüntüsünü almak için aynı menüden Tam boy ekran görüntüsü al'ı seçin.
Cihaza özel modda ekran görüntüsü alırken cihaz çerçevesini eklemek için önce Cihaz çerçevesini göster'i seçin, ardından daha önce belirtildiği gibi Ekran görüntüsü al'ı tıklayın.
Geliştirici Araçları ile ekran görüntüsü almanın diğer yollarını öğrenmek için Geliştirici Araçları ile ekran görüntüsü almanın 4 yolu başlıklı makaleyi inceleyin.
Ağı ve CPU'yu kısıtlama
Hem ağ hem de CPU'yu sınırlamak için Sınırlama listesinden Orta seviye mobil veya Düşük seviye mobil'i seçin.
Orta segment mobil, hızlı 3G'yi simüle eder ve CPU'nuzu normalden 4 kat daha yavaş olacak şekilde kısıtlar. Alt düzey mobil, yavaş 3G'yi simüle eder ve CPU'nuzu normalden 6 kat daha yavaş çalıştırır. Kısıtlamanın, dizüstü veya masaüstü bilgisayarınızın normal kapasitesine göre yapıldığını unutmayın.
Cihaz araç çubuğunuz darsa Sınırlama listesinin gizleneceğini unutmayın.
Yalnızca CPU'yu kısıtlama
Yalnızca CPU'yu kısıp ağı kısıtlamamak için Performans paneline gidin, Ayarları Yakala'yı 
tıklayın ve CPU listesinden 4 kat yavaşlatma, 6 kat yavaşlatma veya 20 kat yavaşlatma'yı seçin.
Yalnızca ağı kısıtla
Yalnızca ağın hızını düşürmek için Ağ paneline gidin ve Hız Sınırlama listesinden Hızlı 3G veya Yavaş 3G'yi seçin.
Alternatif olarak, Komut Menüsü'nü açmak için Command+Shift+P (Mac) veya Control+Shift+P (Windows, Linux, ChromeOS) tuşlarına basın, 3G yazın ve Hızlı 3G kısıtlamasını etkinleştir veya Yavaş 3G kısıtlamasını etkinleştir'i seçin.
Ağ sınırlamayı Performans panelinden de ayarlayabilirsiniz. Capture Settings'i (Yakalama Ayarları) tıklayın ve ardından Network (Ağ) listesinden Fast 3G (Hızlı 3G) veya Slow 3G'yi (Yavaş 3G) seçin.
ve ardından Network (Ağ) listesinden Fast 3G (Hızlı 3G) veya Slow 3G'yi (Yavaş 3G) seçin.
Sensörleri taklit etme
Coğrafi konumu geçersiz kılmak, cihaz yönünü simüle etmek, dokunmaya zorlamak ve boşta kalma durumunu taklit etmek için Sensörler panelini kullanın.
Sonraki bölümlerde, coğrafi konumun nasıl geçersiz kılınacağı ve cihaz yönünün nasıl ayarlanacağı hakkında kısa bir açıklama yer almaktadır. Özelliklerin tam listesi için Cihaz sensörlerini taklit etme başlıklı makaleyi inceleyin.
Coğrafi konumu geçersiz kılma
Coğrafi konum geçersiz kılma kullanıcı arayüzünü açmak için Geliştirici Araçları'nı özelleştirme ve kontrol etme'yi tıklayın, ardından Diğer araçlar > Sensörler'i seçin.
tıklayın, ardından Diğer araçlar > Sensörler'i seçin.
Alternatif olarak, Command+Shift+P (Mac) veya Control+Shift+P (Windows, Linux, ChromeOS) tuşlarına basarak Komut Menüsü'nü açın, Sensors yazın ve Sensörleri Göster'i seçin.
Konum listesinden hazır ayarlardan birini seçin veya Diğer...'i seçerek kendi koordinatlarınızı girin ya da Konum kullanılamıyor'u seçerek coğrafi konumlandırma hata durumundayken sayfanızın nasıl davrandığını test edin.
Yönü ayarlama
Yönlendirme kullanıcı arayüzünü açmak için Geliştirici Araçları'nı özelleştirin ve kontrol edin'i tıklayın, ardından Diğer araçlar > Sensörler'i seçin.
tıklayın, ardından Diğer araçlar > Sensörler'i seçin.
Alternatif olarak, Command+Shift+P (Mac) veya Control+Shift+P (Windows, Linux, ChromeOS) tuşlarına basarak Komut Menüsü'nü açın, Sensors yazın ve Sensörleri Göster'i seçin.
Yön listesinden hazır ayarlardan birini seçin veya kendi alfa, beta ve gama değerlerinizi ayarlamak için Özel yön'ü seçin.
