Firebug Eklentisi

Bu dökümanda firefoxun firebug eklentisi ile ilgili anlatım yer almaktadır.

 Sizlere firebug eklentisini anlatacağım. Bir çok avantajı olan bu eklenti özellikleriyle şaşırtıyor.



FireBug web kod yazarları için olmazsa olmaz bir araç.Kod yazarken muhakkak bazı sorunlarla karşılaşacağız, burada  sorunları  çabuk ve hızlı çözmek için  FireBug bize  çok büyük yarar sağlayacak.  Avantajlarından biride hataları tarayıcı üzerinden müdahale etme imkanı sunması.

İlk önce firebug eklentisini açalım. Kısa yolu f12 tuşudur
.

Firebug Eklentisi

Şimdi firebug konsoluna göz atalım.

 Firebug Eklentisi

6 sekme vardır .

1-Konsol : Bu kısım işlemleri izlememizi sağlar ve aynı zamanda komut satırı içerir.
2-HTML : 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. İsminden de anlaşılacağı gibi Style sekmesi bizim çok işimize yarayacaktır
3-CSS : 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.
4-JS : Bu sekme javascript hataları için.

5-DOM : DOm izlemek için kullanılan bir sekme

6-Net : 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
.

 

Firebug da ilk olarak göstermek istediğim şeylerden biri şudur. Firebug ile herhangi bir sitedeyken firebug’ı açtığımızda incele dediğimiz zaman biz mouse’ umuz ile nereye gelirsek sadece o bölmenin HTML , Css kodlarını biz sunabiliyor . Gördüğünüz gibi aşağıdaki resimde de mavi alan ile işaretlenmiş kısımdaki kod’lar seçili alanın kodlarıdır.(bkz resim-3)

Firebug Eklentisi

Şimdi yukarıda görmüş olduğunuz  Resim-3’ deki seçili alandaki Firefox Start yazısını gerçek zamanlı olarak firebug ile o kısmı yokediceğim.

Firebug Eklentisi

Gördüğünüz gibi seçili alandaki html kod’larından background ile olan yeri sildiğim zaman Firefox Start yazısı kalkmış oldu . (bkz resim-4)
 
Şimdi ise yazı boyutu ile ilgili bir takım değişiklikler yapıcağım.Aşağıdaki resimde gördüğünüz üzere olan seçili alandaki yazınıntipi ve boyunu değiştireceğim.

Firebug Eklentisi

 

Firebug Eklentisi

Yukarda

da gördüğünz gibi seçili alandaki font size değerini -1 ‘ den 6 ‘ ya getirerek yazı boyutunu büyütmüş olduk.
 
Firebug değerleri değiştirebildiğimiz gibi yeni bir değer de ekleyebilmemize olanak tanır.

Firebug eklentisi css ve html’ i yeni öğrenenler içinde çok güzel bir yardımcı kaynak görevindedir.
Sizlere firebug ile ilgili anlattığım bu bilgiler firebug eklentisini yeni öğrenenler ve başlayanlar için güzel bir kaynak olması dileğiyle.
Yorumunuzu Ekleyin
Firebug Eklentisi Yorumları +2 Yorum
  • Oyuncu
    1
    Oyuncu
    ya ben bunu kullandım ama yaptığım şey kalıcı olmadı, mesela internet üzerinde otnadığım popmundo oyunu var, onda paramı bayağı yükselttim ama kalıcı olmadı sadece görüntü öyle oldu, kaydetmek için ne yapmamız gereki?
    21 Haziran 2009 17:28:00, Pazar
  • arda
    1
    arda
    Peki yapılan değişiklikler nasıl kaydediliyo ben herhangi bir değişiklik yaptığımda sayfayı yeniledikten sonra tekrar eski haline dönüyo kaydetme seçeneği yokmu firebug panelinde ?
    09 Temmuz 2011 00:30:37, Cumartesi

FireShot FireShot
Firebug
Firebug Eklentisi
Fireshot Kullanımı
Yükleniyor...