06/06
Safari 9'da Duyarlı Tasarım Modunu Etkinleştirin ve Kullanın
Günümüz dünyasında bir web geliştiricisi olmak, bazen göz korkutucu bir görev olduğunu kanıtlayabilecek bir cihaz ve platformlar kümesinin desteklenmesi anlamına gelir. En son Web standartlarına bağlı kalarak en iyi tasarlanmış kodla bile, web sitenizin bazı bölümlerinin belirli aygıtlarda veya çözünürlüklerde olmasını istediğiniz şekilde görmeyebilir veya davranmayabilir. Bu kadar geniş bir senaryo dizisini destekleme zorluğuyla karşı karşıya kaldığınızda, doğru simülasyon araçlarına sahip olmak sizin için çok değerli olabilir.
Mac kullanan birçok programcıdan biriyseniz, Safari'nin geliştirici araç seti her zaman kullanışlı hale gelmiştir. Safari 9'un piyasaya sürülmesiyle, bu işlevin genişliği, özellikle iPad, iPhone ve iPod touch yapılarının yanı sıra sitenizin çeşitli ekran çözünürlüklerinde nasıl işleyeceğini önizlemenize olanak sağlayan Duyarlı Tasarım Modu'ndan dolayı önemli ölçüde genişledi.
Bu eğitimde, Duyarlı Tasarım Modunun nasıl etkinleştirileceği ve bunun yanı sıra geliştirme ihtiyaçlarınız için nasıl kullanılacağı anlatılmaktadır.
Öncelikle Safari tarayıcınızı açın.
02/06
Safari Tercihleri
Ekranın en üstünde bulunan tarayıcı menüsünde Safari'yi tıklayın. Açılır menü görüntülendiğinde, yukarıdaki örnekte bulunan Tercihler seçeneğini_seçmiş olarak seçin.
Yukarıda belirtilen menü öğesi yerine aşağıdaki klavye kısayolunu kullanabilirsiniz: COMMAND + COMMA (,)
03/06
Geliştir Menüsünü Göster
Tarayıcı pencerenizin üzerine gelen Safari'nin Tercihleri iletişim kutusu görüntülenmelidir. Öncelikle, bir dişli tarafından temsil edilen ve pencerenin sağ üst köşesinde bulunan Gelişmiş icon_'a tıklayın.
Tarayıcının Gelişmiş Tercihleri şimdi görünür olmalıdır. Altta, menü çubuğundaki Show Develop (Görüntüle Geliştir) etiketli ve yukarıdaki örnekte bulunan bir onay kutusuyla birlikte bir seçenek bulunur. Bu menüyü etkinleştirmek için onay kutusuna bir kez tıklayın.
04/06
Duyarlı Tasarım Moduna Girin
Geliştirmenin etiketli ekranın üst kısmında bulunan Safari menüsünüzde yeni bir seçenek bulunmalıdır. Bu seçeneğe tıklayın. Açılır menü görüntülendiğinde, yukarıdaki örnekte Enter'a duyarlı Duyarlı Tasarım Modunu seçin.
Belirtilen menü öğesi yerine aşağıdaki klavye kısayolunu kullanabilirsiniz: OPTION + COMMAND + R
05/06
Duyarlı Tasarım Modu
Aktif Web sayfası şimdi yukarıdaki örnekte gösterildiği gibi Duyarlı Tasarım Modunda gösterilmelidir. IPhone 6 ya da 800 x 600 gibi mevcut ekran çözünürlüklerinden biri olarak listelenen iOS aygıtlarından birini seçerek, sayfanın bu cihazda veya o ekran çözünürlüğünde nasıl işleyeceğini hemen görebilirsiniz.
Gösterilen cihazlara ve çözünürlüklere ek olarak, Safari'yi, farklı bir tarayıcıda olduğu gibi, farklı bir kullanıcı aracısı gibi simüle etmek için, çözünürlük simgelerinin hemen üstünde yer alan açılır menüyü tıklatarak da talimat verebilirsiniz.
06/06
Menüyü Geliştir: Diğer Seçenekler
Duyarlı Tasarım Moduna ek olarak, Safari 9'un Develop menüsü, aşağıda listelenen bazı diğer yararlı seçenekler sunmaktadır.
- Sayfayı Birlikte Aç: Etkin Web sayfasını Mac'inizde yüklü başka bir tarayıcıda açmanıza izin verir.
- Kullanıcı Aracısı: Kullanıcı aracısını değiştirmek, Web sunucularının tarayıcınızı Safari 9'dan başka bir şey olarak tanımlamasına neden olur.
- Web Denetleyicisini Bağlayın: Safari 9'un Web Denetçisi, CSS bilgilerini, DOM metriklerini ve yapısını ve yerel kaynak kodunu göz önünde bulundurarak tüm Web sayfasının kaynaklarını görüntüler.
- Hata Konsolu'nu Göster: Geliştirici Menüsünde en çok kullanılan seçeneklerden biri olan bu konsol, JavaScript, HTML ve XML hataları ve uyarıları görüntüler.
- Sayfa Kaynağını Göster: Etkin Web sayfasının kaynak kodunu görüntülemenizi ve aramanızı sağlar.
- Sayfa Kaynaklarını Göster: Bu seçeneğin seçilmesi, geçerli sayfadan belgeleri, komut dosyalarını, CSS ve diğer kaynakları görüntüler.
- Snippet Düzenleyicisini Göster: Tam bir sayfanın aksine, kod parçalarını düzenleme ve yürütme yeteneği sağlar. Bu özellik test açısından çok kullanışlıdır.
- Uzantı Oluşturucuyu Göster: Kodunuzu buna göre paketleyerek ve meta verileri ekleyerek kendi Safari uzantılarınızı oluşturmanıza olanak tanır.
- Zaman Çizelgesi Kaydı Başlat: WebKit Müfettişinde görüntülenebilir, ağ istekleri, JavaScript yürütme, sayfa oluşturma ve kullanıcı tanımlı bir dönem için diğer etkinlikler de dahil olmak üzere bir dizi öğeyi kaydeder.
- Boş Önbellekler: Bu seçeneğe tıklamak, yalnızca standart web sitesi önbellek dosyalarını değil, tüm depolanmış önbellekleri Safari içinde siler.
- Önbellekleri Devre Dışı Bırak: Önbelleğe alma devre dışı bırakıldığında, yerel önbelleğin kullanılmasına karşılık bir erişim isteği her yapıldığında kaynaklar bir web sitesinden indirilir.
- Akıllı Arama Alanından JavaScript'e İzin Ver: Güvenlik nedenleriyle varsayılan olarak devre dışı bırakılmış olan bu özellik, javascript içeren URL'leri girmenize izin verir : Safari'nin adres çubuğuna.
- SHA-1 Sertifikalarını Güvenli Olmayan Şekilde Tedavi Edin: Güvenli Karma Algoritması için kısa, SHA-1 karma işlevi orijinalinden daha az güvenli olduğu kanıtlanmıştır. Bu nedenle bu seçenek Safari 9'da eklenmiştir.
İlgili Okuma
Bu eğiticiyi yararlı bulduysanız, diğer Safari 9 adımlarımıza göz atmayı unutmayın.
- Web Sitesi Push Bildirimlerini Yönetme
- Bir Web Sayfasını PDF Dosyasına Dışa Aktarma
- Safari'yi Otomatik Olarak Güncelleştirmek için 9 Eklenti Nasıl Yapılandırılır
- Sabitlenmiş Siteler Özelliği Nasıl Kullanılır?