Firefox Developer Edition 6 Denenecek En İyi Araçlar

Firefox geliştirici sürümü, günümüzde özellikle geliştiriciler için yapılan tek tarayıcıdır. Standart sürümdeki geliştirici araçları ilk önce geliştirici sürümünde görünür ve geliştirici sürümünde standart sürümde bulunmayan ve kullanılmayacak olan araçlar vardır. Bugün şu anda bu araçların bazılarına göz atacağız. yalnızca geliştirici sürümünde bulunabilir.

Hiç kullanmadıysanız veya geliştirici araçlarına standart sürümde bile olsa aşina olmayan biriyseniz, önce Mozilla'nın bu harika "DevTools Challenger" bölümüne bakın. Burada, Firefox geliştirici sürümü tarayıcıda aşağıda belirtilen araçlardan bazıları ile pratik yapabilirsiniz. Örnekler eğlenceli ve takip etmesi kolay, yönergeler basit ve yetişemiyorsanız video eğitimini izleyin..

1. Animasyon müfettişi aracı

CSS animasyonları gittikçe yaygınlaşıyor ve Firefox geliştirici baskısı tarafından sağlanan CSS animasyon araçları, oluşturulan animasyonun her adımını izlemeyi ve incelemeyi kolaylaştırıyor. Herhangi bir animasyonu duraklatabilir, oynatabilir ve tersine çevirebilirsiniz; Ayrıca fırçalama yoluyla kare kare oluyor da görebilirsiniz.

Araca erişmek için, aracı açın. müfettiş Hareketli öğeye sağ tıklayıp "elemanı denetle" yi seçerek aracı seçin, ardından geliştirme aracı penceresinin sağ tarafında "Animasyonlar" ı tıklayın..

2. Animasyon zamanlama fonksiyonu editörü

Animasyon zamanlaması, geliştirme aracında düzenlenebilir, bu fonksiyondaki fonksiyonun yanındaki simgeye tıklamanız yeterlidir. kurallar bölüm müfettiş aracı ve işlev eğrilerini gösteren bir açılır pencere açılır. Animasyon zamanlamanızı ayarlamak için bunu sürükleyip değiştirebilirsiniz. Eğrilerde değişiklik yaptıktan sonra, animasyon hızınız buna göre değişecektir.

Kübik Bezier animasyon işlevine zaten aşina değilseniz, bu yazı hakkında daha fazla bilgi edinmek için bu yazıyı öneririm.

3. CSS Özellikleri için Renk Seçici

Firefox'un standart sürümünde zaten mevcut olan bir renk seçici var (bu yazı hakkında daha fazla bilgi edinin), bu sayfadan bir renk alır ve panoya kopyalar. Şimdi bahsettiğim renk toplayıcı özelliklerin CSS renk değerleri için özel.

İçindeki her CSS renk değerinin yanında kurallar bölüm müfettiş aracı, tıklandığında açılan bir renk tekerleği açacak bir simge var. Tekerlekten hangi rengi istediğinizi seçebilirsiniz.

Zaten istediğiniz bir renge sahipseniz ve sayfada olacak olanı seçtiyseniz, renk seçiciyi açmak için açılır pencerenin altındaki damlalık aracını tıklatarak seçiciyi istediğiniz renge sürükleyin ve tıklayın. . CSS renk değeri seçilen renginkine değiştirilecektir.

4. Ölçme aracı

Bu araç, imlecin XY konumunu ve seçilen bölümün piksellerinde yükseklik, genişlik ve çapraz ölçümleri görmenizi sağlar. Aracı kullanmak için önce geliştiriciden etkinleştirmeniz gerekir Araç Kutusu Seçenekleri, "Kullanılabilir Araç Kutusu Düğmeleri" altındaki "Sayfanın bir bölümünü ölç" adlı onay kutusunu işaretleyerek.

Etkinleştirildiğinde, dev araç penceresinin en üstünde bir cetvel simgesi görünecek, o simgeye tıklayıp imleci sayfa üzerinde hareket ettireceksiniz. İmlecin yanında XY konumlarını göreceksiniz. Genişliği, yüksekliği ve çaprazlığı ölçmek için ölçmek istediğiniz kısmı seçmek üzere tıklamanız yeterlidir..

5. CSS filtre editörü

Sayfadaki bir öğeye CSS filtresi uyguladıysanız, yanında bir simge göreceksiniz. kurallar bölüm müfettiş Tıklandığında bir CSS filtre editörü açan bir araç.

Bir filtreyi kaldırmak için, filtre adının sağ tarafındaki × işaretini tıklayın. Bir filtre eklemek için alttaki filtre kutusunu tıklayın ve eklemek istediğiniz filtreyi seçin ve + işaret. Ayrıca, her öğeyi sürükleyerek filtreleri istediğiniz sıraya göre yeniden düzenleyebilirsiniz..

6. Hafıza aracı

Bu araç sayesinde hafızanın ne kadar içerdiğini web sayfanızda bulabilirsiniz. Bu, bellek kullanımını azaltmak ve sonuç olarak sayfa hızınızı artırmak için adımlar atmanıza yardımcı olur.

Aracı kullanmak için, önce Araç Kutusu Seçenekleri "Varsayılan Firefox Geliştirici Araçları" altında "Bellek" adlı onay kutusunu işaretleyerek. Bir kere kontrol edildikten sonra, "Performans" dan hemen sonra geliştirme aracı penceresinin üstündeki "Bellek" bölümünü göreceksiniz. Bunu seç.

Aracı kullanmak için "Anlık fotoğraf çek" i veya kamera düğmesini tıklayın. Belleği alan nesneler ve komut dosyaları gibi öğelerin bir listesini göreceksiniz .