Uzun zamandır üzerinde yazmak istediğim bu konuyu sonunda sizlerle paylaşabiliyorum. Bu konuyu ele alan iyi bir türkçe kaynak bulamadım. Umarım benim gibi bu konuda sorunlar yaşamış arkadaşlara yardımcı olabilirim. Yazıda kısaca, javascript programlarken hata ayıklamakta ve konsol kullanmakta size yardımcı olacak FireFox eklentisi Firebug ve Internet Explorer gibi diğer tarayıcılarda kullanabileceğiniz başka çözümlerden bahsedeceğim. Ayrıca kısaca MS Script Debuggger ve MS Visual Studio ile javascript hata ayıklamasından bahsedeceğim.
Eğer javascript kodu yazıyorsanız, yaşadığınız ilk sorun muhtemelen istediğiniz değişkenleri, bilgileri yazdırabileceğiniz bir konsolun olmamasıdır. Dolayısıyla javascript hata ayıklaması çok zor bir hale geliyor. Bunun en basit ve hızlı çözümü alert('') fonksiyonu ile bir mesaj kutusu patlatıp içinde istediğiniz bilgiyi, değeri göstermek. Örneğin, alert(degisken1) ile degisken1 değerini mesaj kutusu olarak patlatabilirsiniz. Fakat buradaki sorun alert fonksiyonun kodu çalışmasını siz OK düğmesine basana kadar duraklatması. Bu durum animasyon kodları gibi, fare hareketlerine bağlanan kodlar ve v.b. kodların içinde kullanılmasını imkansız hale getiriyor.
Buna çözüm olarak, Firefox tarayıcısının Firebug isimli eklentisini kullanabilirsiniz. Bu eklenti aslında sadece javascript hata ayıklaması için kullanılan bir eklenti değil. Eğer bir web programcısıysanız, sizin için bir çok güzel aracı barındıran bir eklenti. Mutlaka indirip kullanın. Vazgeçemeyeceğiz bir araç olacak. Aşağıda ekran görüntüsünü gördüğünüz eklentide, "script" sekmesinde javascript kodlarınızı görebilir, bu ekranda durma noktaları (breakpoint) koyabilir, gözlem(watch) panelinde değişkenlerinizin o anki değerlerini görebilirsiniz ya da konsol sekmesinde o anda yazdığınız bir javascript kodunu çalıştırabilirsiniz.
Burada durma noktaları ile hata ayıklama çok faydalı olsa da yine alert() durumunda olduğu gibi çalışan kodu duraklatması sorunu ile karşılaşırız. Dolayısıyla bir konsol ihtiyacımız hala var. Burada Firebug imdadımıza console.log() fonksiyonu ile koşuyor. Javascript kodunuzun içindebu fonksiyonu Firebug konsoluna (console sekmesi) istediğiniz bilgiyi, değişkeni ve objeyi yazdırmak için kullanabilirsiniz. C dilindeki gibi string yer değiştirmesi de kullanabileceğiniz bu fonksiyonun kullanımına örnek olarak:
console.log('hesapla methodu cagirildi');
// C dilindeki gibi:
console.log('degisken1: %d', degisken1);
// virgulle birlestirme:
console.log('degisken2: ', degisken2);
Ayrıca, zamanlama tutmanızı sağlayan aşağıdaki fonksiyonlarda işinize yarayabilir:
// isim ile adlandirilmis bir zaman tutucu baslatir
console.time(isim)
// isim ile adlandirilmis zaman tutucuyu durdurur
// ve ne kadar zaman geçtiğini yazar.
console.timeEnd(isim)
Daha fazla bilgi, örnek ve diğer fonksiyonlar için Firebug Command Line API 'a bakabilirsiniz.
Şimdi gelelim Interner Explorer, Safari ve Opera tarayıcılar için ne yapacağımıza. Çünkü Firebug bir Firefox eklentisi ve console.log fonksiyonu Firebug olmayan tarayıcılarda hataya yol açar (çözüm için okumaya devam edin). Bu yazıya başlarken, FireFox dışındaki tarayıcılarda kullanmanız için CNET Clientside kütüphanesinde bulunan Debugger.js aklımdaki çözümdü. Fakat yazı için Firebug sitesinde dolanırken, Firebug Lite karşıma çıktı. Madem Firebug ile başladık Firebug Lite ile devam edip CNET'in kütüphanesinden sonra bahsedeceğim.
Firebug Lite, aslında bir javascript kütüphanesi ve Firebug'in konsol kısmının hafif versiyonu. Şu anki sürümünü buradan indirebileceğiniz Firebug'ı sayfanıza <script> tagı ile bir javascript olarak ekliyorsunuz. Ekledikten sonra sayfanıza bakarsanız değişiklik göremeyeceksiniz. Çünkü Firebug Lite konsolunu siz F12'ye basana kadar açmıyor. F12'ye basınca Firebug'dakine benzer bir konsol aşağı tarafta açılıyor. Eğer sürekli F12 ye basmak istemiyorsanız, <body> tagınıza debug="true" eklemen'z gerekiyor. Şöyleki:
<body debug="true">
Eğer Firebug Lite kullanmak istemiyorsanız fakat console.log() çağırımlarınızın hataya yol açmasını istemiyorsanız, Firebug Lite içinde bulunan firebugx.js javascriptini sayfanıza eklemeniz yeterli olacaktır.
Son olarak, CNET Clientside kütüphanesinin içinde bulunan Debugger.js 'den bahsedeceğim. Aslında bu scriptde aynı Firebug Lite gibi Firebug benzeri bir konsol sunmaktadır. Firebug bulunmayan ortamlarda konsol otomatik açılmaktadır. Eğer Firebug varsa, araya girmeyip Firebug'ı kullanmanıza imkan sağlamaktadır.
Yazıyı kapatmadan kısaca MS Script Debugger ve MS Visual Studio ile javascript hata ayıklamasında bahsedeceğim. Bu iki yazılımı da IE için hata ayıklamasında kullanabiliyorsunuz. Ama önce IE'de aşağıdaki ayarların yanındaki tikleri KALDIRMALISINIZ.
Tools->Internet Options…->Advanced->Disable Script Debugging (Internet Explorer)
Tools->Internet Options…->Advanced->Disable Script Debugging (Other)
Daha sonra javascript kodunuzu içinde kullanacağız aşağıdaki satır ile kodun çalışmasını durdurup "debugger" yazılımınızı çağırabilirsiniz. (Firebug içinde geçerli)
debugger;
Fakat özellikle script debugger yazılımı çok kullanışsız ve genelde IE'nin çökmesi ile sonuçlanıyor. Visual Studio ile ise başarı hata ayıklama yapmak mümkün. Visual Studio'nun gözlem (watch) ekranları, çağırım sırası ekranı (call stack) javascript içinde kullanılabilmektedir. Daha fazla bilgiyi buradan bulabilirsiniz.
Sonuç olarak, Firebug eklentisi javascript hata ayıklaması ve konsol için en kullanışlı, kuvvetli ve başarılı yazılım. Fakat mutlaka IE'de ve diğer tarayıcılarda da böyle bir imkana ihtiyacınız olacaktır. Aynı scriptin birinde çalışıp birinde çalışmaması maalesef genelde alışık olunan bir durum. Dolayısıyla bahsettiğim diğer çözümlerin işinize yarayacağını umuyorum.
Mutlu kodlamalar:)
No comments:
Post a Comment