FireBUG – En Çok Sevilen Ateş Böceği
Bu Makalemde sizlere Web Programlama işi yapan yazılımcı arkadaşların tasarım ve tasarımsal performans hakkında yaşadıkları sıkıntıları giderebileceklerine inandığım mozilla browseri için tam randımanlı çalışmakta olan bu eklentiyi ve kullanımı hakkında önemli bölümlerine değineceğim.
Öncelikle eklentiyi indirip kullanabilmeniz için Mozilla Firefox bilgisayarınızda kurulu olmalı daha sonra Araçlar sekmesinden Eklentiler yazan bölümü tıklayıp arama bölümüne firebug yazabilir ya da direk google aramadan firebug olarak aratınız.
https://addons.mozilla.org/en-US/firefox/addon/1843/ arama sonuçlarından eriştiğiniz eklentiler sayfasında eklentiyi Add to Firefox butonunu tıklayıp eklentinize sahip olun.
Eklentinizin kurulumu sonrasında firefox yeniden başlayacak ve böceğimiz hazır olarak görev yerine geçmiş olacaktır.
Şimdi; Destekyeri.com sayfamızı açtık bowserimızda ister 1. Numaralı okları takip ederek Araçlar – Firebug – Firebug’u Aç ilerlemesiyle yada Kısayol tuşu F12 ile çalıştırabilirsiniz. Ancak 2 Numaralı resimdeki erişim hem bana göre hem de genel olarak en kolay yollardan birisidir, pencerenizin sağ alt tarafındaki böcek ikonunu tıklayarak açmaktır.
Firebug açıldığında size kaynak kodları gösterir HTML olarak siz sadece CSS görsel tasarım kodlarınıda inceleyebilirsiniz. Bu inceleme Adobe ürünü kod düzenleyici ve Microsoft ürünü yazılım araçlarındaki gibi Table – Div ve diğer elementlerine kadar rahatlıkla göz atabileceğiniz özellikleri sizlere çok rahat bir biçimde olanak sağlar. Böceğimizi çalıştırdığımızda resimdeki gibi pencere altında boyutu ayarlanabilir bir bölüm açılır.
Artık Eklentimizi kullanmaya başlayacak şekilde anlatmaya ve ne nedir ne işe yarar elimden geldiğince ve benim de kullandığım kadarını sizlere anlatmaya başlayacağım fakat söylediğim gibi bu bir eklentidir ve eklenti olmasına rağmen bu eklentinin de ekstra eklentileri de bulunmaktadır.
Mouse ile yapılacak en havalı işlemlerden birisi 1 Numaralı ok’un gösterdiği ikona tıklandığında başka hiçbir yeri tıklamadan sitemizin üzerinde gezdirdiğiniz de 2 Numaralı okun sizin şuan hangi table üzerinde olduğunuzu ve bununda 4 numaralı okun html kaynağından yani bu sitenin kaynak kodundan göstermekte olduğunu anlamaktayız ve bu table ‘ a ait 3 numaralı kutuda uygulanan CSS kodları yer almaktadır.
1 numaralı okun gösterdiği ikon Mouse yordamıyla bölümleri incelemek çok zevkli ve çok kolaydır dilediğiniz bölüme ait imajlar kaynak ve css kodlarını rahatlıkla inceleyebilir hatta ve hatta css 3 numaralı kutudan düzenleme bile yapabilirsiniz şöyle olsa nasıl olur böyle olsa nasıl olur gibisinden bir başka özelliklerinden bahsedecek olursam css kutusunda bulunan kodların üzerine geldiğinizde kapatma gizleme özellikleriyle de kayma ve bozulmaları tespit edebilirsiniz.
Firebug Konsolunda bulunan sekmelerin her birinden farklı amaçlar için kullanılacağını belirten menü ve bunlarında alt menüleri bulunmaktadır. Başlangıçta bu menüler devre dışı olarak gelir siz gerek duyduğunuz da etkin duruma getirebilirsiniz. Her zamanda etkin kalabilir ama bu gösterimde olan sayfanın yavaş açılmasına neden olabilir çünkü bu kodcukları sizin anlayabileceğiniz şekilde göstermeye çalışması ve onları ayrı bölümlere göre derlemesi gerekmektedir.
Html Sekmesinde bulunan alt menüler de ( Aşağıdaki resim) kullanmak istediğiniz görmek istediğiniz bölümleri tıklayıp aktif ederek ne şekil bir kodlama yapılmış yada yapmışsınız rahatlıkla görsel olarak anlayabilirsiniz.
CSS tabında ise sitenin hatta sayfaya ait olan css kodlarını görebilirsiniz unutmadan her bulunduğunu bölümde mouse ile sağ tuş yaparak diğer özellikleri kullanmayı denemeyi unutmayın.
Css kısmında magrin pedding değerleri değiştiriebilir bg arkaplan rengi değiştirebilir yazı fontu değiştirilip bu halde nasıl olur siteniz online bir şekilde görsel olarak göz atabilir daha sonrasında siteniz için uygulayabilirsiniz.
Script, sekmesi Java Scriptleri ve varsa JS hatalarını göstermektedir. Detaya girilecek bölümlerden birisidir bana göre fakat ben bu kısmı biraz geçiyorum tam zamanlı çalışma esnasında anlatılması gereken ve derlemeyi izlemek gerekmektedir. Ama dediğim gibi varsa js lerinizde hatalar rahatlıkla görebilirsiniz.
Öncelikle DOM nedir belirteyim.
Browserler hazırladığınız sayfayı işlerken onu bir belge kabul ederler ve bu belgeyi yorumlarlar. Bu yorumlamayı yaparken tüm sayfa elemanlarını bir nesne gurubu içerisine yerleştirirler. Mesela bir resim Image nesnesi içerisinde yerini alacaktır. Her nesnenin kendine has özellikleri ve metodları bulunmaktadır. Mesela bir resmin genişliği, yüksekliği ve adresi ( src özelliği ) gibi özellikleri bulunmaktadır. Biz her özelliğin değerini görebildiğimiz gibi bazı özelliklerin değerlerini de değitirecek yöntemlere ( metod ) sahibiz.
Anlaşılacağı gibi Firebug konsolunda bulunan DOM sekmesi sayesinde obje modellerinizin kullanıcı tanımlı ve sunucu DOM larını inceleyebilir kontrol ederek hataları giderebilirsiniz.
Son olarak anlatmak istediğim en etkileyici bölüm ise ne kadar MB ya da ne kadar KB ve ne kadar sürede açıldığını belirten kısım.
Bu sekmeden faydalanabilmeniz için Alt menüsünde bulunan Devre Dışı bölümünü Etkin yapmanız gerekmektedir. Bu işlem sonrasında konsolunuz açıkken sitenizi ilk defa açmanız şartıyla ya da önbelleği temizleyerek açtığınızda sayfanızın ne kadar sürede dolduğu ve açıldığı görünmektedir.
Bu çoğumuz için bek mühim değil kolaylıkla tespit edilecek bir özellik diyebilirsiniz fakat site içerisinde o an açılan imajlar css dosyaları js dosyaları vb. ile birlikte toplam sayfa olarak kaç mb içerik açılmakta bunu görebilirsiniz.
Ajax kullanımı yaygın olan web sitelerinde bu bölüm çok rahatlıkla incelenebilir.
Mesela verinin o an tamamını n çağırılıp çağırılmadığı hangi verilen ön bellekten gibi cevaplara yanıt alınabilmektedir.
1 numaralı ok sekmenin yerini göstermekte 2 numaralı ok ise sayfanın kaç mb olarak çağırıldığını göstermektedir. Ayrıca görüldüğü gibi hangi imaj ne kadar sürede geldi ve ne boyutta istenildiği şekilde incelenebilmektedir. İnşallah faydalı yerlere ulaşır bir makale olmuştur.