Debugging, hata ayiklama, programcinin olmazsa olmazi diyebiliriz. Kodlama sirasinda çikan hatalarda ya da hatasiz çalisan programda istenen sonuç dönmeyince, nerde hata yaptim diye satirlari incelemeye baslariz. Genelde kodlama sirasinda çikan hatalarimizda derleyici neyi yanlis yaptigimizi söylerken, runtime' da hatalarla karsilasinca ya da islemde bir yanlislik varsa isler biraz zorlasir. Pek çogumuz breakpoint'lerle adim adim inceleme yapariz, eger javascript kodlarimiz varsa alert'ler kullanarak isin içinden çikmaya çalisiriz. Tabi bu durum her zaman ise yaramayabilir, ya da çok can sikici bir hale dönüsebilir. Bu durumlarda browserda aslinda neler oldugunu ögrenmek için http requestlari takip edebilecegimiz programlar var. Fiddler bunlardan birisi.
Fiddler Nedir
Fiddler, bilgisayar ve internet arasindaki tüm web trafigini takip eden ve detayli bir sekilde analiz yapmamizi saglayan ücretsiz bir http debugging (Hata Ayiklama) programidir. Bu program, http trafigini incelememize, kirilma noktalarini ayarlamamiza ve bilgisayarimiza gelen veriler ve çikan veriler üzerinde oynamalar yapmamiza olanak saglar. Aslinda NetMon ya da Achilles gibi uygulamalarla ayni isi yapar ama Fiddler'in çok daha basit bir kullanimi vardir ve ücretsizdir. Explorer, Google Chrome, Apple Safari, Mozilla Firefox, Opera vs. tüm browserlarda çalisir. Ayrica Windows Phone, iPod/iPad, gibi cihazlarda da kullanilabilir. Yapisal olarak JScript.NET kodlama alt sistemini içeriyor.
Kullanimi
Öncelikle fiddler programini indirip kurmak gerekiyor. Download adresi :http://www.fiddler2.com/fiddler2/version.asp
Kurulumdan sonra browserimizi açinca fiddler ikonunu görecegiz
Artik ikona tiklayarak fiddler programini çalistirabiliriz. Program açikken browsera www.yazilimmutfagi.com yaziyorum bu sirada olan tüm trafik fiddler ' a yansiyor:
Soldaki pencerede http session listesini görebilirsiniz, sag tarafta ise farkli sekmelerde pek çok islemi görebiliriz. Mesela loglar, islemlerimize ait istatistikler, requestleri düzenleme, trafik yogunlugunu gözleme vs.
Breakpoint :
Fiddler da tüm HTTP isteklerini ve yanitlarini görebiliriz, bunun yaninda breakpointler kullanarak HTTP trafigini durdurabilir, islemleri adim adim takip edebilir veya edit yapabilirz. Bunun için Rules sekmesinden breakpoint ayarlarimizi düzenlememiz gerekir
Artik yapilan her bir islem adim adim "resume" butonuna bastikça ilerleyecek.
Fiddler'da . NET Framework kullanimi
Fiddler, JScript. NET kodlari kullanarak kullanicinin otomatik olarak HTTP istek veya yanitlarini degistirmemize olanak tanir. Örnek olarak cookie ler yüklendiginde Ui lerin rengini degistiren bir kod yazalim:
static function OnBeforeRequest(oSession:Fiddler.Session)
{
if (oSession.oRequest.headers.Exists("Cookie")){
oSession["ui-color"] = "purple";
oSession["ui-bold"] = "cookie";
}
}
{
if (oSession.oRequest.headers.Exists("Cookie")){
oSession["ui-color"] = "purple";
oSession["ui-bold"] = "cookie";
}
}
Simdi yazdigimiz bu kod parçasini fiddler'a ekliyoruz. Bunun için menüden " Rules—Customize rules" a tikliyoruz. Açilan NotPad'da OnBeforeRequest fonksiyonunu bulup Kodumuzu ekliyoruz.
Böylece artik requestler sirasinda cookie islemleri mor renkte görünecek. Bu ve buna benzer pek çok islemi jscript kodlari kullanarak yapabiliriz.
Performans Ölçme
Hiz ve performans web sitemiz için olmazsa olmazdir. Yeter ki hizli olsun diye bazen kodlama sirasinda olmadik seyler yapariz. Ama yine de performansi istedigimiz gibi olmaz. Nerde yanlis yaptigimizi anlamak da bir hayli zor olur tabi. Bu gibi durumlarda hangi islem ne kadar zamanda oluyor, her adim ne kadar performans kaybettiriyor vs. görmek için fiddler'i kullanabiliriz.
Fiddler programini açip Statistics sekmesine geliyoruz. Burada Yapilan her bir islem için detayli açiklamalar var. Mesela www.yazilimmutfagi.com adresinde main.css yüklenirken ne kadar performans harcanmis, bu islem ne kadar sürede bitmis, ne kadar veri aktarilmis hepsini detayli bir sekilde görebiliriz:
Bu islem her bir request için tek tek yapilabilecegi gibi toplu olarak da incelenebilir. Bunun için ctrl tusu yardimiyla, perfonmansini görmek istedigimiz requestleri seçebiliriz.
Sitenizde http trafigini hizlandirmak için ipuçlari:
- Tüm css kodlarinizi tek bir CSS dosyasinda tutun.
- Mümkün oldukça az grafik kullanin.
- Script bloklarinizi tek bir JS dosyasinda toplayin.
- Sayfa düzeninizi basitlestirin.
- HTTP Compression kullanin.
Web uygulamalari hizlandirmak için iki önemli faktör:
- Istek / yanit gidis gelis sayisini azaltmak.
- Sunucu ve istemci arasinda aktarilan bayt sayisini azaltmak.
Simdi Performans islemlerinde Fiddlerdan daha fazla faydalanmak için neler yapabiliriz bakalim. Mesela 30kb'dan büyük islem adimini kirmizi renkle bildir seklinde bir kod yazalim. Rules—>Customize rules 'a gelip "OnBeforeResponse" fonksiyonunun içine kodumuzu ekliyelim:
// Flag files over 30KB
if (oSession.responseBodyBytes.length > 30000)
{
oSession["ui-color"] = "red";
oSession["ui-bold"] = "true";
oSession["ui-customcolumn"] = "Large file";
}
if (oSession.responseBodyBytes.length > 30000)
{
oSession["ui-color"] = "red";
oSession["ui-bold"] = "true";
oSession["ui-customcolumn"] = "Large file";
}
Daha detayli script örnekleri için: http://www.fiddler2.com/Fiddler/dev/ScriptSamples.asp
Yorumlar
Yorum Gönder