Firebug kullanmak için 10 sebep | bildirgec.org

Firebug daima web geliştiricileri arasında en yoğun kullanılan en popüler araçlardan birisi olmuştur. Firefox'u muhteşem yapan eklentilerden birisi bence. Bu yazıda firebug kullanmanız için sizi ikna edebilecek 10 konudan bahsedeceğim.

Sebep 1: Konsol

firebug'ı açınca ilk farkedeceğiniz şey (ister sağ alttaki simgeye tıklayarak açın, ister ctrl+f12 kısayolunu kullanın) karşınıza çıkacak olan konsol paneli olacaktır. Firefox'un hata konsolu ile çok benzeştiğini düşünseniz de, ortak özellikleri şunlar:
- Hata, uyarı, ikaz görüntüleme
- Javascript kodu çalıştırabilme
Ancak firefug konsolu eşsiz kılan ek özellikler şunlar:
- Javascript, CSS, XML, xmlhttprequest (ajax) ve firefox'un kendi iç hatalarını görüntüleyebilir.
- mevcut sayfa üzerinde javascript kodu çalıştırabilir.
Örnek bir sayfa üzerinde incelemek gerekirse.

sebep 2: HTML

Firebug'un panelleri arasında belki de en çok zaman geçireceğiniz panel html paneli.
- 1. Ögeyi incele olarak çevirebileceğimiz bu düğme, hem hangi ögeyi incelediğinizi kısaca size gösterirken, hem de istediğiniz tag'i seçme konusunda inanılmaz bir kolaylık sağlıyor.
- 2. Burada seçili olan tag'in hiyerarşik yapısını görebilir ve üzerinde değiştirmekten silmeye kadar her türlü işlemi yapabilirsiniz.

- 3. Ana kod penceresi, kod üzerinde hızlı değişiklikler yapma eksiklikleri kapatmak için birebir. Erken kapatılmış bir div gibi.
- 4. Bu bölümde firefox'un seçili olan tag için hesapladığı stil elementlerini görebilir ve değiştirebilirsiniz.
- 5. Yerleşim bölümünde kolaylıkla, offset, margin, border ve padding değerlerini görebilirsiniz.

- 6. Ayrıca dom kısmında seçili ögeye ait, bütün method ve özellikleri görebilirsiniz.

sebep 3: CSS
Hesaplanmamış olan temel css verileri ile direk oynayabilirsiniz. psd'den xhtml'e çevirim yaparken direk buradan çalışmak inanılmaz zaman kazandırıyor.

- 1. Çalıştığımız sayfada birden fazla stil dökümanı varsa istediğimizi seçebiliriz.
- 2. CSS kodunun gösterildiği ana bölge.
- 3. CSS değerleri kolaylıkla değiştirilebilir.
- 4. istenilen CSS deÄŸeri engellenebilir. etkisiz hale getirebilir.

sebep 4: Script
Hazır script kodu kullandığınız zamanların dışında neredeyse her zaman script kodları ile büyük savaşlar vermeniz gerekir. Böyle durumlarda firefox'un script konsolu hiç de yeterli gelmez. Firebug ise bu noktada oldukça etkilidir.

- 1. Üzerinde çalışacağınız js dosyasını seçebilirsiniz.
- 2. Debug işlemleri. çalıştır, bir adım çalıştır, bölüm bitinceye kadar çalıştır vs.
- 3. Ana kod bölmesi. durma noktaları tanımlayabilirsiniz (kırmızı notka.)
- 4. DOM ekranı gibi çalışan objelere ait çıktıları inceleyebilirsiniz.
- 5. DeÄŸiÅŸkenlerin stack'teki deÄŸiÅŸimi izleyebilirsiniz.
- 6. Aktif durma noktalarının listesi.

sebep 5: Performans Testi
Herhangi bir javascript'in ne kadar sürede tamamlanacağı gibi bir performans testi yapmak istiyorsanız, firefug'un kendisine özgü console.time fonksiyonunu kullanın.

function timetracker() { console.time("mytimer"); for(x=5000; x > 0; x--) { } console.timeend("mytimer");
}

