Visual Studio JavaScript Debug - JavaScript Kod Analiz Teknikleri

Çoğu yazılım geliştiricisinin kabul ettiği bir şey var ki, hızlı ve kolay kod yazmak için en gelişmiş imkanlar sunan IDE Visual Studio'dur.  İster Microsoft destekli programlama dillerinde yazılım geliştirin, isterse de diğer programlama dilleri ile Visual Studio yazılım geliştiricilerinin işini çok kolaylaştırır. 
Diğer taraftan 1995'ten itibaren web dünyasının popüleriliğini hiç kaybetmemiş dili JavaScript. JavaScript ile çalışan çoğu yazılım geliştiricin en çok sıkıntı yaşadığı durumlarda bir tanesi belki de diğer programlama dillerinde olduğu gibi kodu debug edememe olabilir. Oysa bir programlama dilinde minimum hatayla kod yazabilmenin anahtarı çoğu zaman kodu gidişatını satır satır incelemek olabilir. Bu makalemizde Javacript programlama dilinde debug tekniklerini ve bu tekniklerini, JavaScript programlama dilinde kod analizinin nasıl yapıldığını ve Visual Studio ile JavaScript Debug konusuna değineceğiz. 

Minimum hatayla kod yazmanın anahtarı kesinlikle kodu yazdıktan sonra satır satır incelemekten geçer. Bunun için en iyi yöntem debug işlemidir. Bu işlemle aynı zamanda işlemlerden doğru bir sırayla yapıldığını, girdi ve çıktıların doğruluğunu kontrol edebilirsiniz. JavaScript web dünyasının en çok kullılan programala dili olsa da çoğu IDE'nin JavaScript Debug işlemi için az imkan sunduğunu tecrübelerim bana gösteriyor. Bunlar içerisinde en kullanışlısı Visual Studiodur diyebilirim.
Javascipt  programlama dilinde debug işlemini yapabilmemiz için öncelikle yapmamız gereken birkaç ayar var. Bu işlemleri hallettikten sonra örnek üzerinden debug işleminin nasıl yapılacağını anlatacağım. Bu ayarlardan ilki İnternet Seçeneklerinden varsayılan ayar olarak gelen JavaScript kod hata ayıklamasını devre dışı bırak ayarlamasını deaktif etmek olacaktır. Bunun için Denetim Masası => İnternet Seçenekleri => Gelişmiş =>Tarama altındaki Kod Hata Ayıklamasını Devre Dışı Bırak(Diğer) ve Kod Hata Ayıklamasını Devre Dışı Bırak(Internet Explorer) ayarlarını aşağıdaki resimde olduğu gibi deaktif edeceğiz.

Burada bu iki seçeneği deaktif ettikten sonra Uygula dedikten sonra tamam deyip çıkabiliriz. Sadece tamam derseniz yaptığınız değişiklikler bilgisayarı kapatıp açtıktan sonra aktif hale gelecektir. Buradaki deaktif ettiğimiz iki seçenek önlerinde de yazıldığı gibi hangi browserlarda debug edebileceğinizi seçmeniz içindir.

ÖNEMLİ: Eğer Visual Studio içerisinde JavaScript kodunu debug etmek istiyorsanız İnternet Explorer seçeneğini mutlaka deaktif etmelisiniz. Çünkü Visual Studio içinde JavaScript kodunuzu debug edebilmek için projeyi İnternet Explorer kullanarak başlatmalısınız.

Web projenizi Asp.NET kullanarak geliştiriyorsanız deaktif etme işleminden sonra projenizi İnternet Explorer kullanarak başlatırsanız JavaScript kodunu debug edebileceksiniz. Normal breakpoint atarak da işlemlerinizi test edebilirsiniz.

Eğer web projenizi JavaScript Frameworklerinden birini kullanarak veya Pure JavaScript(Saf JavaScript) kullanarak geliştiriyorsanız da bu işlemlerden sonra artık Javascript kod satırlarına breakpoint atablirsiniz. Sadece önemli olan nokta bu işlemin sadece İnternet Exploror ile birlikte çalışmasıdır. Yani chrome, safari, mozilla firefox, opera ve b. borwserlarda debug etmek isterseniz Visual Studio bu işleme destek vermez. Ama bunun çözümü de breakpoint atacağınız yere debugger sözünü yazmak olacaktır. Aşağıdaki kod satırları ile bu konuyu örnek üzerinden anlatacağım. Bu işlemi aynı zamanda kullandığınız tüm IDE'lerde uygulayabilirsiniz. Bu işlemin farkı ise kod incelemenizi seçtiğiniz browser üzerinde yapacağınızdır. Ben chrome kullanarak yaptım ve örnek ekran görüntüsünü de sizinle paylaşıyorum.

scope.HataBildirimModel = {
            HataBildirimMesaji:"",
            MailAtilmaIzni:false,
            MesajAtilmaIzni: false,
            AramaYapilmaIzni:false
        }

        scope.HataBildir = function () {
            debugger
            if (scope.HataBildirimModel.HataBildirimMesaji == "") {
                toaster.pop("warning", "Uyarı", "Hata Bildirimi yapabilmek için hata mesajı girmeniz gerekiyor.");
                return;
            }
            
            HataBildirimServiceFactory.HataBildir(scope.HataBildirimModel, HataBildirmeSuccessFunction)
        }
        HataBildirmeSuccessFunction = function () {
            scope.listele();

        };

Bu işlemden sonra kodu çalıştırdığımız browser debugger yazdığınız yere geldiğinde uyarı vereceğini göreceksiniz. Bundan sonra F5 F10 F11 nasıl kullanacağınız size kalmış.

NOT:Anlattığım konuların Windows kullanıcıları için geçerli olduğunu vurgulamak istiyorum.

Konu ile alakalı sorularınız varsa lütfen sormakten çekinmeyin. En kısa sürede yanıtlamaya çalışacağım.