Web Debugging – Hata Ayiklama (Fiddler Aracinin Kullanimi)

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.

fiddler
http trafik akisi
.

Kullanimi

Öncelikle fiddler programini indirip kurmak gerekiyor. Download adresi : http://www.fiddler2.com/fiddler2/version.asp

fiddler

Kurulumdan sonra browserimizi açinca fiddler ikonunu görecegiz

fiddler

Artik ikona tiklayarak fiddler programini çalistirabiliriz. Program açikken browsera www.yazilimmutfagi.com yaziyorum bu sirada olan tüm trafik fiddler ‘ a yansiyor:

fiddler

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

fiddler

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";
 }
}

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.

fiddler
fiddler

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:

fiddler

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.

fiddler

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";
 }
fiddler
fiddler

Daha detayli script örnekleri için: http://www.fiddler2.com/Fiddler/dev/ScriptSamples.asp .

Tags:

4 thoughts on “Web Debugging – Hata Ayiklama (Fiddler Aracinin Kullanimi)

Bir cevap yazın

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