Web Geliştiricileri İçin Temel Firefox Araçlarına Bir Bakış

Firefox uzun süredir web geliştirme için tercih edilen tarayıcı olmuştur. İşi yapmak için çok sayıda faydalı eklenti var. Bu yazıda, web geliştirme yapacaksanız yüklenmesinin zorunlu olduğunu düşündüğüm birkaç eklentiyi inceleyeceğiz. Ayrıca, bu eklentilerde yardımcı olabilecek bazı özellikleri ortaya çıkaracağız..

Her şeyden önce, Firebug'u yüklememiz gerekiyor..

kundakçı

Firebug, web geliştirme için kurulması gereken bir eklentidir. Firebug'u nereden alacağınızı bilmediğinizi varsayarak buraya yükleyebilirsiniz. Muhtemelen, etkinleştirilmeden önce Firefox'unuzu yeniden başlatmanız gerekir..

Bundan sonra, Firebug’u aşağıdaki yollardan biriyle görüntüleyebilirsiniz: Araçlar> Web Geliştiricileri> Firebug, web sayfasına sağ tıklayın ve seçin “Firebug ile Eleman İnceleme”.

Alternatif olarak, Firefox'ta bir Firebug simgesi bulabilir ve üzerine tıklayabilirsiniz, bu firebug penceresini gösterir;

Firebug ile tamamen aynı Chrome Geliştiricileri Araçları. HTML yapısını ve stillerini görmek için bir panel ve hataları, uyarıları ve günlükleri görmek için bir Konsol panelini içerir. Ancak, yararlı bulabileceğiniz umuduyla birkaç ipucum daha var.

Kutu Boyutunu Ayarlama

HTML öğesi, kenar boşluğu, dolgu ve nesne boyutundan (genişlik / yükseklik) oluşan CSS kutu modelinden oluşur. Bu özellikleri değiştirmemiz gereken zamanlar olabilir. Bu durumda, değişmesini istediğiniz öğelerden birini seçebilir ve ardından düzen panel.

Bu panelde, CSS kutu modelinin bir resmini, bilgileri de dahil olmak üzere Genişlik ve yükseklik. Bu iki özellik CSS'de belirtilmese de, Bu araç değeri belirlemek için yeterince zeki. Onları değiştirmeniz gerekiyorsa, değeri tıklatarak değeri artırmak veya azaltmak için yukarı veya aşağı ok tuşlarını kullanabilirsiniz..

Hesaplanan stiller

Birçok durumda, neden belirli stillerin uygulanmadığını merak ediyorsunuzdur. En kolay ve daha hızlı yollardan biri, özellikle de binlerce stil çizginiz varsa, onu incelemek. Hesaplanan Stil panel. Bu örnek bağlantı etiketi metin renginin üzerine yazıldığını gösterir. .buton sınıf, arka plan .buton sınıfın üzerine yazılır .button.add.

Yazı Tipi Ailesi'ni inceleme (kolay yol)

Muhtemelen sık sık böyle bir şey bulmak font ailesi çeşitli yazı tipi aileleri ile CSS'deki özellik. Ne yazık ki, bu bize özellikle tarayıcının hangi yazı tipini aldığını söylemez. Tanımlamayı kolaylaştırmak için bu Firebug uzantısını yani FireFontFamily.

Kurulum tamamlandıktan sonra web sayfanızı yükleyin ve şimdi hangi font ailesinin uygulandığını açıkça görebiliyoruz. Bizim durumumuzda aslında Helvetica Neue (bakınız atış).

Performans Analizi

Bu kibarlık olabilir, ancak Site Hızı artık web sitesi kalitesine karar vermede Google parametrelerinden (algoritması) biri; daha hızlı yüklenen web sitesinin içerik olarak iyi gelişmiş ve üst sıralarda bulunduğu düşünülmektedir. Yani hız göz ardı edilmesi gereken bir şey değil.

Net Panel

Web sitenizin performansını denetlemek için ziyaret etmeniz gerekebilecek ilk yer Ağ panel. Bu panel, yüklendiğinde web sitenizin HTTP isteğini kaydeder. Aşağıdaki ekran görüntüsü yükleyen bir web sayfasını göstermektedir 42 istek ve sürer 4.36 saniye yüklemek için.

HTTP isteğini HTML, CSS ve Görüntüler gibi türlerine göre sıralayabilirsiniz..

YSlow!

Ayrıca, ayrıca yükleyebilirsiniz YSlow, Firebug için Yahoo! 'dan bir eklenti. Etkinleştirildikten sonra, Yslow adlı özel olarak ek bir panel bulacaksınız.!.