Çok basit üç adımla işlemi tamamlayabilirsiniz. console.time fonksiyonunu istediğini bir benzersiz isimle çağırın, araya kodunuzu koyun ve gene aynı şekilde benzersiz isimle console.timeend fonksiyonunu çağırın. benzersiz isim kullanarak istediğiniz kadar timer kullanabilir ve her birinin performansını ayrı ayrı görebilirsiniz.

sebep 6: Bağlantı
Sayfanın yüklenmesinin ne kadar sürdüğünü merak mı ediyorsunuz? veya hangi sayfanın, dosyanın ne kadar sürede yüklendiğini? sayfanın gecikme nedenlerini keşfedebileceğiniz ve performans üzerine çalışabileceğiniz yegane sekme Bağlantı sekmesidir.

- 1. Tiplerine göre istek (sorgu) tiplerini filtreleyebilirsiniz.
- 2. Ana bölüm. Bu bölüm içerisinde toplam istek miktarını ve her bir isteğin, boyutu, ne kadarının bellekten öntanımlı alındığını, tamamlanmasının ne kadar sürdüğü gibi bilgileri alabilirsiniz.
- 3. Üzerine tıklandığı taktirde http başlıkları gibi daha ayrıntılı bilgiler edinilebilir.

sebep 7: Kaynak
CodeBurner eklentisi ile edinilen ekstra bir panel. isminden de tahmin edebileceğiniz gibi html ve css kodları için size kaynak sağlayarak ne anlama geldiklerini vakit kaybı yaşamadan öğrenmenizi sağlar.

- 1. Arama ve filtreleme yapabiliyorsunuz.
- 2. Arama sonucunun çıkacağı bölge.
- 3. Uyumluluk listesi. Seçtiğiniz ögenin tarayıcılar ile olan uyumunu kolaylıkla görebilirsiniz.
- 4. Örnekler, versiyon bilgileri, uyumluluk ve daha ayrıntılı tanım gibi bilgilere bu link üzerinden ulaşabilirsiniz.

sebep 8: hatasız piksel
Eğer photoshop üzerinde hazırladığınız bir web sitesini psd'den xhtml'e dönüştürmüşseniz, hatasız piksel ölçümlerinin ve boşlukların ne kadar önemli olduğunu biliyorsunuzdur. PikselPerfect (hatasız piksel) size bu konuda yardımcı olacaktır.

- 1. Bu düğmeyle yeni katman resim ekleyebilirsiniz.
- 2. Katman resimleri istediğiniz gibi yönetebilir ve silebilirsiniz.
- 3. Resimlerin konumları üzerinde oynabilirsiniz.

sebep 9: Neden YavaÅŸ
Yahoo tarafından geliştirilmiş bir firefug eklentisi daha. YSlow, okunuşuyla beraber çevirirseniz, "Neden Yavaş". Eklenti, yapmış olduğu bir dizi teste dayanaraktan size hız ve performans konusunda tavsiyelerde bulunuyor.

Genel performansınızı değerlendirerek, hemen etkisini gösterecek olan önerilerde bulunuyor.

Dilim grafiklerle de anlatımını destekliyor.

sebep 10: FirePHP
En son sebebimiz de PHP kod geliştiricileri oldukça mutlu edecek bir eklenti. FirePHP, bu eklenti sayesinda php kodunuzun içinden doğrudan firefug konsola çeşitli bilgiler gönderebilirsiniz. isterseniz kayıt, bilgi, uyarı, hata gibi veriler seçebilirsiniz.

fb::log('log message'); fb::info('info message'); fb::warn('warn message'); fb::error('error message');

Sonuç
Umarım bu küçük firebug panel ve eklentileri tanıtımı size yardımcı olmuştur. halen daha bir çok tasarımcı temel kod tasarımlarından, düzeltmelerine kadar bir çok işini firebug üzerinden gerçekleştiriyor. Ve bu tür eklentiler firefox'u özgür kılıyor. Konu içerisinde geçen eklentilere de aşağıdaki adreslerden ulaşabilirsiniz.

Firebug
CodeBurner
PixelPerfect
YSlow
FirePHP

Orjinal