‘firebug’ etiketi için sonuçlar
Küçük bir ipucu: FireBug ile satır numarası bilgisi
Mart 11th, 2010 • 3 yorum CSS
Etiketler: DragonFly, firebug, Firefox, ipucu, Opera, satır-numarası
Bazen kullandığım programların alternatiflerini araştırıyorum. Amacım eğer daha güzel ve daha kullanışlı özellikleri varsa onlardan yararlanmak.
Opera 10.50 çıkınca bir inceleyeyim dedim. Gayet hoş, güzel, hızlı. Birde beni Firefox’a bağlayan en büyük etken olan FireBug’ın Opera’daki alternatifi DragonFly’ı inceleyeyim dedim.
DragonFly ilk çıktığından buyana bayağı bir yol kat etmiş açıkçası. Aslında FireBug’ı taklitten başka bir şey değil ama olsun oda bir marifet. Microsoft gibi bir firma bile beceremediğine göre büyük bir şey olsa gerek.
DragonFly gerçekten güzel. FireBug’a alternatif bir kaç görsel güzellikleri var.
Gelelim küçük ipucumu yazmama neden olan kısıma. FireBug’da beni cezbeden şey, ayrıntılarında bir çok avantajın gizli olması. Bunlardan biri seçtiğimiz elemanı etkilyen tanımların hangi doküman içinde yer aldığını göstermesi ve hangi satırda olduğunu belirtmesi. Belki küçük bir ayrıntı ama benim çok işime yarıyor. Hemde çok.
4-5 ay önce ben css kodlarımı her tanım bir satıra gelecek şekilde yazıyordum. Sebebi çok açık kodların okunabilirliği artıyordu böylece. Sonra fark ettim ki ben kodları okumuyorum artık FireBug ile yakalıyorum ve satır numarasından ilgili dokümanı açıp müdahele ediyorum. Bununda etkisi ile her satırda bir tanım yerine her satırda bir seçici şeklinde css dosyalarımı yazmaya başladım ve bu bana çok büyük bir yer kazandırdı.
Evet bazı küçük özellikleri fark etmesekde bize çok büyük faydalar sağlayabiliyor.
Sağol FireBug. Sen olmasan bu iş gerçekten zor olurdu.
FireBug 1.5 Çıktı
Ocak 27th, 2010 • 5 yorum Haberler
Etiketler: css düzeltmeleri, firebug, Firefox, Firefox Eklentileri
FireBug 1.5 sürümü çıktı. Çıkalı biraz zamanda oldu ama ben anca yazabildim. Yenilikleri burada sizlere anlatacağım. Bir önceki sürümde yenilikler vardı ama bununla birlikte bazı sorunlarda yaşadık. Yeni sürümde bir çok sorunun giderildiği söyleniyor. Kullandığım kadarı ile iyi, yalnız sorunsuz değil. Yeni sürüm aynı zamanda Firefox’un yeni sürümüne yakın çıktığı için her ikisinide destekliyor. Hem Firefox 3.5 hemde 3.6′yı destekliyor.
Teftiş Et(Inpect Element) Teftiş Et kısmı geliştirilmiş. Artık daha sorunsuz çalışıyor. Quick Info bölümü ile seçilen elemanın bilgileri anında görülebiliyor. Ayrıca Image Map yakalama kısmı eklenmiş.
HTML Paneli: HTML düzenleme kısmı geliştirilmiş. Bir nesneye uygulanan tüm stil atamaları ve etkin stil atamaları artık iki ayrı sekme(Style ve Computed) halinde verilmiş. Sağdaki Layout kısmına position ve z-index değerlerinide gösteriyor artık. MathML ve SVG namespace desteği gelmiş.
CSS Paneli: Css panelde aktif elemanın sözde-sınıflarının(pseudo) hepsi görünüyor ve bunları değiştirebiliyoruz. Bu özellik iyi olmuş, burada sorun yaşıyorduk açıkçası.
Sistemden gelen özellikleri artık görebiliyoruz. Sadece okunabilir.
CSS kısayollarını göster ve gizle yapabiliyoruz.
Javascript Paneli: Gelişmiş inceleme-noktaları oluşturabilme özelliği eklenmiş. Bir çok panel artık inceleme-noktası oluşturabiliyoruz. Dondur işaretinin olduğu kısımlarda buraya kadar incele imkanı veriyor.
Net Paneli: Net panelindeki zamanlama hataları giderilmiş ve geliştirilmiş. Net panelin çalışma mantığı değiştirilmiş ve tam sonuçların alınması sağlanmış. Ayrıntılı bilgi için tıklayınız.
Console ve Net panele Persist özelliği eklenmiş. Eski ile yeniyi karşılaştırma imkanı sağlıyor bu buton bize. Firefox önbelliğini pasifleştirme butonu eklenmiş.
XHR inceleme noktası oluşturabiliyoruz.
Kolonları çıkarabiliyor ve ekleyebiliyoruz.
Gelen ve giden veriler araç ipuçu içinde gösteriliyor.
Araç Çubuğu ve Menüler: Arama kısmını geliştirilmiş. Küçük büyük harfe duyarlı arama yapabiliyoruz ve ileri doğru ve geriye doğru arama yapabiliyoruz. Kapama düğmesindeki “Off” yazısı kaldırılmış.
Sonuç
Sonuç olarak şunu söyleyebilirim; daha önceki sürümlerde yenilikler ile birlikte bazı sorunlarda beraberinde geliyordu bu sefer daha bir oturmuş gibi bu araç. Daha yapısal değişiklikler ve çözümler üretilmiş. Web geliştiricileri için olmazsa olmaz olan FireBug sorunları olsada bir numaralı yerini kimseye kaptırmıyor.
Kaynaklar
- http://getfirebug.com/wiki/index.php/Firebug_Release_Notes
- http://www.softwareishard.com/blog/
- http://lifehacker.com/5453025/firebug-15-updates-with-new-features-still-a-web-developers-dream
- http://hacks.mozilla.org/2010/01/firebug-1-5-a-closer-look/
- http://hacks.mozilla.org/2010/01/firebug-1-5-released/
- http://www.markwarner2008.com/firebug-1-5-updates-with-new-features-still-a-web-developers-dream-downloads/
FireBug 1.4 sürümü çıktı
Temmuz 19th, 2009 • 3 yorum CSS, XHTML
Etiketler: firebug, Firefox, Hata ayıklama, web
Firebug 1.4 sürümü çıktı. Firebug web sitelerine tarayıcı üzerinden düzenleme ve denetleme yapabileceğimiz, ayrıca hata ayıklaması yapmamızı ve network hareketlerini izlememizi sağlayan güzel bir Firefox eklentisidir. HTML, CSS ve javascript kodlarına tarayıcı üzerinden etkileşimli olarak müdahale etme olanağı sağladığı için biz web kod yazarları için bulunmaz bir araçtır.
Yeni sürüm ile gelen özellikler;
- Sekmeleri üste alınmış. Görsel olarak biraz daha derli toplu olması için. Eskiye alışanlar için ilk başta biraz garip olsada zamanla alışacağız.
- Birden fazla panelde arama imkanı. Bu bir çok zaman gereksinim duyduğumuz bir şey idi.
- Daha gelişmiş bir Net paneli
- Panel akif-pasif geçişi kolaylaştırılmış.
- Script paneli performansı arttırılmış.
- Firefox 3.5 desteği var
Bunun dışında 150′den fazla hata giderilmiş.
CSS İpucu 18: Optimizasyon İçin CSS Medya Dosyalarını Birleştirmek
Şubat 16th, 2009 • 3 yorum CSS, XHTML
Etiketler: birleştirme, CSS, firebug, Firefox, optimize, yazıcı, YSlow
Bir çok web kod yazarı için sayfaların yavaş açılması büyük bir sorundur. Bu sorunun çözümü için çeşitli metotlar uygulanır. Farklı araçlar ile testler yapılır çözümler üretilmeye çalışılır. Sonuçta en kararlı hale ulaşılmaya çalışılır.
Bende bir test aracı ile(Firefox – FireBug – YSlow) test ediyorum. Test ettiğim siteler HTTP isteklerinin çokluğundan dolayı düşük puan alıyor. Fazla sayıda css ve javascript dosyasının eklenmesi bu soruna neden oluyor. Bunun için en kolay ve basit yöntem css ve js dosyalarını birleştirmekten geçiyor.
Genelde projelermizde css dosyalarımızı genel stil için ve yazıcı için olmak üzere ikiye ayırıyoruz.
<link rel="stylesheet" href="/style/iskelet.css" type="text/css" media="screen" /> <link rel="stylesheet" href="/style/yazici.css" type="text/css" media="print" />
Normal ve çıktı almak için bunları bir css dosyasında birleştirerek HTTP istek sayısını azaltabiliriz.
<link rel="stylesheet" href="/style/iskelet.css" type="text/css" />
gibi iskelet.css içeriğinin yapısı ise aşağıdaki gibi olacaktır.
/* all media */
@media all
{
body { color:#666; font:13px arial, helvetica, sans-serif; padding:20px 0 30px 0; }
}
@media print
{
body { color:#000; font:12px arial, helvetica, sans-serif; padding:0; }
}
şeklinde yaparak css dosyalarımızı tek dosya içerisinde toplayabiliriz.
Daha fazla sayıda css dosyası kullanmamız durumunda ise sunucu veya istemci taraflı kod yardımı ile css veya js dosyalarımızı tek bir dosya gibi gösterebiliriz. Bu konuya burada girmeyeceğim. Konu ile alakalı çalışmaların linklerini aşağıda veriyorum.
Kaynak
- http://davidwalsh.name/combine-css-media-styles-file
- http://developer.yahoo.com/performance/rules.html#num_http
- http://www.vulgarisoip.com/2007/06/21/minify-your-external-javascript-and-css-with-php/
- http://www.websiteoptimization.com/speed/tweak/http/
- http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml
- http://yuiblog.com/blog/2006/11/28/performance-research-part-1/
- http://www.sitepoint.com/blogs/2007/04/10/faster-page-loads-bundle-your-css-and-javascript/
- http://www.jaisenmathai.com/blog/2008/02/27/speed-up-apache-how-i-went-from-f-to-a-in-yslow/
- http://www.cloudfour.com/77/easy-steps-to-speedup-your-wordpress-blog/
FireBug İpucu : FireBug’ın Yetenekleri
Ekim 23rd, 2008 • 8 yorum CSS, XHTML
Etiketler: anında-düzeltme, eklenti, firebug, Firefox
FireBug ile ilgili bir makale yazacağım ama bugün internette gezerken bir makaleye(50’den fazla doku kaynağı ile ilgili olan) bakıyordum birden aklıma yau benim sitenin ardalanına bunlardan hangisi uygun kaçar diye düşünmeye başladım. Sonra düşünmekten daha kolay bir yolunu buldum.
Aslında bir yazı olacak bir konu değil ama FireBug’ın yapabildiklerini görmek açısından önemli bir bilgi.
Sitedeki dokuları tek tek denemeye başladım. Resme sağ tıklayıp konumunu kopyaladım.
Sonrada kendi siteme gidip FireBug’ı açıp body elementini yakaladım ve ardalan olarak konumunu kopyaladığım resmi koydum. İlkini beğenmedim. Sonunda beğendiğim bir doku buldum.
Adım adım yaptıklarımı görmek için tıklayınız.(hareketli gif)
Siteme bu dokuyu uygulamasam da anında sonucu görebilmem ne kadar güzel bir şey olduğunu gördüm ve bunu sizlerle paylaşmak istedim.
Hiç sitenin kodlarına dokunmadan, herhangi bir resim kopyalamadan, site üzerinde bu dokuyu test edebilmek çok güzel.
FireBug 1.2 ve yenilikleri
Eylül 16th, 2008 • 6 yorum CSS, Haberler, Javascript, XHTML
Etiketler: CSS, firebug, Firefox 3, Hata yakalama, Javascript, XHTML
Daha önce FireBug’ın genel özelliklerinden bahsettik. Sıra FreiBug ile CSS ve Xhtml yazmaya gelmişti ki yeni sürüm çıkınca bu makaleyi yazma ihtiyacı duydum.
Web kod yazarları için büyük kolaylık sağlayan FireBug’ın yeni sürüm çıktı ama kimseden ses çıkmadı. Belkide Google Chrome duyurusunun altında ezildi. Ama Google Chrome’un benim için en büyük dezavantajı FireBug gibi gelişmiş bir CSS ve XHTML aracının olmamasıdır. Aslında ben bile geç kaldım, çünkü ben yazana kadar 1.2.1 sürüm çıktı.
FireBug’ın yeni sürümünde daha çok hata düzeltme, güvenlik düzeltmeleri ve kararlı hale getirme işlemleri göze çarpıyor.
Göze çarpan özellikleri incelersek; Okumaya devam edin »
