Uzun zamandır kullandığım halde neden FireBug hakkında bir makale yazmadığımı bilmiyorum. Aslında bu makaleyi yaklaşık 3 ay önce yazacaktım ama biraz üşengeçlikten ve tembellikten dolayı ancak şimdi yazabildim. Birazda [Volkan Görgülü’nün video anlatımı][] benim bu makaleyi devam ettirmem için bir kıvılcım oldu diyebiliriz. FireBug gelişmiş bir araç bu nedenle tek makalede anlatmamın mümkünatı yoktu ben şimdilik iki makale ile anlatmaya çalışacağım. İlk makalemi [Michael Sync][] sitesinden çok fazla yararlanarak hazırlıyorum. michaelsync.net sitesi bu konudaki en iyi kaynak diyebilrim. FireBug FireFox internet tarayıcısının bir eklentisidir. Bunu bilmeyen kalmamıştır diye düşünüyorum. En azın bilmeyen web kod yazarı kalmamıştır.

FireBug web kod yazarları için olmazsa olmaz bir araç. Benim Firefox sevgimin kaynağı diyebilirim. Kod yazarken bir sorunla karşılaşırız ve sorunlarla uğraşmak her ne kadar güzel bir şey olmasada bu işin olmazsa olmazıdır. Kod yazarken muhakkak bazı sorunlarla karşılaşacağız, burada önemli olan sorunları ne kadar çabuk ve hızlı çözebildiğimizdir. FireBug bize sorunların çözümünde çok büyük yararı var. Avantajlarından biride hataları tarayıcı üzerinden müdahale etme imkanı sunması. FireBug web üzerinde hata ayıklamanın bir miladıdır bence, yani FireBug öncesi ve sonrası dönem. Ne kadar övsem azdır FireBug’ı.

FireBug eklentisini eklentiyi yazan http://getfirebug.com/ sitesinden veya FireFox’un eklentiler indirebilirsiniz. FireFox 3. sürümü ile birlikte FireBug 1.2 beta sürümünü kurabiliyoruz. Ben bu sürümde bazı sorunlarla karşılaştım ve sırf bu yüzden FireFox 3 kaldırıp FireFox 2 kurup FireBug’ın kararlı sürümü olan 1.05 kurdum.

FireBug’ı bu kadar övdükten sonra biraz tanımaya ne dersiniz. Aslında ben bu makaleyi ilk yazmaya karar verdiğimde sadece CSS ile ilgili olan bölümü anlatacaktım ama konuyu biraz araştırınca ilk başta aracı biraz tanıtıp sonra CSS ile ilgili olan kısmı anlatmaya karar verdim. FireBug javascript kodu yazarkende bize bir çok yararları var şimdilik javascript kısmınıa değinmeyeceğim, nasip olursa yakında o kısmınıda anlatırım.

FireBug’ı yukarıdaki linklerden birinden tıklayıp indirmek istediğinizde aşağıdaki yükleme ekranı ile karşılaşacaksınız.

Kurulum bitirdikten sonra sizden eklentinin aktif olmak için FireFox’unuzu kapatıp açmanız yeterli olacaktır.

FireBug pasif

Fire Aktif

Kurulum tamamlanınca FireBug kullanıma hazır hale gelecektir. İlk Firefox’unuzu açtığınızda FireBug pasif olabilir. Aktif hale getirmek için FireFox’un sağ alt durum çubuğu üzerindeki FireBug işaretine sağ tıklayıp “Disable FireBug” başındaki işareti kaldırmak için bu seçeneğe tıklamanız yeterli. Alternatif bir yol olarak Araçlar - FireBug - Disable FireBug yolunuda kullanabilirsiniz.

FireBug Menü

FireBug menüsündeki seçenekleri tek tek tanımlarsak:

  • Open Firebug : FireBug konsolunu açar. Kısa yolu f12 tuşudur, bir kere basarsanız açar iki kere basarsanız kapatır.
  • Open Firebug in New Window : FireBug konsolunu farklı pencerede açmak için. Bu genelde popup pencereleri gibi küçük boyutlu pencerelerde FireBug konsolunun tüm sayfayı kapsadığı durumlarda çok işe yarıyor.
  • Disable Firebug : FireBug aracını pasif hale getiriyor. Bu özellik önemli, çünkü ajax tabanlı bazı sitelerde FireBug yavaşlamalara neden olabilir. Gmail’e girdiğinizde bazen bu yönde hatalar alırsınız.
  • Disable Firebug for ****: Belli sitelerde firebug’ınızın pasif olmasını istediğinizde bu seçeneği tıklayınız. Ben Gmail için bu seçeneği işaretledim. Çünkü firebug’a her zaman ihtiyaç duyduğum için devamlı kapalı tutmak hoşuma gitmiyor.
  • Allowed Sites : İşaretlediğiniz siteyi firebug ile gezmeye tercih etmek için.
  • Inspect the Element : Bu menü ile HTML elemanlarını seçmek için kullanırız.
  • Profile Javascript : Bu özellik sadece FireBug aktif iken çalışıyor. Javascript işlemlerimizin gerçekleştiğinde nasıl davranacağını gösterir. Performans için önemli bir özellik.
  • Clear Console : FireBug “Console” tab’ını temizlemek için.
  • CommandLine : Console sekmesini açar.
  • Search : Mevcut sekmede arama alanına odaklar.

