Chrome için Duyarlı Müfettiş Duyarlı Tasarım İçin Harika Bir Öğrenme Aracıdır

click fraud protection

Chrome, geliştirici araçlarında çok büyük değildir ve Firefox'un çoğu geliştirici için go-to tarayıcı olmasının nedenlerinden biri de budur. Bununla birlikte, Chrome'u kullananlar için bu konuda onlara yardımcı olacak birçok uzantı var. Duyarlı Müfettiş Mozilla'nın sunduğu Duyarlı Tasarım Görünümü'ne haklı olarak rakip olabilecek bir Chrome uzantısıdır Firefox 15. Duyarlı Müfettiş, ikisi bir arada bir araçtır; bir web sitesinin optimize edildiği ekran boyutlarını gösterir ve açılır pencereden farklı bir boyuta geçmenizi sağlar. Ayrıca, bu boyutlardan herhangi birine göre ayarlanmış bir web sayfasının ekran görüntülerini alabilir. Belirli ekran boyutları için zaten optimize edilmiş web sitelerinde, bundan sorumlu olan CSS kodunu görüntüleyerek duyarlı tasarım geliştiricileri için harika bir öğrenme aracı haline getirebilirsiniz.

Duyarlı Denetçi, bir açılır pencere açan URL çubuğunun yanına kare bir düğme ekler. Uzantı, şu anda yüklü olan web sitesinin geçiş çubukları için optimize edildiği tüm ekran boyutlarını gösterir. Ekran boyutu her çubuğun sonuna yazılır ve üstteki piksel ölçeği size farklı ekran boyutlarını gösterir. Farenizi ölçeğin üzerine getirin ve her bir kalibrasyon çizgisi için size temsil ettiği ekran boyutunu gösteren bir pop görünecektir. Aynı açılır pencerede, bir yeniden boyutlandırma düğmesi ve bir kamera düğmesi bulunur. Birincisine tıklamak tarayıcı pencerenizi otomatik olarak bu genişliğe yeniden boyutlandırır. İsterseniz, ekran görüntüsünü almak için kamera düğmesini tıklayabilirsiniz. Ekran görüntüsü yerel sürücünüze kaydedilebilir veya Behance.net'e yüklenebilir. Daha ince bir piksel ölçeğine ihtiyaç duyuyorsanız, büyütmek için yakınlaştır düğmesini tıklayın.

instagram viewer

Responsive inspector ekran görüntüsü

Görüntüleme seçeneklerini kodlamak için kullanılan CSS'yi görüntülemek için, farenizi web sitesinin optimize edildiği ekran boyutunu temsil eden çubuklardan birinin üzerine getirin ve sonunda bir {} düğmesi göreceksiniz. CSS kodunu yeni bir sekmede görüntülemek için tıklayın. Kod doğrudan düzenlenebilir değildir, ancak değişiklik yapmak için kopyalayabilir veya inceleme aracını kullanabilirsiniz. Duyarlı Müfettiş, Firefox'taki Duyarlı Tasarım Görünümünü oldukça iyi taklit eder; aslında, uzantının aracın üzerinde bir kesim olduğunu söylemek yanlış olmaz. Firefox size ekran boyutu ön ayarları verdiğinde, Duyarlı Müfettiş size tüm ölçeği ve çok fazla özgürlük sunar ve ardından ekran görüntüsü aracı vardır. Hazır ayarlar, Duyarlı Müfettiş'i çok daha kullanışlı hale getirecektir ve eklenmesi gerekir. Bunlar olmasa bile, uzantı son derece iyi çalışıyor.

Chrome Web Mağazası'ndan Duyarlı Denetçi Yükleme

watch instagram story