Bu başlık altında mozilla firefox internet tarayıcısının ufak bir eklentisi olan firebugın indirilmesini,kurulmasını ve kullanımını öğreneceksiniz.

Firebug

Volkan GÖRGÜLÜ’nün anlatımıyla firebug eklentisi videosuna ulaşmak için tıklayınız….

Mozilla Firefox’un Firebug Eklentisini İndirmek İçin Tıklayınız…

Yukarıdaki linke tıkladıktan sonra karşınıza aşağıdaki gibi bir pencere gelecektir.

Firefox - Firebug Eklentisi İndirilmesi,Kurulması ve Kullanımı

 

 

 

 

 

 

 

 

 

 

 

 

 

 

“Şimdi Kur” butonuna tıklayınız.

 

Firefox - Firebug Eklentisi İndirilmesi,kurulması Ve Kullanımı

Yükleniyor.Bekleyiniz…

 

Firefox - Firebug Eklentisi İndirilmesi,kurulması Ve Kullanımı

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

“Firefox uygulamasını yeniden başlat” butonuna tıklayınız.(Firefox penceresi kapandıktan sonra bir süre bekleyin, tekrar açılacaktır.)

Firefox açıldıktan sonra firebug eklentisini 3 şekilde aktifleştirebilirsiniz.

1- F12 tuşuna basarak.(2. basışınızda tekrardan deaktif olur.)

2- Firefox’un sağ alt köşesinde bulunanFirefox - Firebug Eklentisi İndirilmesi,kurulması Ve Kullanımısimgeye tıklayarak.

3- Firefox menüsünde “Araçlar” > “Firebug” > “Firebug Aç” yolunu izleyerek.

 

Firebug Menüsünü inceleyelim…

 

Firefox - Firebug Eklentisi İndirilmesi,kurulması Ve Kullanımı

 

 

 

 

 

 

 

 

 

 

 

 

 

  • Firebug’ı Aç : FireBug konsolunu açar. Kısa yolu F12 tuşudur, bir kere basarsanız açar iki kere basarsanız kapatır.
  • Firebug’ı yeni pencerede aç : 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.
  • Elemanı incele : Bu menü ile HTML elemanlarını seçmek için kullanırız.
  • JavaScript takip et : 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.
  • Konsol’u temizle : FireBug “Console” tab’ını temizlemek için.
  • Komut satırı : Console sekmesini açar.
  • Ara : Mevcut sekmede arama alanına odaklar.

Firebug’ı açtıktan sonra karşımıza aşağıdaki gibi bir pencere çıkacaktır.

 

Firefox - Firebug Eklentisi İndirilmesi,kurulması Ve Kullanımı

“Konsol”,”JS”,”Net” 3 kutuyuda işaretledikten sonra “Enable selected panels for …….” butonunu tıklayınız.

 

Firefox - Firebug Eklentisi İndirilmesi,kurulması Ve Kullanımı

Burada sitenin içerisinde bulunan tüm resimleri bunların bağlantı adreslerini görebilirsiniz.Bağlantı adresinin üstüne geldiğinizde o resmin küçük önizlemesini görebilirsiniz ve bu önizlemenin altında da o resmin boyutlarını pixel cinsinden görebilirsiniz.

 

Firefox - Firebug Eklentisi İndirilmesi,kurulması Ve Kullanımı

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Bağlantı linkine tıkladığınıza resmi büyük olarak görebilirsiniz.Yukarıdaki resimde görüldüğü gibi.

 

Firefox - Firebug Eklentisi İndirilmesi,kurulması Ve Kullanımı

 

 

 

 

 

 

“Flash” butonuna tıklarsanız sitede bulunan flash dosyalarını görürsünüz.

 

Firefox - Firebug Eklentisi İndirilmesi,kurulması Ve Kullanımı

“XHR” butonuna tıklarsanız sitede bulunan xhr kodlarını görürsünüz.

 

Firefox - Firebug Eklentisi İndirilmesi,kurulması Ve Kullanımı

“JS” butonuna tıklarsanız sitede bulunan JavaScript kodlarını görürsünüz.Bağlantı linkine tıklarsanızda ayrıntılı bilgilerine, Javascript kodlarına ulaşabilirsiniz.

 

Firefox - Firebug Eklentisi İndirilmesi,kurulması Ve Kullanımı

“CSS” butonuna tıklarsanız sitede bulunan css kodlarını görürsünüz.Bağlantı linkine tıklarsanızda ayrıntılı bilgilerine, Css kodlarına ulaşabilirsiniz, düzenlemeler yapabilirsiniz.

 

Firefox - Firebug Eklentisi İndirilmesi,kurulması Ve Kullanımı

“HTML” butonuna tıklarsanız sitede bulunan html kodlarını görürsünüz.Bağlantı linkine tıklarsanızda ayrıntılı bilgilerine, html kodlarına ulaşabilirsiniz, düzenlemeler yapabilirsiniz(aşağıda örnek verilecektir.).

 

Firefox - Firebug Eklentisi İndirilmesi,kurulması Ve Kullanımı

“XHR” butonuna tıklarsanız sitede bulunan bütün kodları,dosyaları(resim,flash,javascript,css,html,xhr) görüntüleyebilirsiniz.

Firefox - Firebug Eklentisi İndirilmesi,kurulması Ve Kullanımı

“Net” butonuna tıklarsanız, network işlemlerine gözatarsınız.Sayfanın ne kadar sürede yüklendiğini ve her nesnenin yüklenme sürelerini gösterir.

Firefox - Firebug Eklentisi İndirilmesi,kurulması Ve Kullanımı

“DOM” butonuna tıklarsanız, sayfa içerisinde kullanılan olaylar,nesne isimleri gibi birçok özelliğe gözatabilir ve değiştirebilirsiniz.

 

Firefox - Firebug Eklentisi İndirilmesi,kurulması Ve Kullanımı

“JS” butonuna tıklarsanız, sayfa içerinse kullanılan javascript kodlarını görüntüleyebilir,hataları belirleyebilir ve değişiklik yapabilirsiniz.

 

Firefox - Firebug Eklentisi İndirilmesi,kurulması Ve Kullanımı

“CSS” butonuna tıklarsanız, sayfa içerinse kullanılan css kodlarını görüntüleyebilir,hataları belirleyebilir ve değişiklik yapabilirsiniz.

 

Firefox - Firebug Eklentisi İndirilmesi,kurulması Ve Kullanımı

“HTML” butonuna tıklarsanız, sayfa içerinse kullanılan HTML kodlarını görüntüleyebilir,hataları belirleyebilir ve değişiklik yapabilirsiniz.

 

Firefox - Firebug Eklentisi İndirilmesi,kurulması Ve Kullanımı

“İncele” butonuna tıklarsanı bulunduğunuz internet sayfası üzerinde fare imlecini gezdirerek, üstüne geldiğiniz nesnenin kodunu aşağıdaki pencerede görebilirsiniz,değişiklikler yapabilirsiniz.

 

Firefox - Firebug Eklentisi İndirilmesi,kurulması Ve Kullanımı

Gördüğünüz gibi kodda değişiklik yaparak sitenin arka plan rengini değiştirdim.Sizde isteğiniz doğrultusunda istediğiniz değişiklikleri yapabilirsiniz.

Firebug eklentisini genel hatlarıyla inceledik size kalan kendinizi geliştirmektir.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir