Bir web geliştiricisi için kuşkusuz en önemli işlerden bir tanesi debuggingdir. Hele bu debugging işlemi client tarafında ise bu iş gerçekten sıkıntılıdır. Visual Studio 2005'i kullananlar hatırlar, debug işlemi için zorlu ayarlardan sonra debug işlemini yapabiliyorduk. Breakpoint koymak için önce ASP.NET sayfasını çalıştırıyorduk. Bunun gibi sıkıntılı işler ile debug işlemi birleşince çok zaman kaybediyorduk.
Visual Studio 2008 ile gelen web tarafındaki en dikkat çekici özelliklerden biri kuşkusuz Javascript Debugging. Orcas ile Javascript kodlarımızı çok kolay bir şekilde debug edebiliyoruz. Aynı C# ya da VB kodlarını debug eder gibi, ASP.NET ya da external javascript dosyalarımızdaki kodlara breakpoint atıp bu kodları debug edebiliyoruz.
Visual Studio 2008 ile gelen javascript debugging desteğine geçmeden, Visual Studio 2008 den önceki durumu biraz daha açalım isterseniz. Visual Studio 2005'de bir ASP.NET uygulamasındaki javascript kodlarını debug etmek için Visual Studio 2008'de olduğu gibi bazı ilk ayarların yapılması gerekiyor. Bu ayarlar hem Visual Studio 2008 hem de Visual Studio 2005 için geçerli olan ayarlar.
Ayarlar
Step 1 (Visual Studio 2005 ve 2008 için ortak)
web.config dosyasında <compilation debug="true"...> debug özelliğini true yapıyoruz.
Step 2 (Visual Studio 2005 ve 2008 için ortak)
Daha sonra Internet Explorer'a girip Tools -> Internet Options -> Advanced sekmesinde;
Disable Script Debugging (Internet Explorer) ve Disable Script Debugging (Other) seçeneklerindeki tiki kaldırıyoruz.
Step 3 (Visual Studio 2003 ve 2005 için)
Debugging ve Breakpoint
Debug etmek istediğimiz javascript kodunun başına debugger; yazıyoruz. Artık uygulama çalıştıktan sonra breakpointlerimizi koyup debug yapabiliriz. External .js dosyalarında proje çalıştırılmadan breakpoint koyma şansımız var. Proje yüklendikten sonra bu breakpointler debugger sayesinde aktif olacaktır.Eğer VS2003 kullanıyorsanız, menüden Tools->Attach a process'ı seçip aspnet process'i seçerek eklemeniz gerekiyor. Debug->Windows->Script Explorer'ı seçerseniz, Script Explorer'da çıkan processler çalıştırılacak olan dosyaların tree şeklindeki listesini gösteriyor.Visual Studio 2005'te bu işlem otomatik olarak yapılıyor. Tabi bu işlem sadece external .js dosyaları için, html ya da ASP.NET sayfalarındaki gömülü scriptlere uygulama çalışmadan breakpoint koyamıyoruz.
Visual Studio 2008'den önceki durumu kısaca özetlersek, bir ASP.NET sayfasındaki gömülü olan javascript kodlarının debug edilebilmesi için önce projenin yüklenmesi ve çalıştırılması gerekiyor. debugger; anahtar sözcüğünü kullanarak breakpointleri proje çalıştıktan sonra koyabiliyoruz. External .js dosyalarında breakpoint koyma şansımız var. Eğer VS2003 kullanıyorsanız, debugger'ı aktif etmek için proje çalıştırılırken kullanılan processlere aspnet process'ini attach etmeniz gerekiyor. Uygulama debug moduna geldiğinde ise, server taraftaki kodumuz gibi debug edebiliyoruz.
Debug işlemini gerçekleştirmek için bazen third-party eklentiler ya da ürünler kullanılabiliyor. Bunlardan bir tanesi Firebug. Firebug ile css,html ve javascript kodlarını edit edip izleyebiliyoruz. Firefox eklentisi olarak geliyor. IE tarafında da buna benzer eklentiler var. Aptana ise diğer bir ürün bu program ile javascript dosyalarını debug edebilir ve javascript intellisense desteğini kullanabiliriz. Ama bu third-part ürünler, üçüncü bir yazılım oldukları için, malesef bütünleşik bir yapıda değiller. Yani server tarafındaki kodları Visual Studio ile debug ederken, client taraftaki kodları bu third-party ürünler ile yapmak zamandan ve maliyetten kaybettiriyor.
Visual Studio 2008 Javascript Debugging
Javascript debugging, Visual Studio 2008 ile birlikte daha bütünleşik ve kolay bir şekilde geliyor. En önemli özellik ise, server ve client tarafındaki debug işlemlerini tek bir IDE uzerinden yapabiliyor olmamız. Bu özellik en çok AJAX uygulamalarında, yazılım geliştiriciye büyük bir kolaylık sağlıyor. Server tarafında yaptığımız işleri VB/C# kodlarını debug ederken, veriyi işleme, görüntü üzerinde değişiklik gibi konularda da client taraftaki javascript kodlarını debug edebileceğiz.
Öncelikle, VS2008'den önce ASP.NET sayfasının içindeki javascript kodlarına ASP.NET uygulaması çalışmadan breakpoint atamıyorduk. VS2008 ile gerek ASP.NET sayfası içindeki gömülü scriptlere, gerek de external .js dosyasındaki javascript kodlarına breakpoint atabiliyoruz. Bunu yaparkende debugger; anahtar sozcüğünü kullanmamıza da gerek yok.
Debug modundayken breakpoint'in aktif olduğunu göreceksiniz. Yalnız burda dikkat edilmesi gereken bir nokta var. Debug modundayken debug ettiğimiz dosyanın tab sekmesinde yeni bir kopyasının geldiğini ve adının sonunda [dynamic] olması. VS2005 ve VS2003'de yapılan process ekleme işlemi gibi internet explorer process'ine link verilmesi işleminin aslında burda da benzer mekanizma kullandığını bize gösteriyor. Ama detaylar bizim için önemli değil. Önemli olan debugging işlemini ayar gerektirmeden, server taraftaki kodları debug edermiş gibi yapabilmemiz.
Debug işlemini yaparken nesnelerin, methodların ve eventlerin daha zengin bir izleme yapılabilmesi debugging için en önemli özelliklerden bir tanesi. Visual Studio 2008 ile debug edilen nesnenin özellikleri, methodları ve bunların değerleri tipleri ile beraber görüntülenebiliyor. Visual Studio 2005'de sadece özellikler görünebiliyordu ve bu özelliklerin tipleri String ya da Object olarak gösteriliyordu. Orcas ile daha detaylı olarak nesnelerin özelliklerinin tipleri görüntülenebiliyor.
Visual Studio 2005'de Nesnelerin çalışma zamanındaki özellikleri
Visual Studio 2008'de Nesnelerin çalışma zamanındaki özellikleri ve tipleri, methodları ve eventleri
Özellikler ve değerleri;
Methodlar , parametleri ve dönüş tipleri
Çalışma zamanındaki nesnelerin eventleri
Çalışma zamanındaki HTML elementlerinin özelliklerinin değerlerini ve tiplerini HTML DOM'daki yerini görmekte mümkün. Örneğin, divElement'inin parentElement özelliğinin altındaki özellikler ve tipleri aşağıdaki resimde gösterilmiştir.
Nesnelerin özelliklerini çalışma zamanında, "Immediate Window" penceresinden javascript kodları yazarak değerlerini alabiir ya da değiştirebiliriz.
