Sayfanızın mobil cihazdaki görünümünü ve performansını 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 dizi özelliğin adıdır. Bu özellikler şunlardır:
Sınırlamalar
Cihaz modunu, sayfanızın mobil cihazdaki görünümünün ve hissinin birinci dereceye yakınlığı olarak düşünebilirsiniz. Cihaz modu ile kodunuzu bir mobil cihazda çalıştırmazsınız. Dizüstü veya masaüstü bilgisayarınızdan mobil kullanıcı deneyimini simüle edebilirsiniz.
Geliştirici Araçları'nın hiçbir zaman simüle edemeyeceği bazı mobil cihaz özellikleri vardır. Örneğin, mobil CPU'ların mimarisi, dizüstü veya masaüstü CPU'ların mimarisinden çok farklıdır. Şüpheye düştüğünüzde en iyi yöntem, sayfanızı bir mobil cihazda yayınlamaktır. Bir sayfa mobil cihazda çalışırken dizüstü veya masaüstü bilgisayarınızdan sayfanın kodunu görüntülemek, değiştirmek, hata ayıklamak ve profil oluşturmak için Uzaktan Hata Ayıklama'yı kullanın.
Cihaz araç çubuğunu aç
Cihaz araç çubuğunu açmak için aşağıdaki adımları uygulayın:
- Geliştirici Araçları'nı açın.
- Üst taraftaki işlem çubuğunda bulunan cihazlar 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 seçeneği Duyarlı değerine ayarlı şekilde görüntü alanında açılır. Boyutlar açılır menüsünü 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. İsterseniz genişlik ve yükseklik kutularına
belirli değerler girebilirsiniz. Bu örnekte, genişlik 480 ve yükseklik 415 olarak ayarlanmıştır.
Alternatif olarak, genişliği aşağıdakilerden birine göre ayarlamak için genişlik hazır ayarları çubuğunu kullanın:
| Mobil S | M Mobil | Geniş mobil cihaz | Tablet | Dizüstü Bilgisayar | Sol dizüstü bilgisayar | 4K |
|---|---|---|---|---|---|---|
| 320 piksel | 375 piksel | 425 piksel | 768 piksel | 1024 piksel | 1.440 piksel | 2560 piksel |
Medya sorgularını göster
Görüntü alanının üzerinde medya sorgusu ayrılma noktalarını göstermek için Diğer seçenekler > Medya sorgularını göster'i tıklayın.
Geliştirici Araçları, artık görüntü alanının üzerinde iki ek çubuk gösteriyor:
max-widthayrılma noktası içeren mavi çubuk.min-widthayrılma noktası içeren turuncu çubuk.
Görüntü alanının genişliğini, ayrılma noktasının tetikleneceği şekilde değiştirmek için ayrılma noktalarını tıklayın.
İlgili @media bildirimini bulmak için ayrılma noktalarını sağ tıklayıp Kaynak kodunda göster'i seçin. Geliştirici Araçları, Düzenleyici'deki ilgili satırda bulunan Kaynaklar panelini açar.
Cihaz piksel oranını ayarla
Cihaz piksel oranı (DPR) donanım ekranındaki fiziksel pikseller ile mantıksal (CSS) pikseller arasındaki orandır. Başka bir deyişle DPR Chrome'a bir CSS pikseli çizmek için kaç ekran pikseli kullanılması gerektiğini bildirir. Chrome, HiDPI (İnç Başına Yüksek Nokta) ekranlarda çizim yaparken DPR değerini kullanır.
DPR değeri ayarlamak için:
Diğer seçenekler
> Cihaz piksel oranı ekle'yi tıklayın.
Görüntü 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 türünü ayarlama
Bir mobil cihazın veya masaüstü cihazın simülasyonunu yapmak 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.
Sonraki tabloda, seçenekler arasındaki farklar açıklanmaktadır. Oluşturma yöntemi, Chrome'un sayfayı mobil veya masaüstü görüntü alanı olarak oluşturup oluşturmayacağını ifade eder. İmleç simgesi, fareyle sayfanın üzerine geldiğinizde gördüğünüz imleç türünü ifade eder. Tetiklenen etkinlikler, sayfayla etkileşimde bulunduğunuzda sayfanın touch mi yoksa click etkinliklerinin mi tetikleneceğini ifade eder.
| Option | Oluşturma yöntemi | İmleç simgesi | Tetiklenen etkinlikler |
|---|---|---|---|
| Mobil | Mobil | Daire | dokun |
| Mobil (dokunmatik) | Mobil | Normal | click |
| Masaüstü | Masaüstü | Normal | click |
| Masaüstü (dokunmatik) | Masaüstü | Daire | dokun |
Cihaza özgü mod
Belirli bir mobil cihazın boyutlarını simüle etmek için Boyutlar listesinden cihazı seçin.
Daha fazla bilgi edinmek için Özel mobil cihaz ekleme başlıklı makaleyi inceleyin.
Görüntü alanını yatay yöne döndürün
Görüntü alanını yatay yöne döndürmek için screen_rotation Döndür'ü tıklayın.
Cihaz araç çubuğunuz darsa Döndür düğmesinin kaybolacağını unutmayın.
Ayrıca, Yönü ayarlama konusuna da bakın.
Çift ekran modunu aç/kapat
Örneğin, Surface Duo gibi bazı cihazlarda iki ekran ve bunları kullanmak için iki yöntem vardır: biri veya her ikisi de etkin durumda.
Çift ve tek ekran arasında geçiş yapmak için araç çubuğunda devices_fold Çift ekran moduna geç'i tıklayın.
Cihazın duruşunu ayarlayın
Örneğin Asus Zenbook Fold gibi bazı cihazların katlanabilir ekranları vardır. Bu tür ekranların duruşu vardır: kesintisiz veya katlanmış. Sürekli duruş "düz" bir konumu ifade eder ve katlanmış olması ekranın bölümleri arasında bir açı oluşturur.
Cihazın 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.
Bu örnekte Geliştirici Araçları, Nest Hub'ın çerçevesini göstermektedir.
Özel mobil cihaz ekleme
Özel cihaz eklemek için:
Cihaz listesini tıklayın ve ardından Düzenle'yi seçin.
Ayarlar 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.
Kendinizinkini ekliyorsanız cihaz için bir ad, genişlik ve yükseklik girin, ardından 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 değerine ayarlanan listedir.
Görüntü alanına geri dönün, 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.
Geliştirici Araçları, cetvelleri görüntü alanının üstünde ve solunda gösterir.
Görüntü alanının genişliğini ve yüksekliğini ayarlamak için belirli işaretlerdeki cetvelleri tıklayın.
Görüntü alanını yakınlaştır
Yakınlaştırmak veya uzaklaştırmak için Yakınlaştırma listesini kullanın.
Ekran görüntüsü al
Görüntü alanında gördüklerinizin ekran görüntüsünü almak için 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 boyutlu ekran görüntüsü yakala'yı seçin.
Ağı ve CPU'yu kısıtlama
Hem ağı hem de CPU'yu daraltmak için Kısayol listesinden Orta katman mobil veya Düşük teknoloji mobil'i seçin.
Orta katmanlı mobil cihaz, hızlı 3G'yi simüle eder ve CPU'nuzu normalden 4 kat daha yavaş olacak şekilde kısıtlar. Düşük özellikli mobil cihaz, yavaş 3G simülasyonu sunar ve CPU'nuzu normalden 6 kat daha yavaş kısıtlar. Kısıtlamanın dizüstü veya masaüstü bilgisayarınızın normal kapasitesiyle göreceli olduğunu unutmayın.
Cihaz araç çubuğunuz darsa Kısıtlama listesinin gizleneceğini unutmayın.
Yalnızca CPU'yu daralt
Ağı değil yalnızca CPU'yu daraltmak için Performans paneline gidin, Yakalama Ayarları'nı tıklayın ve CPU listesinden 4x yavaşlatma, 6x yavaşlatma veya 20 kat yavaşlama'yı seçin.
Yalnızca ağı kısıtlama
CPU'yu değil, yalnızca ağı daraltmak için Ağ paneline gidip Hızlı 3G veya Yavaş 3G'yi seçin.
Alternatif olarak, Command+Üst Karakter+P (Mac) veya Control+Üst Karakter+P (Windows, Linux, ChromeOS) tuşlarına basarak Komut Menüsünü açın, 3G yazıp 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 (Yakalama Ayarları) simgesini tıklayın ve ardından Network (Ağ) listesinden Fast 3G (Hızlı 3G) veya Yavaş 3G seçeneğini belirleyin.
Sensör emülasyonu
Coğrafi konumu geçersiz kılmak, cihaz yönünü ve dokunmaya zorlamak ve boşta kalma durumunu simüle etmek için Sensörler panelini kullanın.
Sonraki bölümlerde, coğrafi konumun geçersiz kılınmasına ve cihaz yönünün nasıl ayarlanacağına dair hızlı bir genel bakış sunulmaktadır. Özelliklerin tam listesi için Cihaz sensörlerini simüle etme bölümüne bakın.
Coğrafi konumu geçersiz kıl
Coğrafi konumu geçersiz kılma kullanıcı arayüzünü açmak için Geliştirici Araçları'nı özelleştir ve kontrol et
seçeneğini tıklayıp Diğer araçlar > Sensörler'i seçin.
Alternatif olarak, Command+Üst Karakter+P (Mac) veya Control+Üst Karakter+P (Windows, Linux, ChromeOS) tuşlarına basarak Komut Menüsü'nü açın, Sensors yazıp Sensörleri Göster'i seçin.
Konum listesindeki hazır ayarlardan birini seçin veya kendi koordinatlarınızı girmek için Diğer... öğesini seçin ya da coğrafi konum bir hata durumundayken sayfanızın nasıl davranacağını test etmek için Konum mevcut değil'i seçin.
Yönü ayarla
Yön kullanıcı arayüzünü açmak için Geliştirici Araçları'nı özelleştir ve kontrol et
seçeneğini tıklayıp Diğer araçlar > Sensörler'i seçin.
Alternatif olarak, Command+Üst Karakter+P (Mac) veya Control+Üst Karakter+P (Windows, Linux, ChromeOS) tuşlarına basarak Komut Menüsü'nü açın, Sensors yazıp Sensörleri Göster'i seçin.
Kendi alfa, beta ve gama değerlerinizi ayarlamak için Yön listesindeki hazır ayarlardan birini seçin veya Özel yön'ü seçin.