FireBug Konsolu

Şimdide FireBug konsolunu inceleyelim.

FireBug Konsol

FireBug konsolunda 6 adet sekme vardır. Bu sekmelere bir göz atalım.

  • Console tab : Bu kısım işlemleri izlememizi sağlar ve aynı zamanda komut satırı içerir.
  • HTML tab : Bu sekme mevcut tarayıcı üzerinde çalışma zamanlı HTML elemanlarını yakalamamız, düzenlememiz ve değiştirmemizi sağlar. Bu sekmenin Style, Layout ve DOM isimlerinde 3 adet alt sekmesi vardır. İsmindende anlaşılacağı gibi Style sekmesi bizim çok işimize yarayacaktır.
  • CSS tab : Sayfaya eklenen css dosyalarını kontrol edebiliriz. Seçtiğimiz CSS dosyasında istediğimiz düzenlemeyi ve değişikliği yapabiliriz. Ben bu sekme yerine HTML sekmesi altındaki CSS sekmesini daha çok kullanıyorum.
  • Script tab : Bu sekme javascript hataları için. Bu sekmenin Watch ve Breakpoint adında iki alt sekmesi var.
  • DOM tab : DOm izlemek için kullanılan bir sekme.
  • Net tab : Network işlemlerini izlemek için kullanıyoruz. Sayfamızın ne kadar zaman yüklendiğini ve her nesnenin yüklenme zamanını gösterir.

Durum Çubuğu

FireBug Durum çubuğumuzun sağ tarafında yeşil ok ikonu ile kendini gösterir. Burada ayrıca hata durumlarında sayfada kaç hata olduğunuda gösterir. Bu hatalar Javascript hatalarıdır.

FireBug Hata

FireBug klavye kısa yolları için tıklayınız. Elinizin hızlanması açısından önemli.

Bu yazımızda FireBug’ı genel olarak tanıdık bir sonraki yazımızda ise CSS ve XHTML kodu yazarken FierBug’dan nasıl yararlanacağımızı göreceğiz.

  • En çok kullanılan 15 javascript/ajax kodu. Kırık bağlantı.
  • RSS yazılarını Google Translate yardımı ile isteidğiniz dile çevirmenizi sağlayan bir hizmet, ne yazık ki Türkçe yok, ama farklı dillerdeki yazıları İngilizce’ye çevirip okumakta az bişey değil. Bağlantı
  • İnternet günlüklerinin(blog) geleceği hakkında yazılmış güzel bir makale.
  • Javascript güvenliği ile ilgili bir makale. http://www.nowareshosting.com/forums/index.php?showtopic=57
  • “Blog’da kullandığım ve tavsiye ettiğim eklentiler” - blog.wolkanca.com Bağlantı
  • Arama motorlarına uyumluluk için en iyi yöntemler. Bağlantı
  • 9 usta web geliştiricisini twiter adresini takip edelim. Bağlantı
  • FireBug çalışma grubu bir toplantı yapmış ve FireBug 1.2 sürümünün yakında yayınlanacağı ve yeni özelliklerin birlikte geleceği müjdesi var. Bağlantı
  • .net için güzel bir ipucu günlüğü. Bağlantı
  • 10 adet CSS ipucu.
  • CSS’de kendi sıfırlamamızı yapalım. Bağlantı
  • Güzel bir javascript menü. Sol tarafta bizi devamlı takip eden ve hangi bölümde olduğumuzuda gösteren güzel bir uygulama. Bağlantı
  • SmashingMagazine güzel bir wordpress teması daha. Bağlantı

  • Asp.Net 3.5 ile gelen yenilikler. Bağlantı
  • 10 güzel CSS ipucu. Bağlantı
  • Formlarda metinlerin yerlerini belirlemek. Bağlantı
  • W3C kontrolüne takılan hataları nasıl düzeltirsiniz? - siberkultur.com Bağlantı
  • Güzel derlenmiş CSS linkleri Bağlantı
  • Ücretsiz güzel bir wordpress teması. Bağlantı
  • Fare imlecinin tıklandığı yerde mesaj kutusu açmak.
  • Tablo Etiketinin Gönlünü Almak 2 - webdeneyimleri.com Kırık bağlantı.
  • sFIR tekniğine alternatif bir yöntem FaceLift, avantajları ve dezavantajları ile incelemeye değer. Bence en büyük dezavantajı PHP ile çalışması. http://facelift.mawhorter.net
  • SitePoint CSS kitabından ipuçları. Bağlantı
  • Sitemize sFIR 3 ile farklı yazı tipleri nasıl ekleriz? Bağlantı
  • Mozilla Laboratuvarları geleceğin internet tarayıcıları hakkında düşünüp bir video hazırlamışlar. Kırık bağlantı.
  • Blog Yazılarına Daha Fazla Yorum Almanın Yolları - selcukhoca.com
  • WordPress 2.7 de eklenti yönetimi - blog.wolkanca.com Bağlantı