Doğru şekilde yapılandırıldığında, Firefox nihai web geliştirme aracı haline gelebilir ve üzerinde çalıştığınız sayfaya doğrudan erişim sağlayabilir, böylece sayfanızı gerçek zamanlı olarak biçimlendirebilir, javascript hatalarını ayıklayabilir ve hatta html'yi düzenleyebilirsiniz.
Web Geliştirme İçin Ayrı Profil Oluşturun
Tüm bu geliştirme araçlarını yüklemek, Firefox'u çok ağır bir tarayıcı haline getirecek, bu yüzden önce Firefox için yeni bir profil oluşturmalıyız.
Bu bağımsız değişkenlerle yeni bir kısayol oluşturarak, WebDev'i profilinizin adıyla değiştirerek normal profilinizle aynı anda ayrı bir profil başlatabilirsiniz. Ayrıca bir daha detaylı açıklama bunun nasıl yapılacağı hakkında.
firefox.exe -P WebDev - uzaktan kumanda yok
Artık Firefox'u yalnızca web geliştirme için ayrı bir profille yapılandırmış olduğunuza göre, Firefox'u en iyi web geliştirme aracı yapmak için kullanabileceğimiz uzantılara bir göz atalım.
Olması Gereken Web Geliştirme Uzantıları
Bunların hepsi web geliştirme için düzenli olarak kullandığım uzantılar.
Firebug, javascript'te hata ayıklama, CSS ve html görüntüleme için en güçlü uzantıdır. Kodda ve CSS'de dinamik değişiklikler yapabilir ve bunu Ajax kodunuzda hata ayıklamak için kullanabilirsiniz. Gerçekten piyasadaki en iyi uzantıdır.
X yıl boyunca en iyi uzantılardan biri. Bu, herhangi bir geliştirici için sahip olunması gereken bir şey, ancak bunu zaten duymuşsunuzdur.
Bu uzantı, size sayfadaki öğeleri ve atanmış sınıf / kimliklerini kolayca gösterecek çok hafif bir uzantıdır. Bir öğeye ilişkin hızlı bilgiye ihtiyaç duyduğunuz zamanlar için web geliştirici uzantısını kullanmak daha kolaydır. Sayfadan öğeleri kaldırmak için de kullanabilirsiniz.
Renkleri kolayca seçin. Stil sayfasının herhangi bir yerinde gömülü renkleri bulma sıkıntısı yok.
Kaynağı farklı uygulamalarda açmak için birden çok görünüm kaynağı profili ayarlayabilirsiniz.
Bu uzantı, sayfa HTML'nizi kolayca doğrulamanızı ve Kaynağı Görüntüle paneline yüklemenizi sağlar.
Bu tam olarak bir web geliştirici uzantısı değildir, ancak Greasemonkey harika, özellikle de yaygın olarak gerçekleştirilen eylemleri otomatikleştirme yeteneği için değil, bu da web geliştiricileri için harika bir zaman tasarrufu sağlıyor.
Bu uzantı ile ekrandaki bir mesafeyi kolayca ölçün. Bir alanı ölçtükten sonra, karşılaştırma olarak kullanmak için dikdörtgeni ekranın etrafında sürükleyebilirsiniz.
IE Görünümü / IE Sekmesi / OperaView / FirefoxView / Safari Görünümü / IE View Lite
Bu uzantılar (seçiminizi yapın) mevcut sayfayı farklı tarayıcılarda kolayca görüntülemenizi sağlar. IE Tab, eğer çok eğilimliyseniz, IE'yi bir sekmenin içinde çalıştırmanıza bile izin verir.
Önbelleği temizler. Özellikle yeni CSS değişikliklerini kontrol etmek için kullanışlıdır.
Yeniden Başlat Firefox uzantısı, Firefox'u tüm sekmeler ve oturumlar bozulmadan kapatmak ve yeniden başlatmak için çok kullanışlıdır.
Tab Mix Plus uzantısı genel olarak harika bir uzantıdır, ancak web geliştiricileri için temelde birkaç yararlı özelliğe sahiptir: Yinelenen Sekme ve Sekme URL'sini Kopyala.
YSlow uzantısı, sayfanızı analiz edecek ve size nerede hata yaptığınızı söyleyecek Yahoo'nun yeni bir uzantısıdır. Hatta sitenizin performansıyla ilgili bir not bile verir. Sağ alt köşedeki küçük ölçüyü fark edeceksiniz… size sayfanızın toplam boyutunu ve yükleme süresini gösterir. Çok kullanışlı bir uzantı, ancak Firebug uzantısını gerektiriyor.
Dummy Lipsum jeneratör uzantısı, sitenizde sahte içerik yerleştirmek için çok yararlı olan ünlü Lorem Ipsum metnine dayalı olarak sizin için sahte içerik oluşturacaktır.
Screengrab uzantısı, sayfaların ekran görüntülerini almanıza izin verir, ancak normal bir ekran görüntüsü aracının yapamayacağı bir şeyi de yapabilir - yalnızca görüntülenebilir kısmın değil, tüm sayfanın bir görüntüsünü alabilir.
Kullanabileceğiniz tonlarca başka uzantı var, ancak bunlar gördüklerim arasında en iyinin en iyileri. Düzenli olarak kullandığınız başka bir uzantınız varsa, yorumlarda bir bahsedin.
Bu noktada, Firefox'u mükemmel bir web geliştirme aracına dönüştürdünüz. Özellikle Firebug'ı nasıl kullanacağınızı öğrenmek için zaman ayırın.
