Konular

Firebug Hakkında

Firebug hakkında...

   Kod yazarken bir sorunla karşılaşırız ve sorunlarla uğraşmak her ne kadar güzel bir şey olmasa da 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.

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

 

FireBug Hakkında Hersey

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

Firebug Hakkında Hersey

Firebug Hakkında Hersey

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

 

Firebug Hakkında Hersey

  • 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 Hakkında Hersey

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 Hakkında Hersey

   Eğer sayfa üzerinde değişiklikler yapmak istersek Css bölümünden yapabiliriz örneğin;

 

Firebug Hakkında Hersey

    Şimdi yazı ve sayfanın renkleriyle oynayalım…

 

Firebug Hakkında Hersey

   Bu işlemdeki degisikligi anladıktan sonra javascript sekmesine gelelim...

  Javascript panel, net paneli  ve Konsol panellerinin aktif ve pasif olmasını ayarlayabiliyoruz. Normal durumda HTML, CSS ve DOM panelleri çalışıyor, Javascript, Net ve Konsol panelleri ise bizim seçimimize göre aktif ve pasif hale getirilebiliyor.

 

Firebug Hakkında Hersey

Yeşil ok işareti yerine FireBug kendi böcek ikonun koymuş. Böcek ikonu eğer Javascript panel veya net panel aktifleştirilirse normal rengini alıyor. Farenin imlecini üzerine getirince kaç sitede aktif olduğu bilgisini gösteriyor.

 

 

Firebug Hakkında Hersey

Birlikte Aç Ekranı

 

Firebug Hakkında Hersey

   Birçok kişi için önemsiz gibi görünen bir özellik ancak çok önemli ve kullanışlı bir yöntem. Çünkü buradan kopyalayıp yapıştırmak sorun oluyor, koddan başka içerikleride alıyordu ve her defasında kopyala yapıştır bazı projelerde işimizi zorlaştırıyor.

   Bu ekrandan açmak istediğimiz editörleri seçebiliyoruz ekleyip çıkarabiliyoruz.

Suspend/Resume Firebug

 

 

Firebug Hakkında Hersey

Yeni eklenen bu özellik sayesinde FireBug’ın tüm panellerini bir tık ile askıya alabiliyoruz ve daha sonra bu işlemi geri alabiliyoruz. Bu daha çok cep telefonundaki tek tuş gibi bir şey.

Rainbow FireBug ile javascript kodları daha anlaşılır

FireBug’daki javascript kodları renklendirme yapılmadığı için kod yığını şeklinde görünüyor bunu da aşağıdaki gibi gösteriyorlar.

Firebug Hakkında Hersey

   Evet, anlatacaklarım buraya kadar artık firebug tüm özelliklerini biliyoruz gerisi size kalmış…

Yorumunuzu Ekleyin

Mozilla Fireshot Eklentisi

Bu bölümde sizlere mozilla web tarayıcısının sıklıkla kullanılan resim eklentilerinden biri olan fireshot eklentisini,kullanımını ve bazı özelliklerini anlatacağım.

21,905 Okunma Henüz yorum yapılmamış 24/10/2008 11:35:17

Firefox Yüklenemeyen Resim Göstergesi (Broken Images)

Web sayfasındaki her hangi bir resmin yolu yanlış verilmişse bu resmi firefox yükleyemediğini belirten bir uyarı döndürmez. Bunu düzeltmek için şöyle bir yol var.

18,186 Okunma Henüz yorum yapılmamış 18/10/2012 11:46:51 18/10/2012 11:47:28

Firebug Eklentisinin Kurulumu Ve Özellikleri

Firebug ziyaret ettiğimiz web sayfaları üzerinde istediğimiz değişikleri yaparak sayfa üzerinde görebilmemizi sağlayan bir araçtır.

18,074 Okunma Henüz yorum yapılmamış 24/10/2008 11:19:48

Firebug

17,545 Okunma Henüz yorum yapılmamış 10/10/2008 15:43:25

Firebug Firefox Eklentisi

Firebug Firefox Eklentisi Kullanımı

17,015 Okunma Henüz yorum yapılmamış 14/01/2008 00:31:11

Firebug Eklentisi

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

16,147 Okunma 2 Yorum 10/10/2008 11:28:36

Firefox FireShot Eklentisi

FireShot Mozilla Firefox8217;un Eklentisi Olan Bir ScreenShot Programıdır. Mevcut Ekran Görüntüsünü Alarak Üzerinde Oynamalar Yapmamıza İmkan Sağlayan Bir Eklentimizdir

15,680 Okunma Henüz yorum yapılmamış 20/11/2007 14:02:31

Web Developer

Resimli anlatım

15,520 Okunma Henüz yorum yapılmamış 18/01/2008 11:07:43

Web Developer

Web developer

15,436 Okunma Henüz yorum yapılmamış 18/01/2008 01:28:41

Webdeveloper

Webdeveloper kurulumu kullanımı

15,120 Okunma Henüz yorum yapılmamış 24/10/2008 15:39:52

FireShot

FireShot Kullanımı

15,075 Okunma Henüz yorum yapılmamış 17/01/2008 10:17:37

Measurelt

Kurulumu ve kullanımı

14,799 Okunma Henüz yorum yapılmamış 24/10/2008 15:40:16

FireFox FireShot

Resimli anlatım

14,769 Okunma Henüz yorum yapılmamış 18/01/2008 11:10:14

Firefox Fireshot

Ekran görüntüsünü almak ve değiştirmek için kullanılan eklentidir.

14,275 Okunma Henüz yorum yapılmamış 24/10/2008 11:48:39

Firebug

Firebug anlatımı ödevi

14,217 Okunma Henüz yorum yapılmamış 24/10/2008 11:40:34

Fireshot

Fireshot kullanımı

14,136 Okunma Henüz yorum yapılmamış 18/01/2008 04:09:45

Measure

Resimli anlatım

14,083 Okunma Henüz yorum yapılmamış 18/01/2008 11:09:37

Firefox Fireshot

Fireshot gezdiğiniz web sayfalarından ekran görüntüleri almak, aldığınız görüntülerin üzerine çeşitli notlar düşmek ve bunları paylaşmak için kullanabileceğiniz bir eklentidir...

13,849 Okunma Henüz yorum yapılmamış 10/10/2008 11:16:16

Measurelt Kurulum Ve Kullanımı

Measurelt firefox eklentisini nasıl kurup kullanacağımızı anlatan resimli anlatım

13,814 Okunma Henüz yorum yapılmamış 24/10/2008 15:52:33

Yükleniyor...