ASP.NET AJAX Hata Ayıklama Özelliklerini Anlama

tarafından Scott Cate

Kodda hata ayıklama özelliği, kullandığı teknolojiden bağımsız olarak her geliştiricinin cephaneliğinde olması gereken bir beceridir. Birçok geliştirici, VB.NET veya C# kodu kullanan ASP.NET uygulamalarda hata ayıklamak için Visual Studio .NET veya Web Developer Express kullanmaya alışkın olsa da, bazıları JavaScript gibi istemci tarafı kodlarında hata ayıklamak için de son derece yararlı olduğunun farkında değildir. .NET uygulamalarında hata ayıklamak için kullanılan tekniklerin aynı türü, AJAX özellikli uygulamalara ve daha özel olarak AJAX uygulamalarına ASP.NET uygulanabilir.

AJAX Uygulamaları ASP.NET Hata Ayıklama

Dan Wahlin

Kodda hata ayıklama özelliği, kullandığı teknolojiden bağımsız olarak her geliştiricinin cephaneliğinde olması gereken bir beceridir. Mevcut olan farklı hata ayıklama seçeneklerinin anlaşılmasının bir projede çok fazla zaman kazanabileceğini ve hatta birkaç baş ağrısına neden olabileceğini söylemeye gerek yok. Birçok geliştirici, VB.NET veya C# kodu kullanan ASP.NET uygulamalarda hata ayıklamak için Visual Studio .NET veya Web Developer Express kullanmaya alışkın olsa da, bazıları JavaScript gibi istemci tarafı kodlarında hata ayıklamak için de son derece yararlı olduğunun farkında değildir. .NET uygulamalarında hata ayıklamak için kullanılan tekniklerin aynı türü, AJAX özellikli uygulamalara ve daha özel olarak AJAX uygulamalarına ASP.NET uygulanabilir.

Bu makalede, hataları ve diğer sorunları hızla bulmak için AJAX uygulamalarında hata ASP.NET ayıklamak için Visual Studio 2008 ve diğer bazı araçların nasıl kullanılabileceğini göreceksiniz. Bu tartışma, Hata ayıklama için Internet Explorer 6 veya üzerini etkinleştirme, Visual Studio 2008 ve Betik Gezgini'ni kullanarak kodda adım adım ilerlerken ve Web Geliştirme Yardımcısı gibi diğer ücretsiz araçları kullanmayla ilgili bilgileri içerir. Ayrıca, JavaScript kodunda başka bir araç olmadan doğrudan tarayıcıda adım atmanıza olanak tanıyan Firebug adlı bir uzantı kullanarak Firefox'ta ASP.NET AJAX uygulamalarında hata ayıklamayı da öğreneceksiniz. Son olarak, ASP.NET AJAX Kitaplığı'nda izleme ve kod onaylama deyimleri gibi çeşitli hata ayıklama görevlerine yardımcı olabilecek sınıflarla tanıştırılacaksınız.

Internet Explorer'da görüntülenen sayfalarda hata ayıklamayı denemeden önce, hata ayıklamayı etkinleştirmek için gerçekleştirmeniz gereken birkaç temel adım vardır. Şimdi başlamak için gerçekleştirilmesi gereken bazı temel kurulum gereksinimlerine göz atalım.

Internet Explorer'ı Hata Ayıklama için Yapılandırma

Çoğu kişi, Internet Explorer ile görüntülenen bir Web sitesinde karşılaşılan JavaScript sorunlarını görmek istemez. Aslında, ortalama kullanıcı bir hata iletisi gördüğünde ne yapacağını bile bilmez. Sonuç olarak, tarayıcıda hata ayıklama seçenekleri varsayılan olarak kapalıdır. Ancak, hata ayıklamayı açmak ve yeni AJAX uygulamaları geliştirirken kullanmak çok kolaydır.

Hata ayıklama işlevselliğini etkinleştirmek için Internet Explorer menüsünde Araçlar İnternet Seçenekleri'ne gidin ve Gelişmiş sekmesini seçin. Gözatma bölümünde aşağıdaki öğelerin işaretinin kaldırıldığından emin olun:

• Betik hata ayıklamasını devre dışı bırakma (Internet Explorer)
• Betik hata ayıklamasını devre dışı bırakma (Diğer)

Gerekli olmasa da, bir uygulamada hata ayıklamaya çalışıyorsanız, sayfadaki JavaScript hatalarının hemen görünür ve belirgin olmasını istersiniz. "Her betik hatası hakkında bildirim görüntüle" onay kutusunu işaretleyerek tüm hataların bir ileti kutusuyla gösterilmesini zorlayabilirsiniz. Bu, bir uygulama geliştirirken açmak için harika bir seçenek olsa da, JavaScript hatalarıyla karşılaşma olasılığınız oldukça iyi olduğundan diğer Web Sitelerini inceliyorsanız, hızla rahatsız edici hale gelebilir.

Şekil 1'de, hata ayıklama için düzgün yapılandırıldıktan sonra Internet Explorer gelişmiş iletişim kutusunun nelere bakması gerektiği gösterilmektedir.