Benzer Ağ panel, Yslow! yüklenirken web sayfası performanslarını kaydedecek, ancak daha sonra web sayfasının neden yavaş olduğunu ve bu sorunu çözmek için ne yapabileceğimizi de söyleyecektir. Bu örnekte, bir web sayfasına bir test yapıyoruz ve puanlandı Genel performans için 86, hangi tamam kabul edilir.

Sayfa Hızı

Alternatif olarak, Sayfa Hızını Google’dan da yükleyebilirsiniz. Benzer YSlow!, Test sonucunun biraz farklı olmasına rağmen, web sitesinin hız performansını test ediyor. Bu örnek aynı web sayfasını göstermektedir Sayfa Hızına göre 82 attı.

Web Geliştirici Araçları

Web Geliştiricileri Araçları, açıkça web geliştiricileri içindir ve bu araç çubuğunda paketlenmiş olan birçok özelliğe sahiptir. Ancak bu aşağıda benim favorilerimden biri.

Görüntü Muayene

Web sayfasından resim bilgisi almamız gerekebilir. İnsanların bunu tarayıcıda tökezleyerek veya görüntüyü sağ tıklatarak yaptıklarını görüyorum. Resim Bilgilerini Görüntüle, bunun gibi:

Fakat birçok görüntüden bilgiyi edinmemiz gerektiğinde bu yol oldukça verimli değil. Bu durumda, biz kullanabiliriz Görüntüler eklentiden gelen özellik. Bu özelliğe araç çubuğundaki Görüntü menüsünden kolayca erişilebilir.

Ve bu örnek, görüntü boyutunu ve görüntü dosyası boyutunu aynı anda nasıl gösterdiğimizi gösterir:

Firefox Dahili Araçları

Son sürümlerde, Firefox web geliştiricileri için yerleşik özelliklerini büyük ölçüde geliştirdi, bazıları:

Yerel Muayene Elemanı

Bu yerli Öğeyi İncele Firefox gelen benzer görünebilir “Firebug'da Eleman İnceleme”, ama aslında farklı şekillerde davranıyor.

Bu sefer, bu özellikten daha fazla geçmeyeceğim, çünkü temel olarak Firebug HTML ve CSS paneliyle aynı olsa da, düzen ve tasarımda bir fark olsa da. Ancak, denemeye değer bir ayırt edici özellik vardır. 3B görünüm.

kullanma 3B görünüm Web sayfasının yapısını derinlemesine görüntüleyebilirsiniz. Bu görünümü etkinleştirmek için düğmenin sağ altındaki düğmeyi bulabilirsiniz. “Firefox Yerel İnceleme Öğesi”. Bu nasıl 3B görünüm benziyor.

Diğer özelliklerde olduğu kadar sık ​​kullanmıyorum, ancak kabul ettiğim Mozilla’dan oldukça yenilikçi bir özellik ve kesinlikle çok kullanışlı.

Web Tasarım Görünümü

Duyarlı Web Tasarım'daki popülaritesinin artmasından bu yana, Firefox Tarayıcı için Duyarlı Bir Bookmarklet başlattı. Bu araç, duyarlı web sitemizi tarayıcı penceresini yeniden boyutlandırmadan farklı görünüm alanlarında test etmemize olanak sağlayacak.

Bu görünüme bu menüden ulaşılabilir: Araçlar> Web Geliştiricisi> Web Tasarım Görünümü. Ve, görünüm bu şekilde.

Stil Düzenleyicisi

Son olarak, eğer sık ​​sık CSS ile çalışıyorsanız, muhtemelen bu özelliğe aşık olacaksınız. 11 sürümünden bu yana, Firefox ekledi Stil Düzenleyicisi yerel geliştirici araçlarında.

Bu özellik en az Web Tasarım Görünümü, CSS'yi düzenlemenizi, tarayıcıdaki etkiyi anında görmenizi ve CSS kaynak dosyasını doğrudan etkileyen değişiklikleri kaydetmenizi sağlar.

Stil Düzenleyici aşağıdaki menüden edinilebilir: Araçlar> Web Geliştirici> Stil Düzenleyici.

Son düşünce

Bu Firefox eklentilerinde bir sürü özellik var ve burada tartışılanlar, web geliştirme sırasında oldukça sık kullandığım özelliklerden sadece birkaçı. Bununla birlikte, Firefox’taki web geliştirme verimliliğini artırmak için faydalı olabilecek başka ipuçlarınız olabilir..

Hangi özellikleri sıklıkla kullanıyorsunuz? Düşüncelerinizi aşağıdaki yorum kutusunda paylaşabilirsiniz..