Şekil 1: Internet Explorer'ı hata ayıklama için yapılandırma. (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Hata ayıklama açıldıktan sonra, Görünüm menüsünde Betik Hata Ayıklayıcısı adlı yeni bir menü öğesi görüntülenir. Sonraki Deyimde Aç ve Kes dahil olmak üzere iki seçeneği vardır. Aç seçildiğinde, Visual Studio 2008'de sayfada hata ayıklamanız istenir (Visual Web Developer Express'in hata ayıklama için de kullanılabileceğini unutmayın). Visual Studio .NET şu anda çalışıyorsa bu örneği kullanmayı veya yeni bir örnek oluşturmayı seçebilirsiniz. Sonraki Deyimde Kes seçildiğinde, JavaScript kodu yürütürken sayfada hata ayıklamanız istenir. JavaScript kodu sayfanın onLoad olayında yürütülürse, hata ayıklama oturumunu tetiklemek için sayfayı yenileyebilirsiniz. Bir düğmeye tıklandıktan sonra JavaScript kodu çalıştırılırsa, düğmeye tıklandıktan hemen sonra hata ayıklayıcı çalışır.

Sonraki bölümde doğrudan Visual Studio 2008'in içinden bir ASP.NET AJAX sayfasında hata ayıklama işlemi gösteriliyor olsa da, internet explorer betik hata ayıklayıcısı seçeneğinin kullanılması, bir sayfa zaten açık olduğunda ve sayfayı daha fazla incelemek istediğinizde yararlıdır.

Visual Studio 2008 ile hata ayıklama

Visual Studio 2008, dünyanın dört bir yanındaki geliştiricilerin .NET uygulamalarında hata ayıklamak için her gün güvendiği hata ayıklama işlevselliği sağlar. Yerleşik hata ayıklayıcı, kodda adım adım ilerleyerek nesne verilerini görüntülemenize, belirli değişkenler için watch, çağrı yığınını izlemenize ve çok daha fazlasını yapmanızı sağlar. Hata ayıklayıcısı, VB.NET veya C# kodunda hata ayıklamaya ek olarak AJAX uygulamalarında hata ayıklama ASP.NET ya da yardımcı olur ve JavaScript kodunda satır satır gezinmenizi sağlar. Aşağıdaki ayrıntılar, Visual Studio 2008 kullanarak uygulamalarda hata ayıklama işleminin genel süreciyle ilgili bir söylem sağlamak yerine istemci tarafı betik dosyalarında hata ayıklamak için kullanılabilecek tekniklere odaklanır.

Visual Studio 2008'de bir sayfada hata ayıklama işlemi birkaç farklı yolla başlatılabilir. İlk olarak, önceki bölümde bahsedilen Internet Explorer Betik Hata Ayıklayıcısı seçeneğini kullanabilirsiniz. Bu, tarayıcıda zaten bir sayfa yüklüyse ve hata ayıklamaya başlamak istediğinizde düzgün çalışır. Alternatif olarak, Çözüm Gezgini bir .aspx sayfasına sağ tıklayabilir ve menüden Başlangıç Sayfası Olarak Ayarla'yı seçebilirsiniz. ASP.NET sayfalarda hata ayıklamaya alışkınsanız, büyük olasılıkla bunu daha önce yapmışsınızdır. F5 tuşuna basıldıktan sonra sayfa hata ayıklanabilir. Ancak, VB.NET veya C# kodunda genel olarak istediğiniz herhangi bir yerde kesme noktası ayarlayabilirsiniz, ancak sonraki adımda göreceğiniz gibi JavaScript'te her zaman böyle olmaz.

Katıştırılmış Ve Dış Betikler

Visual Studio 2008 hata ayıklayıcısı, bir sayfaya eklenmiş JavaScript'i dış JavaScript dosyalarından farklı olarak değerlendirir. Dış betik dosyalarıyla, dosyayı açabilir ve seçtiğiniz herhangi bir satırda bir kesme noktası ayarlayabilirsiniz. Kesme noktaları, kod düzenleyicisi penceresinin solundaki gri tepsi alanına tıklanarak ayarlanabilir. JavaScript etiketi kullanılarak <script> doğrudan bir sayfaya eklendiğinde, gri tepsi alanına tıklayarak kesme noktası ayarlamak bir seçenek değildir. Katıştırılmış betik satırında kesme noktası ayarlama girişimleri, "Bu, kesme noktası için geçerli bir konum değil" uyarısını verir.

Kodu bir dış .js dosyasına taşıyarak ve betik> etiketinin src özniteliğini <kullanarak bu dosyaya başvurarak bu sorunu çözebilirsiniz:

<script type="text/javascript" src="Scripts/YourScript.js"></script>

Kodu dış dosyaya taşımak bir seçenek değilse veya değerinden daha fazla iş gerektiriyorsa ne olur? Düzenleyiciyi kullanarak kesme noktası ayarlayamazsınız ancak hata ayıklamayı başlatmak istediğiniz koda doğrudan hata ayıklayıcı deyimini ekleyebilirsiniz. Hata ayıklamayı başlamaya zorlamak için ASP.NET AJAX kitaplığında bulunan Sys.Debug sınıfını da kullanabilirsiniz. Bu makalenin devamında Sys.Debug sınıfı hakkında daha fazla bilgi edineceksiniz.

Liste 1'de anahtar sözcüğünü debugger kullanma örneği gösterilmiştir. Bu örnek, hata ayıklayıcıyı bir güncelleştirme işlevine çağrı yapılmadan hemen önce kesmeye zorlar.

Liste 1. Visual Studio .NET hata ayıklayıcısını kesmeye zorlamak için hata ayıklayıcısı anahtar sözcüğünü kullanma.

function BuildPerson()
{
 var person =
 {
 FirstName: $get("txtFirstName").value,
 LastName: $get("txtLastName").value,
 Address:
 {
 Street: $get("txtStreet").value,
 City: $get("txtCity").value,
 State: $get("txtState").value
 }
 };
 debugger;
 UpdatePerson(person);
}

Hata ayıklayıcı deyimine ulaşıldıktan sonra Visual Studio .NET kullanarak sayfada hata ayıklamanız istenir ve kodda adım adım ilerleyebilirsiniz. Bunu yaparken, sayfada kullanılan ASP.NET AJAX kitaplık betik dosyalarına erişirken bir sorunla karşılaşabilirsiniz, bu nedenle Visual Studio'yu kullanma konusuna göz atalım. NET'in Betik Gezgini.

Hata Ayıklamak için Visual Studio .NET Windows Kullanma

Bir hata ayıklama oturumu başlatıldıktan ve varsayılan F11 anahtarını kullanarak kodda gezinmeye başladıktan sonra, sayfada kullanılan tüm betik dosyaları açık ve hata ayıklama için kullanılabilir değilse Bkz. Şekil 2'de gösterilen hata iletişim kutusuyla karşılaşabilirsiniz.

Şekil 2: Hata ayıklama için kullanılabilir kaynak kodu olmadığında gösterilen hata iletişim kutusu. (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Visual Studio .NET, sayfa tarafından başvuruda bulunan bazı betiklerin kaynak koduna nasıl ulaşacağından emin olmadığından bu iletişim kutusu gösterilir. Başlangıçta bu oldukça sinir bozucu olsa da, basit bir düzeltme vardır. Hata ayıklama oturumu başlattıktan ve bir kesme noktasına bastıktan sonra Visual Studio 2008 menüsünde Windows Betik Gezgini'nin Hatalarını Ayıkla penceresine gidin veya Ctrl+Alt+N kısayol tuşunu kullanın.

Betik Gezgini, bir sayfada kullanılan tüm betikleri görüntülemek ve bunları kod düzenleyicisinde açmak için kullanılabilir. Betik Gezgini açıldıktan sonra, hata ayıklaması yapılan .aspx sayfasına çift tıklayarak bu sayfayı kod düzenleyicisi penceresinde açın. Betik Gezgini'nde gösterilen diğer tüm betikler için aynı eylemi gerçekleştirin. Kod penceresinde tüm betikler açıldıktan sonra, kodunuzda adım adım ilerleyebilmek için F11 tuşuna basabilirsiniz (ve diğer hata ayıklama kısayol tuşlarını kullanabilirsiniz). Şekil 3'de Betik Gezgini örneği gösterilmektedir. Hata ayıklanan geçerli dosyanın (Demo.aspx) yanı sıra, ASP.NET AJAX ScriptManager tarafından sayfaya dinamik olarak eklenen iki özel betik ve iki betik listelenir.

Şekil 3. Betik Gezgini, bir sayfada kullanılan betiklere kolay erişim sağlar. (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Bir sayfadaki kodda adım adım ilerlerken yararlı bilgiler sağlamak için birkaç pencere daha kullanılabilir. Örneğin, sayfada kullanılan farklı değişkenlerin değerlerini görmek için Yereller penceresini, belirli değişkenleri veya koşulları değerlendirmek ve çıkışı görüntülemek için Anında penceresini kullanabilirsiniz. Sys.Debug.trace işlevi (bu makalenin ilerleyen bölümlerinde ele alınacaktır) veya Internet Explorer'ın Debug.writeln işlevi kullanılarak yazılan izleme deyimlerini görüntülemek için Çıkış penceresini de kullanabilirsiniz.

Hata ayıklayıcısını kullanarak kodda ilerlerken, atandıkları değeri görüntülemek için koddaki değişkenlerin üzerine fareyle gidebilirsiniz. Ancak, belirli bir JavaScript değişkeni üzerinde fareyle çalışırken betik hata ayıklayıcısı bazen hiçbir şey göstermez. Değeri görmek için, kod düzenleyicisi penceresinde görmeye çalıştığınız deyimi veya değişkeni vurgulayın ve fareyi üzerine getirin. Bu teknik her durumda çalışmasa da, yerel ayarlar penceresi gibi farklı bir hata ayıklama penceresine bakmak zorunda kalmadan değeri birçok kez görebilirsiniz.

Burada açıklanan özelliklerden bazılarını gösteren bir video öğreticisi adresinde http://www.xmlforasp.netgörüntülenebilir.

Web Geliştirme Yardımcısı ile Hata Ayıklama

Visual Studio 2008 (ve Visual Web Developer Express 2008) çok yetenekli hata ayıklama araçları olsa da, daha hafif olan ek seçenekler de kullanılabilir. Yayınlanacak en son araçlardan biri Web Geliştirme Yardımcısı'dır. Microsoft'tan Nikhil Kothari (Microsoft'un önemli ASP.NET AJAX mimarlarından biri) basit hata ayıklamadan HTTP isteği ve yanıt iletilerini görüntülemeye kadar birçok farklı görevi gerçekleştirebilen bu mükemmel aracı yazdı.

Web Geliştirme yardımcısı doğrudan Internet Explorer'ın içinde kullanılabilir ve bu da kullanımı kolaylaştırır. Internet Explorer menüsünden Araçlar Web Geliştirme Yardımcısı seçilerek başlatılır. Bu, http isteği ve yanıt iletisi günlüğü gibi çeşitli görevleri gerçekleştirmek için tarayıcıdan ayrılmanız gerekmeyen tarayıcının alt kısmında aracı açar. Şekil 4'te Web Geliştirme Yardımcısı'nın uygulamada nasıl göründüğü gösterilmektedir.

Şekil 4: Web Geliştirme Yardımcısı (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Web Geliştirme yardımcısı, Visual Studio 2008'de olduğu gibi kodda satır satır ilerlemek için kullanacağınız bir araç değildir. Ancak izleme çıkışını görüntülemek, betikteki değişkenleri kolayca değerlendirmek veya JSON nesnesinin içindeki verileri keşfetmek için kullanılabilir. ASP.NET AJAX sayfasına ve bir sunucudan geçirilen verileri görüntülemek için de çok kullanışlıdır.

Web Geliştirme Yardımcısı Internet Explorer'da açıldıktan sonra, Daha önce Şekil 4'te gösterildiği gibi Web Geliştirme yardımcı menüsünden Betik Hata Ayıklamayı Etkinleştir seçilerek betik hata ayıklama etkinleştirilmelidir. Bu, aracın bir sayfa çalıştırılırken oluşan hataları kesmesini sağlar. Ayrıca, sayfada çıkış olan izleme iletilerine kolay erişim sağlar. İzleme bilgilerini görüntülemek veya bir sayfadaki farklı işlevleri test etmek üzere betik komutlarını yürütmek için Web Geliştirme Yardımcısı menüsünde Betik Komut Dosyası Konsolunu Göster'i seçin. Bu, bir komut penceresine ve basit bir anında pencereye erişim sağlar.

İzleme İletilerini ve JSON Nesne Verilerini Görüntüleme

Anında pencere, betik komutlarını yürütmek, hatta bir sayfadaki farklı işlevleri test etmek için kullanılan betikleri yüklemek veya kaydetmek için kullanılabilir. Komut penceresinde, görüntülenen sayfa tarafından yazılan izleme veya hata ayıklama iletileri görüntülenir. Liste 2'de Internet Explorer'ın Debug.writeln işlevini kullanarak izleme iletisi yazma işlemi gösterilmektedir.

Liste 2. Debug sınıfını kullanarak istemci tarafı izleme iletisi yazma.

function BuildPerson()
{
 var person =
 {
 FirstName: $get("txtFirstName").value,
 LastName: $get("txtLastName").value,
 Address:
 {
 Street: $get("txtStreet").value,
 City: $get("txtCity").value,
 State: $get("txtState").value
 }
 };
 Debug.writeln("Person name: " + person.LastName);
 UpdatePerson(person);
}

LastName özelliği Bir Doe değeri içeriyorsa, Web Geliştirme Yardımcısı betik konsolunun komut penceresinde "Kişi adı: Doe" iletisini görüntüler (hata ayıklamanın etkinleştirildiği varsayılarak). Web Geliştirme Yardımcısı, izleme bilgilerini yazmak veya JSON nesnelerinin içeriğini görüntülemek için kullanılabilecek sayfalara bir üst düzey debugService nesnesi de ekler. Liste 3'de debugService sınıfının izleme işlevini kullanma örneği gösterilmektedir.

Liste 3. İzleme iletisi yazmak için Web Geliştirme Yardımcısı'nın debugService sınıfını kullanma.

function BuildPerson()
{
 var person =
 {
 FirstName: $get("txtFirstName").value,
 LastName: $get("txtLastName").value,
 Address:
 {
 Street: $get("txtStreet").value,
 City: $get("txtCity").value,
 State: $get("txtState").value
 }
 };
 if (window.debugService)
 {
 window.debugService.trace("Person name: " + person.LastName);
 }
 UpdatePerson(person);
}

debugService sınıfının güzel bir özelliği, Internet Explorer'da hata ayıklama etkinleştirilmemiş olsa bile çalışmasıdır ve bu da Web Geliştirme Yardımcısı çalışırken izleme verilerine her zaman erişmeyi kolaylaştırır. Araç bir sayfada hata ayıklamak için kullanılmadığında, window.debugService çağrısı false döndüreceğinden izleme deyimleri yoksayılır.

debugService sınıfı, JSON nesne verilerinin Web Geliştirme Yardımcısı'nın denetçi penceresi kullanılarak görüntülenmesine de izin verir. 4 listesi, kişi verilerini içeren basit bir JSON nesnesi oluşturur. Nesne oluşturulduktan sonra, JSON nesnesinin görsel olarak incelenmesine izin vermek için debugService sınıfının inspect işlevine bir çağrı yapılır.

Liste 4. JSON nesne verilerini görüntülemek için debugService.inspect işlevini kullanma.

function BuildPerson()
{
 var person =
 {
 FirstName: $get("txtFirstName").value,
 LastName: $get("txtLastName").value,
 Address:
 {
 Street: $get("txtStreet").value,
 City: $get("txtCity").value,
 State: $get("txtState").value
 }
 };
 if (window.debugService)
 {
 window.debugService.inspect("Person Object",person);
 }
 UpdatePerson(person);
}

Sayfada veya hemen pencere aracılığıyla GetPerson() işlevinin çağrılması, Nesne Denetçisi iletişim penceresinin Şekil 5'te gösterildiği gibi görünmesine neden olur. Nesne içindeki özellikler vurgulanarak, Değer metin kutusunda gösterilen değer değiştirilerek ve ardından Güncelleştir bağlantısına tıklanarak dinamik olarak değiştirilebilir. Nesne Denetçisi'nin kullanılması JSON nesne verilerini görüntülemeyi ve özelliklere farklı değerler uygulamayı denemeyi kolaylaştırır.

Hata Ayıklama Hataları

İzleme verilerinin ve JSON nesnelerinin görüntülenmesine izin vermenin yanı sıra, Web Geliştirme yardımcısı bir sayfadaki hata ayıklama hatalarına da yardımcı olabilir. Hatayla karşılaşırsanız, bir sonraki kod satırına devam etmek veya betikte hata ayıklamak isteyip istemediğiniz sorulur (bkz. Şekil 6). Betik Hatası iletişim kutusu penceresi, sorunların betik içinde nerede olduğunu kolayca belirleyebilmeniz için tüm çağrı yığınını ve satır numaralarını gösterir.

Şekil 5: JSON nesnesini görüntülemek için Nesne Denetçisi penceresini kullanma. (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Hata ayıklama seçeneğinin belirtilmesi, değişkenlerin değerini görüntülemek, JSON nesnelerini yazmak ve daha fazlasını yapmak için betik deyimlerini doğrudan Web Geliştirme Yardımcısı'nın hemen penceresinde yürütmenize olanak tanır. Hatayı tetikleyen eylem yeniden gerçekleştirilir ve makinede Visual Studio 2008 kullanılabilir durumdaysa, önceki bölümde açıklandığı gibi kodda satır satır ilerleyebilmeniz için bir hata ayıklama oturumu başlatmanız istenir.

Şekil 6: Web Geliştirme Yardımcısı Betik Hatası İletişim Kutusu (Tam boyutlu görüntüyü görüntülemek için tıklayın)

İstek ve Yanıt İletilerini İnceleme

AJAX sayfalarında hata ayıklama ASP.NET, genellikle bir sayfa ile sunucu arasında gönderilen istek ve yanıt iletilerini görmek yararlı olur. İletilerin içindeki içeriği görüntülemek, iletilerin boyutunun yanı sıra doğru verilerin geçirilip geçirilmediğini görmenizi sağlar. Web Geliştirme Yardımcısı, verileri ham metin olarak veya daha okunabilir bir biçimde görüntülemeyi kolaylaştıran mükemmel bir HTTP ileti günlükçü özelliği sağlar.

ASP.NET AJAX isteği ve yanıt iletilerini görüntülemek için, Web Geliştirme Yardımcısı menüsünde HTTP Günlüğünü Etkinleştir'i seçerek HTTP günlükçüsünün etkinleştirilmesi gerekir. Etkinleştirildikten sonra, geçerli sayfadan gönderilen tüm iletiler HTTP Günlüklerini Göster seçilerek erişilebilen HTTP günlük görüntüleyicisinde görüntülenebilir.

Her istek/yanıt iletisinde gönderilen ham metni görüntülemek kesinlikle yararlı olsa da (ve Web Geliştirme Yardımcısı'nda bir seçenek), ileti verilerini daha grafik biçiminde görüntülemek genellikle daha kolaydır. HTTP günlüğü etkinleştirildikten ve iletiler günlüğe kaydedildikten sonra, http günlük görüntüleyicisindeki iletiye çift tıklanarak ileti verileri görüntülenebilir. Bunu yaptığınızda, iletiyle ilişkili tüm üst bilgileri ve gerçek ileti içeriğini görüntüleyebilirsiniz. Şekil 7'de, HTTP Günlük Görüntüleyicisi penceresinde görüntülenen bir istek iletisi ve yanıt iletisi örneği gösterilmektedir.

Şekil 7: İstek ve yanıt iletisi verilerini görüntülemek için HTTP Günlük Görüntüleyicisi'ni kullanma. (Tam boyutlu görüntüyü görüntülemek için tıklayın)

HTTP Günlük Görüntüleyicisi, JSON nesnelerini otomatik olarak ayrıştırıp bir ağaç görünümü kullanarak görüntüler ve böylece nesnenin özellik verilerinin hızlı ve kolay bir şekilde görüntülenmesini sağlar. ASP.NET AJAX sayfasında bir UpdatePanel kullanıldığında, görüntüleyici, şekil 8'de gösterildiği gibi iletinin her bir bölümünü ayrı bölümlere ayırır. Bu, ham ileti verilerini görüntülemeye kıyasla iletide ne olduğunu görmeyi ve anlamayı çok daha kolay hale getiren harika bir özelliktir.

Şekil 8: HTTP Günlük Görüntüleyicisi kullanılarak görüntülenen bir UpdatePanel yanıt iletisi. (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Web Geliştirme Yardımcısı'na ek olarak istek ve yanıt iletilerini görüntülemek için kullanılabilecek birkaç araç daha vardır. Bir diğer iyi seçenek de adresinden http://www.fiddlertool.comücretsiz olarak sunulan Fiddler'dır. Fiddler burada tartışılmasa da, ileti üst bilgilerini ve verilerini ayrıntılı bir şekilde incelemeniz gerektiğinde de iyi bir seçenektir.

Firefox ve Firebug ile hata ayıklama

Internet Explorer hala en yaygın kullanılan tarayıcı olsa da, Firefox gibi diğer tarayıcılar oldukça popüler hale geldi ve giderek daha fazla kullanılıyor. Sonuç olarak, uygulamalarınızın düzgün çalıştığından emin olmak için Firefox'taki ASP.NET AJAX sayfalarınızı ve Internet Explorer'ı görüntülemek ve hatalarını ayıklamak isteyeceksiniz. Firefox, hata ayıklama için doğrudan Visual Studio 2008'e bağlanamıyor olsa da, sayfalarda hata ayıklamak için kullanılabilecek Firebug adlı bir uzantıya sahiptir. Firebug, adresine http://www.getfirebug.comgiderek ücretsiz olarak indirilebilir.

Firebug, kodda satır satır gezinmek, bir sayfada kullanılan tüm betiklere erişmek, DOM yapılarını görüntülemek, CSS stillerini görüntülemek ve hatta sayfada gerçekleşen olayları izlemek için kullanılabilen tam özellikli bir hata ayıklama ortamı sağlar. Yüklendikten sonra, Firefox menüsünden Araçlar Firebug Aç Firebug seçilerek Firebug'a erişilebilir. Web Geliştirme Yardımcısı gibi Firebug da tek başına bir uygulama olarak kullanılabilse de doğrudan tarayıcıda kullanılır.

Firebug çalıştırıldıktan sonra, betiğin bir sayfaya eklenip eklenmediğine bakılmaksızın kesme noktaları JavaScript dosyasının herhangi bir satırında ayarlanabilir. Kesme noktası ayarlamak için önce Firefox'ta hata ayıklamak istediğiniz uygun sayfayı yükleyin. Sayfa yüklendikten sonra Firebug'un Betikler açılan listesinden hata ayıklamak için betiği seçin. Sayfa tarafından kullanılan tüm betikler gösterilir. Kesme noktası, kesme noktasının Visual Studio 2008'de yaptığınız gibi gitmesi gereken satırdaki Firebug'un gri tepsi alanına tıklanarak ayarlanır.

Firebug'da bir kesme noktası ayarlandıktan sonra, hata ayıklaması gereken betiği yürütmek için gereken eylemi gerçekleştirebilirsiniz. Örneğin, onLoad olayını tetikleyen bir düğmeye tıklamak veya tarayıcıyı yenilemek. Yürütme, kesme noktasını içeren satırda otomatik olarak durur. Şekil 9'da Firebug'da tetiklenen bir kesme noktası örneği gösterilmektedir.

Şekil 9: Firebug'da kesme noktalarını işleme. (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Kesme noktasına ulaştığında, ok düğmelerini kullanarak koda adım atabilir, kodun üzerine gelebilir veya kodun dışına çıkabilirsiniz. Kodda ilerlerken, betik değişkenleri hata ayıklayıcının sağ tarafında görüntülenir ve bu sayede değerleri görebilir ve nesnelerde detaya gitmenizi sağlar. Firebug, betiğin geçerli satıra kadar hata ayıklanmasına yol açan yürütme adımlarını görüntülemek için bir Çağrı Yığını açılan listesi de içerir.

Firebug, farklı betik deyimlerini test etmek, değişkenleri değerlendirmek ve izleme çıkışını görüntülemek için kullanılabilecek bir konsol penceresi de içerir. Firebug penceresinin üst kısmındaki Konsol sekmesine tıklanarak erişilir. Hata ayıklanan sayfa ayrıca, İncele sekmesine tıklayarak DOM yapısını ve içeriğini görmek için "incelenebilir". Denetçi penceresinde gösterilen farklı DOM öğelerinin üzerine farenizi getirdiğinizde sayfanın uygun bölümü vurgulanır ve böylece öğenin sayfada nerede kullanıldığını kolayca görebilirsiniz. Belirli bir öğeyle ilişkili öznitelik değerleri, farklı genişlikler, stiller vb. uygulama denemeleri yapmak için "canlı" olarak değiştirilebilir. öğesini seçin. Bu, basit değişikliklerin bir sayfayı nasıl etkilediğini görüntülemek için kaynak kod düzenleyicisi ile Firefox tarayıcısı arasında sürekli geçiş yapmanıza gerek kalmadan sizi kurtaran güzel bir özelliktir.

Şekil 10'da, sayfada txtCountry adlı bir metin kutusunu bulmak için DOM denetçisini kullanma örneği gösterilmektedir. Firebug denetçisi, bir sayfada kullanılan CSS stillerinin yanı sıra fare hareketlerini izleme, düğme tıklamaları ve daha fazlası gibi gerçekleşen olayları görüntülemek için de kullanılabilir.

Şekil 10: Firebug'un DOM denetçisini kullanma. (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Firebug, doğrudan Firefox'ta bir sayfada hızlı bir şekilde hata ayıklamanın hafif bir yolunun yanı sıra sayfadaki farklı öğeleri incelemek için mükemmel bir araç sağlar.

ASP.NET AJAX'ta Hata Ayıklama Desteği

ASP.NET AJAX kitaplığı, Bir Web Sayfasına AJAX özellikleri ekleme işlemini basitleştirmek için kullanılabilecek birçok farklı sınıf içerir. Bu sınıfları bir sayfadaki öğeleri bulmak ve işlemek, yeni denetimler eklemek, Web Hizmetleri'ni çağırmak ve hatta olayları işlemek için kullanabilirsiniz. ASP.NET AJAX kitaplığı, sayfalarda hata ayıklama işlemini geliştirmek için kullanılabilecek sınıflar da içerir. Bu bölümde Sys.Debug sınıfına tanıtılacak ve bunun uygulamalarda nasıl kullanılabileceğini göreceksiniz.

Sys.Debug sınıfını kullanma

Sys.Debug sınıfı (Sys ad alanında bulunan bir JavaScript sınıfı), izleme çıkışı yazma, kod onaylamaları gerçekleştirme ve hata ayıklanabilir şekilde kodu başarısız olmaya zorlama gibi çeşitli işlevleri gerçekleştirmek için kullanılabilir. ASP.NET AJAX kitaplığının hata ayıklama dosyalarında yaygın olarak kullanılır (C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025\Microsoft konumunda yüklenir Parametrelerin işlevlere düzgün şekilde geçirilmesini, bu nesnelerin beklenen verileri içermesini ve izleme deyimleri yazmasını sağlayan koşullu testler (onaylar olarak adlandırılır) gerçekleştirmek içinAjaxLibrary\System.Web.Extensions\1.0.61025.0 varsayılan olarak.

Sys.Debug sınıfı, Tablo 1'de gösterildiği gibi izleme, kod onaylamaları veya hataları işlemek için kullanılabilecek birkaç farklı işlevi kullanıma sunar.

Tablo 1. Sys.Debug sınıf işlevleri.

İstemci tarafı izleme, ASP.NET'de sağlanan izleme işleviyle çok aynı şekilde kullanılabilir. Uygulamanın akışını kesintiye uğratmadan farklı iletilerin kolayca görülmesini sağlar. Liste 5, izleme günlüğüne yazmak için Sys.Debug.trace işlevini kullanma örneğini gösterir. Bu işlev, parametre olarak yazılması gereken iletiyi alır.

Liste 5. Sys.Debug.trace işlevini kullanma.

function BuildPerson()
{
 var address = new XmlForAsp.Address($get("txtStreet").value, $get("txtCity").value, $get("txtState").value, $get("txtZip").value);
 var person = new XmlForAsp.Person(null, $get("txtFirstName").value, $get("txtLastName").value, address);
 Sys.Debug.trace("Person's name: " + person.get_firstName() + " " + person.get_lastName());
 UpdatePerson(person);
}

Listeleme 5'te gösterilen kodu yürütürseniz sayfada hiçbir izleme çıkışı görmezsiniz. Bunu görmenin tek yolu Visual Studio .NET, Web Geliştirme Yardımcısı veya Firebug'da bulunan bir konsol penceresi kullanmaktır. İzleme çıkışını sayfada görmek istiyorsanız bir TextArea etiketi eklemeniz ve ardından gösterildiği gibi TraceConsole kimliğini vermeniz gerekir:

<textArea id="TraceConsole" rows="10" cols="50"></textArea>

Sayfadaki tüm Sys.Debug.trace deyimleri TraceConsole TextArea'ya yazılır.

Bir JSON nesnesi içinde yer alan verileri görmek istediğiniz durumlarda Sys.Debug sınıfının traceDump işlevini kullanabilirsiniz. Bu işlev, izleme konsoluna atılması gereken nesne ve izleme çıkışındaki nesneyi tanımlamak için kullanılabilecek bir ad dahil olmak üzere iki parametre alır. Liste 6'da traceDump işlevinin kullanımına ilişkin bir örnek gösterilmektedir.

Liste 6. Sys.Debug.traceDump işlevini kullanma.

function UpdatePerson(person)
{
 //Dump contents of the person object to the trace output
 Sys.Debug.traceDump(person,"Person Data");

 alert("Person updated! " + person.get_firstName() + " " + person.get_lastName());
}

Şekil 11'de Sys.Debug.traceDump işlevi çağrılır. Person nesnesinin verilerini yazmanın yanı sıra Address alt nesnesinin verilerini de yazdığına dikkat edin.

İzlemeye ek olarak, sys.debug sınıfı kod onaylamaları gerçekleştirmek için de kullanılabilir. Onaylar, bir uygulama çalışırken belirli koşulların karşılandığını test etmek için kullanılır. ASP.NET AJAX kitaplık betiklerinin hata ayıklama sürümü, çeşitli koşulları test etmek için çeşitli onay deyimleri içerir.

Liste 7'de, bir koşulu test etmek için Sys.Debug.assert işlevini kullanma örneği gösterilmektedir. Kod, Person nesnesini güncelleştirmeden önce Address nesnesinin null olup olmadığını sınar.

Şekil 11: Sys.Debug.traceDump işlevinin çıkışı. (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Liste 7. debug.assert işlevini kullanma.

function UpdatePerson(person)
{
 //Check if address is null
 Sys.Debug.assert(person.get_address() == null,"Address is null!",true);

 alert("Person updated! " + person.get_firstName() + " " + person.get_lastName());
}

Değerlendirilecek koşul, onay yanlış döndürüyorsa görüntülenecek ileti ve çağıran hakkındaki bilgilerin görüntülenip görüntülenmeyeceği dahil olmak üzere üç parametre geçirilir. Onaylama işleminin başarısız olduğu durumlarda, üçüncü parametre true ise ileti ve çağıran bilgileri görüntülenir. Şekil 12'de, Liste 7'de gösterilen onaylama işlemi başarısız olursa görüntülenen hata iletişim kutusunun bir örneği gösterilmektedir.

Ele alınacak son işlev Sys.Debug.fail işlevidir. Kodun betikteki belirli bir satırda başarısız olmasına zorlamak istediğinizde, genellikle JavaScript uygulamalarında kullanılan hata ayıklayıcı deyimi yerine Sys.Debug.fail çağrısı ekleyebilirsiniz. Sys.Debug.fail işlevi, sonraki adımda gösterildiği gibi hatanın nedenini temsil eden tek bir dize parametresini kabul eder:

Sys.Debug.fail("My forced failure of script.");

Şekil 12: Sys.Debug.assert hata iletisi. (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Betik yürütülürken sys.debug.fail deyimiyle karşılaşıldığında, ileti parametresinin değeri Visual Studio 2008 gibi bir hata ayıklama uygulamasının konsolunda görüntülenir ve uygulamada hata ayıklamanız istenir. Bunun oldukça yararlı olabileceği durumlardan biri, satır içi betikte Visual Studio 2008 ile kesme noktası ayarlayamadığınızda ancak değişkenlerin değerini inceleyebilmeniz için kodun belirli bir satırda durdurulmasını istediğiniz durumlardır.

ScriptManager Denetiminin ScriptMode Özelliğini Anlama

ASP.NET AJAX kitaplığı, C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025\MicrosoftAjaxLibrary\System.Web.Extensions\1.0.61025.0 konumunda varsayılan olarak yüklenen hata ayıklama ve sürüm betiği sürümlerini içerir. Hata ayıklama betikleri güzel biçimlendirilmiş, kolay okunur ve çeşitli Sys.Debug.assert çağrıları bunlara dağıtılırken, yayın betikleri boş alan çıkarılır ve genel boyutlarını en aza indirmek için Sys.Debug sınıfını tedbirli bir şekilde kullanır.

ASP.NET AJAX sayfalarına eklenen ScriptManager denetimi, kitaplık betiklerinin hangi sürümlerinin yükleneceğini belirlemek için derleme öğesinin hata ayıklama özniteliğini web.config okur. Ancak, ScriptMode özelliğini değiştirerek hata ayıklama veya sürüm betiklerinin (kitaplık betikleri veya kendi özel betikleriniz) yüklenip yüklenmediğini denetleyebilirsiniz. ScriptMode, üyeleri Otomatik, Hata Ayıklama, Yayın ve Devral'ı içeren bir ScriptMode numaralandırması kabul eder.

ScriptMode varsayılan olarak Otomatik değerini kullanır. Bu, ScriptManager'ın web.config hata ayıklama özniteliğini denetleyeceği anlamına gelir. Hata ayıklama yanlış olduğunda ScriptManager, ASP.NET AJAX kitaplık betiklerinin yayın sürümünü yükler. Hata ayıklama doğru olduğunda betiklerin hata ayıklama sürümü yüklenir. ScriptMode özelliğini Release veya Debug olarak değiştirmek, debug özniteliğinin web.config hangi değere sahip olduğuna bakılmaksızın ScriptManager'ı uygun betikleri yüklemeye zorlar. Liste 8'de, ASP.NET AJAX kitaplığından hata ayıklama betiklerini yüklemek için ScriptManager denetimini kullanma örneği gösterilmektedir.

Liste 8. ScriptManager kullanarak hata ayıklama betiklerini yükleme.

<asp:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug"></asp:ScriptManager>

Ayrıca, Listeleme 9'da gösterildiği gibi ScriptManager'ın Scripts özelliğini ve ScriptReference bileşenini kullanarak kendi özel betiklerinizin farklı sürümlerini de yükleyebilirsiniz (hata ayıklama veya sürüm).

Liste 9. ScriptManager kullanarak özel betikleri yükleme.

<asp:ScriptManager ID="ScriptManager1" runat="server">
 <Scripts>
 <asp:ScriptReference Path="~/Scripts/Person.js" ScriptMode="Debug"/>
 </Scripts>
</asp:ScriptManager>

if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

Listeleme 9'da gösterilen kod, ScriptManager'a Kişi betiğinin hata ayıklama sürümünü aramasını ve böylece Person.js yerine otomatik olarak Person.debug.js aramasını söyler. Person.debug.js dosyası bulunamazsa bir hata oluşur.

Özel betiğin hata ayıklama veya yayın sürümünün ScriptManager denetiminde ayarlanan ScriptMode özelliğinin değerine göre yüklenmesini istediğiniz durumlarda, ScriptReference denetiminin ScriptMode özelliğini Devral olarak ayarlayabilirsiniz. Bu, Listeleme 10'da gösterildiği gibi ScriptManager'ın ScriptMode özelliğine göre özel betiğin düzgün sürümünün yüklenmesine neden olur. ScriptManager denetiminin ScriptMode özelliği Hata Ayıklama olarak ayarlandığından, Person.debug.js betiği yüklenir ve sayfada kullanılır.

Liste 10. Özel betikler için ScriptManager'dan ScriptMode devralma.

<asp:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug">
 <Scripts>
 <asp:ScriptReference Path="~/Scripts/Person.js" ScriptMode="Inherit"/>
 </Scripts>
</asp:ScriptManager>

ScriptMode özelliğini uygun şekilde kullanarak uygulamaların hatalarını daha kolay ayıklayabilir ve genel işlemi basitleştirebilirsiniz. Hata ayıklama betikleri özellikle hata ayıklama amacıyla biçimlendirilirken kod biçimlendirmesi kaldırıldığından ASP.NET AJAX kitaplığının yayın betiklerini ilerletmek ve okumak oldukça zordur.

Sonuç

Microsoft'un ASP.NET AJAX teknolojisi, son kullanıcının genel deneyimini geliştirebilecek AJAX özellikli uygulamalar oluşturmak için sağlam bir temel sağlar. Ancak, herhangi bir programlama teknolojisinde olduğu gibi, hatalar ve diğer uygulama sorunları kesinlikle ortaya çıkacaktır. Sağlanan farklı hata ayıklama seçenekleri hakkında bilgi edinmek çok zaman kazandırabilir ve daha kararlı bir ürün elde edilebilir.

Bu makalede Visual Studio 2008 ile Internet Explorer, Web Geliştirme Yardımcısı ve Firebug dahil olmak üzere AJAX sayfalarının ASP.NET hata ayıklamaya yönelik çeşitli teknikler tanıtıldı. Bu araçlar değişken verilere erişebildiğiniz, kodda satır satır ilerleyebileceğiniz ve izleme deyimlerini görüntüleyebildiğiniz için genel hata ayıklama işlemini basitleştirebilir. Açıklanan farklı hata ayıklama araçlarına ek olarak, ASP.NET AJAX kitaplığının Sys.Debug sınıfının bir uygulamada nasıl kullanılabileceğini ve ScriptManager sınıfının betiklerin hata ayıklama veya sürüm sürümlerini yüklemek için nasıl kullanılabileceğini de gördünüz.

Biyografi

Dan Wahlin (ASP.NET ve XML Web Hizmetleri için Microsoft'un En Değerli Uzmanı), Arabirim Teknik Eğitimi'nde (www.interfacett.com) bir .NET geliştirme eğitmeni ve mimari danışmanıdır. Dan, ASP.NET Developers Web sitesi (www.XMLforASP.NET) için XML'yi kurdu, INETA Konuşmacı Bürosu'nda yer alır ve çeşitli konferanslarda konuşur. Dan birlikte yazılmış Professional Windows DNA (Wrox), ASP.NET: Tips, Tutorials and Code (Sams), ASP.NET 1.1 Insider Solutions, Professional ASP.NET 2.0 AJAX (Wrox), ASP.NET 2.0 MVP Hacks ve authored XML for ASP.NET Developers (Sams). Kod, makale veya kitap yazmadığı zamanlarda Dan, müzik yazıp kaydetmeyi, karısı ve çocuklarıyla golf ve basketbol oynamayı seviyor.

Scott Cate, 1997'den beri Microsoft Web teknolojileriyle çalışmaktadır ve Bilgi Bankası Yazılımı çözümlerine odaklanan ASP.NET tabanlı uygulamalar yazma konusunda uzmanlaştığı myKB.com (www.myKB.com) Başkanıdır. Scott'a ScottCate.com adresinden scott.cate@myKB.com veya blogundan e-posta yoluyla ulaşabilirsiniz .