Objaśnienie możliwości debugowania kodu ASP.NET AJAX
Możliwość debugowania kodu to umiejętność, którą każdy deweloper powinien mieć w swoim arsenalu niezależnie od używanej technologii. Podczas gdy wielu deweloperów jest przyzwyczajonych do używania programu Visual Studio .NET lub Web Developer Express do debugowania aplikacji ASP.NET korzystających z kodu VB.NET lub C#, niektórzy nie wiedzą, że jest również niezwykle przydatna do debugowania kodu po stronie klienta, takiego jak JavaScript. Ten sam typ technik używanych do debugowania aplikacji platformy .NET można również zastosować do aplikacji z obsługą technologii AJAX, a dokładniej ASP.NET aplikacji AJAX.
Debugowanie aplikacji ASP.NET AJAX
Dan Wahlin
Możliwość debugowania kodu to umiejętność, którą każdy deweloper powinien mieć w swoim arsenalu niezależnie od używanej technologii. Nie mówi się, że zrozumienie różnych dostępnych opcji debugowania może zaoszczędzić ogromny czas na projekcie, a może nawet kilka bólów głowy. Podczas gdy wielu deweloperów jest przyzwyczajonych do używania programu Visual Studio .NET lub Web Developer Express do debugowania aplikacji ASP.NET korzystających z kodu VB.NET lub C#, niektórzy nie wiedzą, że jest również niezwykle przydatna do debugowania kodu po stronie klienta, takiego jak JavaScript. Ten sam typ technik używanych do debugowania aplikacji platformy .NET można również zastosować do aplikacji z obsługą technologii AJAX, a dokładniej ASP.NET aplikacji AJAX.
W tym artykule dowiesz się, jak program Visual Studio 2008 i kilka innych narzędzi mogą służyć do debugowania ASP.NET aplikacji AJAX w celu szybkiego lokalizowania usterek i innych problemów. Ta dyskusja zawiera informacje dotyczące włączania programu Internet Explorer 6 lub nowszego do debugowania przy użyciu programu Visual Studio 2008 i Eksploratora skryptów, aby przejść przez kod, a także korzystać z innych bezpłatnych narzędzi, takich jak Pomocnik tworzenia aplikacji internetowych. Dowiesz się również, jak debugować aplikacje ASP.NET AJAX w przeglądarce Firefox przy użyciu rozszerzenia o nazwie Firebug, które umożliwia przejście przez kod JavaScript bezpośrednio w przeglądarce bez żadnych innych narzędzi. Na koniec poznasz klasy w bibliotece ASP.NET AJAX, które mogą pomóc w różnych zadaniach debugowania, takich jak instrukcje śledzenia i asercji kodu.
Przed podjęciem próby debugowania stron wyświetlanych w programie Internet Explorer należy wykonać kilka podstawowych kroków, aby umożliwić debugowanie. Przyjrzyjmy się pewnym podstawowym wymaganiom konfiguracji, które należy wykonać, aby rozpocząć pracę.
Konfigurowanie programu Internet Explorer do debugowania
Większość osób nie interesuje się wyświetlaniem problemów z językiem JavaScript napotkanych w witrynie internetowej wyświetlanej w programie Internet Explorer. W rzeczywistości przeciętny użytkownik nawet nie wiedział, co zrobić, jeśli zobaczy komunikat o błędzie. W związku z tym opcje debugowania są domyślnie wyłączone w przeglądarce. Jednak bardzo proste jest włączenie debugowania i umieszczenie go do użycia podczas opracowywania nowych aplikacji AJAX.
Aby włączyć funkcje debugowania, przejdź do pozycji Narzędzia Opcje internetowe w menu programu Internet Explorer i wybierz kartę Zaawansowane. W sekcji Przeglądanie upewnij się, że następujące elementy są niezaznaczone:
- Wyłączanie debugowania skryptu (Internet Explorer)
- Wyłączanie debugowania skryptu (inne)
Mimo że nie jest to wymagane, jeśli próbujesz debugować aplikację, prawdopodobnie chcesz, aby jakiekolwiek błędy języka JavaScript na stronie było natychmiast widoczne i oczywiste. Możesz wymusić wyświetlanie wszystkich błędów z polem komunikatu, zaznaczając pole wyboru "Wyświetl powiadomienie o każdym błędzie skryptu". Chociaż jest to świetna opcja włączenia podczas tworzenia aplikacji, może szybko stać się irytujące, jeśli po prostu perusing innych witryn internetowych, ponieważ twoje szanse na napotkanie błędów języka JavaScript są całkiem dobre.
Rysunek 1 przedstawia zaawansowane okno dialogowe programu Internet Explorer, które powinno być prawidłowo skonfigurowane do debugowania.
Rysunek 1. Konfigurowanie programu Internet Explorer do debugowania. (Kliknij, aby wyświetlić obraz o pełnym rozmiarze)
Po włączeniu debugowania w menu Widok zostanie wyświetlony nowy element menu o nazwie Debuger skryptu. Dostępne są dwie opcje, w tym Otwieranie i przerwanie w następnej instrukcji. Po wybraniu opcji Otwórz zostanie wyświetlony monit o debugowanie strony w programie Visual Studio 2008 (pamiętaj, że program Visual Web Developer Express może być również używany do debugowania). Jeśli program Visual Studio .NET jest obecnie uruchomiony, możesz użyć tego wystąpienia lub utworzyć nowe wystąpienie. Po wybraniu opcji Przerwa w następnej instrukcji zostanie wyświetlony monit o debugowanie strony po wykonaniu kodu JavaScript. Jeśli kod JavaScript jest wykonywany w zdarzeniu onLoad strony, możesz odświeżyć stronę, aby wyzwolić sesję debugowania. Jeśli kod JavaScript zostanie uruchomiony po kliknięciu przycisku, debuger zostanie uruchomiony natychmiast po kliknięciu przycisku.
Uwaga
Jeśli korzystasz z systemu Windows Vista z włączoną funkcją User Access Control (UAC) i masz program Visual Studio 2008 ustawiony na uruchomienie jako administrator, program Visual Studio nie będzie dołączać do procesu po wyświetleniu monitu o dołączenie. Aby obejść ten problem, najpierw uruchom program Visual Studio i użyj tego wystąpienia do debugowania.
Mimo że w następnej sekcji pokazano, jak debugować stronę ASP.NET AJAX bezpośrednio z poziomu programu Visual Studio 2008, użycie opcji debugera skryptów programu Internet Explorer jest przydatne, gdy strona jest już otwarta i chcesz ją w pełni sprawdzić.
Debugowanie za pomocą programu Visual Studio 2008
Program Visual Studio 2008 udostępnia funkcje debugowania, które deweloperzy na całym świecie korzystają codziennie z debugowania aplikacji platformy .NET. Wbudowany debuger pozwala przechodzić przez kod, wyświetlać dane obiektów, watch dla określonych zmiennych, monitorować stos wywołań i wiele więcej. Oprócz debugowania kodu VB.NET lub C# debuger jest również przydatny do debugowania ASP.NET aplikacji AJAX i umożliwi przejście przez wiersz kodu JavaScript po wierszu. Szczegółowe informacje, które koncentrują się na technikach, które mogą służyć do debugowania plików skryptów po stronie klienta, a nie udostępniania dyskursu na ogólnym procesie debugowania aplikacji przy użyciu programu Visual Studio 2008.
Proces debugowania strony w programie Visual Studio 2008 można uruchomić na kilka różnych sposobów. Najpierw możesz użyć opcji debugera skryptów programu Internet Explorer wymienionej w poprzedniej sekcji. Działa to dobrze, gdy strona jest już załadowana w przeglądarce i chcesz rozpocząć debugowanie. Alternatywnie możesz kliknąć prawym przyciskiem myszy stronę aspx w Eksplorator rozwiązań i wybrać pozycję Ustaw jako stronę startową z menu. Jeśli jesteś przyzwyczajony do debugowania ASP.NET stron, prawdopodobnie zrobiono to wcześniej. Po naciśnięciu klawisza F5 można debugować stronę. Jednak mimo że w dowolnym miejscu można ustawić punkt przerwania w kodzie VB.NET lub C#, nie zawsze tak jest w przypadku języka JavaScript, jak zobaczysz dalej.
Osadzone i zewnętrzne skrypty
Debuger programu Visual Studio 2008 traktuje język JavaScript osadzony na stronie innej niż zewnętrzne pliki JavaScript. Za pomocą plików skryptów zewnętrznych można otworzyć plik i ustawić punkt przerwania w dowolnym wybranym wierszu. Punkty przerwania można ustawić, klikając szary obszar zasobnika po lewej stronie okna edytora kodu. Jeśli język JavaScript jest osadzony bezpośrednio na stronie przy użyciu tagu <script> , ustawienie punktu przerwania przez kliknięcie w szarym obszarze zasobnika nie jest opcją. Próby ustawienia punktu przerwania w wierszu osadzonego skryptu spowodują ostrzeżenie informujące o tym, że "To nie jest prawidłowa lokalizacja punktu przerwania".
Ten problem można obejść, przenosząc kod do zewnętrznego pliku .js i odwołując się do niego przy użyciu atrybutu src tagu skryptu<>:
<script type="text/javascript" src="Scripts/YourScript.js"></script>
Co zrobić, jeśli przeniesienie kodu do pliku zewnętrznego nie jest opcją lub wymaga więcej pracy niż warto? Chociaż nie można ustawić punktu przerwania za pomocą edytora, możesz dodać instrukcję debugera bezpośrednio do kodu, w którym chcesz rozpocząć debugowanie. Możesz również użyć klasy Sys.Debug dostępnej w bibliotece ASP.NET AJAX, aby wymusić rozpoczęcie debugowania. Więcej informacji na temat klasy Sys.Debug znajdziesz w dalszej części tego artykułu.
Przykład użycia słowa kluczowego debugger jest wyświetlany na liście 1. Ten przykład wymusza przerwanie debugera bezpośrednio przed wywołaniem funkcji aktualizacji.
Lista 1. Użycie słowa kluczowego debugera w celu wymuszenia przerwania debugera .NET programu Visual Studio.
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);
}
Po naciśnięciu instrukcji debugera zostanie wyświetlony monit o debugowanie strony przy użyciu programu Visual Studio .NET i rozpoczęcie przechodzenia przez kod. Podczas wykonywania tej czynności może wystąpić problem z uzyskiwaniem dostępu do plików skryptów biblioteki ASP.NET AJAX używanych na stronie, więc przyjrzyjmy się użyciu programu Visual Studio. Eksplorator skryptów platformy NET.
Debugowanie przy użyciu programu Visual Studio .NET dla systemu Windows
Po rozpoczęciu sesji debugowania i rozpoczęciu przechodzenia przez kod przy użyciu domyślnego klucza F11 może wystąpić okno dialogowe błędu wyświetlane w rysunku 2, chyba że wszystkie pliki skryptów używane na stronie są otwarte i dostępne do debugowania.
Rysunek 2. Okno dialogowe błędu wyświetlane, gdy do debugowania nie jest dostępny kod źródłowy. (Kliknij, aby wyświetlić obraz o pełnym rozmiarze)
To okno dialogowe jest wyświetlane, ponieważ program Visual Studio .NET nie ma pewności, jak uzyskać kod źródłowy niektórych skryptów, do których odwołuje się strona. Chociaż może to być dość frustrujące na początku, istnieje prosta poprawka. Po rozpoczęciu sesji debugowania i osiągnięciu punktu przerwania przejdź do okna Debugowanie Eksploratora skryptów systemu Windows w menu programu Visual Studio 2008 lub użyj klawisza Ctrl+Alt+N.
Uwaga
Jeśli nie widzisz wyświetlonego menu Eksploratoraskryptów, przejdź do pozycji Narzędzia>Dostosuj> polecenia w menu programu Visual Studio .NET. Znajdź wpis Debuguj w sekcji Kategorie i kliknij go, aby wyświetlić wszystkie dostępne wpisy menu. Na liście Polecenia przewiń w dół do Eksploratora skryptów, a następnie przeciągnij go w górę do menu Debuguj system Windows we wspomnianym wcześniej. Spowoduje to udostępnienie wpisu menu Eksplorator skryptów za każdym razem, gdy uruchamiasz program Visual Studio .NET.
Eksplorator skryptów może służyć do wyświetlania wszystkich skryptów używanych na stronie i otwierania ich w edytorze kodu. Po otwarciu Eksploratora skryptów kliknij dwukrotnie stronę .aspx, która jest obecnie debugowana, aby otworzyć ją w oknie edytora kodu. Wykonaj tę samą akcję dla wszystkich innych skryptów wyświetlanych w Eksploratorze skryptów. Po otwarciu wszystkich skryptów w oknie kodu możesz nacisnąć klawisz F11 (i użyć innych klawiszy dostępu debugowania), aby przejść przez kod. Rysunek 3 przedstawia przykład Eksploratora skryptów. Wyświetla on listę aktualnie debugowanego pliku (Demo.aspx), a także dwa skrypty niestandardowe i dwa skrypty dynamicznie wstrzykiwane do strony przez ASP.NET AJAX ScriptManager.
Rysunek 3. Eksplorator skryptów zapewnia łatwy dostęp do skryptów używanych na stronie. (Kliknij, aby wyświetlić obraz o pełnym rozmiarze)
Kilka innych okien może również służyć do dostarczania przydatnych informacji podczas przechodzenia przez kod na stronie. Na przykład możesz użyć okna Ustawienia lokalne, aby wyświetlić wartości różnych zmiennych używanych na stronie, okno Natychmiastowe w celu oceny określonych zmiennych lub warunków i wyświetlenia danych wyjściowych. Możesz również użyć okna Dane wyjściowe, aby wyświetlić instrukcje śledzenia zapisane przy użyciu funkcji Sys.Debug.trace (która zostanie omówiona w dalszej części tego artykułu) lub funkcji Debug.writeln programu Internet Explorer.
Podczas przechodzenia przez kod przy użyciu debugera możesz przejmić wskaźnik myszy nad zmiennymi w kodzie, aby wyświetlić przypisaną wartość. Jednak debuger skryptu od czasu do czasu nie będzie wyświetlał niczego, gdy wskaźnik myszy nad daną zmienną JavaScript. Aby wyświetlić wartość, zaznacz instrukcję lub zmienną, którą próbujesz zobaczyć w oknie edytora kodu, a następnie umieść na niej wskaźnik myszy. Mimo że ta technika nie działa w każdej sytuacji, wiele razy będzie można zobaczyć wartość bez konieczności wyszukiwania w innym oknie debugowania, takim jak okno Ustawienia lokalne.
Samouczek wideo przedstawiający niektóre funkcje omówione tutaj można wyświetlić na stronie http://www.xmlforasp.net.
Debugowanie za pomocą pomocnika tworzenia aplikacji internetowych
Chociaż program Visual Studio 2008 (i Visual Web Developer Express 2008) są bardzo zdolnymi narzędziami do debugowania, istnieją dodatkowe opcje, które mogą być używane, a także są bardziej lekkie. Jednym z najnowszych narzędzi do wydania jest Pomocnik tworzenia aplikacji internetowych. Nikhil Kothari firmy Microsoft (jeden z kluczowych architektów ASP.NET AJAX firmy Microsoft) napisał to doskonałe narzędzie, które może wykonywać wiele różnych zadań od prostego debugowania do wyświetlania komunikatów żądań i odpowiedzi HTTP.
Pomocnik tworzenia aplikacji internetowych może być używany bezpośrednio w programie Internet Explorer, co ułatwia korzystanie z niego. Rozpoczyna się od wybrania pozycji Narzędzia Pomocnika tworzenia aplikacji internetowych z menu programu Internet Explorer. Spowoduje to otwarcie narzędzia w dolnej części przeglądarki, co jest miłe, ponieważ nie trzeba opuszczać przeglądarki, aby wykonać kilka zadań, takich jak rejestrowanie żądań HTTP i komunikatów odpowiedzi. Rysunek 4 przedstawia wygląd pomocnika tworzenia aplikacji internetowych w akcji.
Rysunek 4. Pomocnik tworzenia aplikacji internetowych (kliknij, aby wyświetlić obraz pełnowymiarowy)
Pomocnik tworzenia aplikacji internetowych nie jest narzędziem używanym do przechodzenia przez wiersz kodu zgodnie z programem Visual Studio 2008. Można go jednak użyć do wyświetlania danych wyjściowych śledzenia, łatwej oceny zmiennych w skrypcie lub eksplorowania danych znajdujących się wewnątrz obiektu JSON. Jest to również bardzo przydatne do wyświetlania danych przekazywanych do i z ASP.NET strony AJAX i serwera.
Gdy pomocnik tworzenia aplikacji internetowych jest otwarty w programie Internet Explorer, debugowanie skryptów musi być włączone, wybierając pozycję Skrypt Włącz debugowanie skryptów z menu pomocnika Tworzenie aplikacji internetowych, jak pokazano wcześniej na rysunku 4. Dzięki temu narzędzie może przechwytywać błędy występujące podczas uruchamiania strony. Umożliwia również łatwy dostęp do śledzenia komunikatów, które są danymi wyjściowymi na stronie. Aby wyświetlić informacje o śledzeniu lub wykonać polecenia skryptu w celu przetestowania różnych funkcji na stronie, wybierz pozycję Script Show Script Console (Pokaż skrypt konsoli skryptu) z menu Pomocnika tworzenia aplikacji internetowych. Zapewnia to dostęp do okna poleceń i prostego natychmiastowego okna.
Wyświetlanie komunikatów śledzenia i danych obiektów JSON
Bezpośrednie okno może służyć do wykonywania poleceń skryptu, a nawet ładowania lub zapisywania skryptów, które są używane do testowania różnych funkcji na stronie. W oknie polecenia są wyświetlane komunikaty śledzenia lub debugowania zapisane przez wyświetlaną stronę. Lista 2 pokazuje, jak napisać komunikat śledzenia przy użyciu funkcji Debug.writeln programu Internet Explorer.
Lista 2. Zapisywanie komunikatu śledzenia po stronie klienta przy użyciu klasy Debug.
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);
}
Jeśli właściwość LastName zawiera wartość doe, pomocnik tworzenia aplikacji internetowych wyświetli komunikat "Person name: Doe" w oknie polecenia konsoli skryptu (przy założeniu, że debugowanie zostało włączone). Pomocnik tworzenia aplikacji internetowych dodaje również obiekt debugService najwyższego poziomu do stron, których można użyć do zapisywania informacji śledzenia lub wyświetlania zawartości obiektów JSON. Lista 3 przedstawia przykład użycia funkcji śledzenia klasy debugService.
Lista 3. Używanie klasy DebugService pomocnika tworzenia aplikacji internetowych do pisania komunikatu śledzenia.
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);
}
Ładną funkcją klasy debugService jest to, że będzie działać nawet wtedy, gdy debugowanie nie jest włączone w programie Internet Explorer, co ułatwia zawsze dostęp do danych śledzenia po uruchomieniu Pomocnika tworzenia aplikacji internetowych. Jeśli narzędzie nie jest używane do debugowania strony, instrukcje śledzenia zostaną zignorowane, ponieważ wywołanie metody window.debugService zwróci wartość false.
Klasa debugService umożliwia również wyświetlanie danych obiektu JSON przy użyciu okna inspektora pomocnika programowania internetowego. Wyświetlenie listy 4 powoduje utworzenie prostego obiektu JSON zawierającego dane osoby. Po utworzeniu obiektu jest wykonywane wywołanie funkcji inspekcji klasy debugService, aby umożliwić wizualne sprawdzanie obiektu JSON.
Lista 4. Wyświetlanie danych obiektu JSON za pomocą funkcji debugService.inspect.
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);
}
Wywołanie funkcji GetPerson() na stronie lub za pośrednictwem okna bezpośredniego spowoduje wyświetlenie okna dialogowego Inspektor obiektów, jak pokazano na rysunku 5. Właściwości w obiekcie można zmieniać dynamicznie, wyróżniając je, zmieniając wartość wyświetlaną w polu tekstowym Wartość, a następnie klikając link Aktualizuj. Użycie inspektora obiektów ułatwia wyświetlanie danych obiektów JSON i eksperymentowanie z zastosowaniem różnych wartości do właściwości.
Błędy debugowania
Oprócz umożliwienia wyświetlania danych śledzenia i obiektów JSON pomocnik tworzenia aplikacji internetowych może również pomóc w debugowaniu błędów na stronie. Jeśli wystąpi błąd, zostanie wyświetlony monit o kontynuowanie następnego wiersza kodu lub debugowanie skryptu (zobacz Rysunek 6). W oknie dialogowym Błąd skryptu jest wyświetlany pełny stos wywołań oraz numery wierszy, dzięki czemu można łatwo zidentyfikować, gdzie występują problemy w skrycie.
Rysunek 5. Wyświetlanie obiektu JSON przy użyciu okna Inspektor obiektów. (Kliknij, aby wyświetlić obraz w pełnym rozmiarze)
Wybranie opcji debugowania umożliwia wykonywanie instrukcji skryptu bezpośrednio w bezpośrednim oknie Pomocnika tworzenia aplikacji internetowych, aby wyświetlić wartość zmiennych, zapisać obiekty JSON i nie tylko. Jeśli ta sama akcja, która wyzwoliła błąd, zostanie ponownie wykonana, a program Visual Studio 2008 będzie dostępny na maszynie, zostanie wyświetlony monit o uruchomienie sesji debugowania, aby można było przejść przez wiersz kodu według wiersza zgodnie z opisem w poprzedniej sekcji.
Rysunek 6. Okno dialogowe błędu skryptu pomocnika tworzenia aplikacji internetowych (kliknij, aby wyświetlić obraz pełnowymiarowy)
Inspekcja komunikatów żądań i odpowiedzi
Podczas debugowania ASP.NET stron AJAX często przydaje się wyświetlanie komunikatów dotyczących żądań i odpowiedzi wysyłanych między stroną a serwerem. Wyświetlanie zawartości w komunikatach umożliwia sprawdzenie, czy przekazywane są odpowiednie dane, a także rozmiar komunikatów. Pomocnik tworzenia aplikacji internetowych udostępnia doskonałą funkcję rejestratora komunikatów HTTP, która ułatwia wyświetlanie danych jako nieprzetworzonego tekstu lub w bardziej czytelnym formacie.
Aby wyświetlić ASP.NET komunikatów żądań i odpowiedzi AJAX, rejestrator HTTP musi być włączony, wybierając pozycję HTTP Enable HTTP Logging (Włącz rejestrowanie HTTP) z menu Pomocnika tworzenia aplikacji internetowych. Po włączeniu wszystkie komunikaty wysyłane z bieżącej strony można wyświetlić w przeglądarce dzienników HTTP, do której można uzyskać dostęp, wybierając pozycję HTTP Pokaż dzienniki HTTP.
Chociaż wyświetlanie nieprzetworzonego tekstu wysyłanego w każdym komunikacie żądania/odpowiedzi jest z pewnością przydatne (i opcja w Pomocnik tworzenia aplikacji internetowych), często łatwiej jest wyświetlać dane komunikatów w bardziej graficznym formacie. Po włączeniu rejestrowania HTTP i zarejestrowaniu komunikatów dane komunikatów można wyświetlić, klikając dwukrotnie komunikat w przeglądarce dzienników HTTP. Dzięki temu można wyświetlać wszystkie nagłówki skojarzone z wiadomością, a także rzeczywistą zawartość wiadomości. Rysunek 7 przedstawia przykład komunikatu żądania i komunikatu odpowiedzi wyświetlanego w oknie Podgląd dziennika HTTP.
Rysunek 7. Wyświetlanie danych komunikatów dotyczących żądań i odpowiedzi przy użyciu przeglądarki dzienników HTTP. (Kliknij, aby wyświetlić obraz w pełnym rozmiarze)
Przeglądarka dzienników HTTP automatycznie analizuje obiekty JSON i wyświetla je przy użyciu widoku drzewa, dzięki czemu można szybko i łatwo wyświetlać dane właściwości obiektu. Gdy element UpdatePanel jest używany na stronie ASP.NET AJAX, przeglądarka dzieli każdą część wiadomości na poszczególne części, jak pokazano na rysunku 8. Jest to świetna funkcja, która znacznie ułatwia wyświetlanie i zrozumienie, co znajduje się w komunikacie w porównaniu z wyświetlaniem nieprzetworzonych danych komunikatów.
Rysunek 8. Komunikat odpowiedzi UpdatePanel wyświetlany przy użyciu przeglądarki dzienników HTTP. (Kliknij, aby wyświetlić obraz w pełnym rozmiarze)
Istnieje kilka innych narzędzi, które mogą służyć do wyświetlania komunikatów żądań i odpowiedzi oprócz Pomocnika tworzenia aplikacji internetowych. Inną dobrą opcją jest Fiddler, który jest dostępny bezpłatnie na stronie http://www.fiddlertool.com. Chociaż program Fiddler nie zostanie tutaj omówiony, jest to również dobra opcja, gdy trzeba dokładnie sprawdzić nagłówki i dane komunikatów.
Debugowanie za pomocą programów Firefox i Firebug
Chociaż internet Explorer jest nadal najczęściej używaną przeglądarką, inne przeglądarki, takie jak Firefox, stały się dość popularne i są używane coraz bardziej. W związku z tym należy wyświetlić i debugować strony ASP.NET AJAX w przeglądarce Firefox oraz w programie Internet Explorer, aby upewnić się, że aplikacje działają prawidłowo. Chociaż przeglądarka Firefox nie może połączyć się bezpośrednio z programem Visual Studio 2008 na potrzeby debugowania, ma rozszerzenie o nazwie Firebug, które może służyć do debugowania stron. Firebug można pobrać bezpłatnie, przechodząc do .http://www.getfirebug.com
Funkcja Firebug udostępnia w pełni funkcjonalne środowisko debugowania, które może służyć do przechodzenia przez wiersz kodu według wiersza, uzyskiwania dostępu do wszystkich skryptów używanych na stronie, wyświetlania struktur DOM, wyświetlania stylów CSS, a nawet śledzenia zdarzeń występujących na stronie. Po zainstalowaniu można uzyskać dostęp do aplikacji Firebug, wybierając pozycję Narzędzia Firebug Open Firebug z menu Firefox. Podobnie jak pomocnik tworzenia aplikacji internetowych, funkcja Firebug jest używana bezpośrednio w przeglądarce, chociaż może być również używana jako aplikacja autonomiczna.
Po uruchomieniu programu Firebug punkty przerwania można ustawić w dowolnym wierszu pliku JavaScript niezależnie od tego, czy skrypt jest osadzony na stronie, czy nie. Aby ustawić punkt przerwania, najpierw załaduj odpowiednią stronę, którą chcesz debugować w przeglądarce Firefox. Po załadowaniu strony wybierz skrypt do debugowania z listy rozwijanej Skrypty firebuga. Zostaną wyświetlone wszystkie skrypty używane przez stronę. Punkt przerwania jest ustawiany przez kliknięcie w szarym obszarze zasobnika Firebug w wierszu, w którym punkt przerwania powinien być ustawiony tak, jak w programie Visual Studio 2008.
Po ustawieniu punktu przerwania w narzędziu Firebug możesz wykonać akcję wymaganą do wykonania skryptu, który należy debugować, na przykład klikając przycisk lub odświeżając przeglądarkę, aby wyzwolić zdarzenie onLoad. Wykonanie zostanie automatycznie zatrzymane w wierszu zawierającym punkt przerwania. Rysunek 9 przedstawia przykład punktu przerwania, który został wyzwolony w programie Firebug.
Rysunek 9. Obsługa punktów przerwania w firebug. (Kliknij, aby wyświetlić obraz w pełnym rozmiarze)
Po osiągnięciu punktu przerwania możesz przejść do, przejść lub wyjść z kodu za pomocą przycisków strzałek. Podczas przechodzenia przez kod zmienne skryptu są wyświetlane w prawej części debugera, co umożliwia wyświetlanie wartości i przechodzenie do szczegółów obiektów. Aplikacja Firebug zawiera również listę rozwijaną stosu wywołań, aby wyświetlić kroki wykonywania skryptu, które doprowadziły do debugowania bieżącego wiersza.
Firebug zawiera również okno konsoli, które może służyć do testowania różnych instrukcji skryptu, oceny zmiennych i wyświetlania danych wyjściowych śledzenia. Dostęp do niego można uzyskać, klikając kartę Konsola w górnej części okna Firebug. Debugowane strony można również "sprawdzić", aby wyświetlić jego strukturę DOM i zawartość, klikając kartę Inspekcja. Podczas myszy na różnych elementach DOM wyświetlanych w oknie inspektora zostanie wyróżniona odpowiednia część strony, co ułatwia sprawdzenie, gdzie element jest używany na stronie. Wartości atrybutów skojarzone z danym elementem można zmienić w celu eksperymentowania z zastosowaniem różnych szerokości, stylów itp. do elementu . Jest to miła funkcja, która pozwala zaoszczędzić na konieczności ciągłego przełączania się między edytorem kodu źródłowego a przeglądarką Firefox, aby zobaczyć, jak proste zmiany wpływają na stronę.
Rysunek 10 przedstawia przykład użycia inspektora DOM do zlokalizowania pola tekstowego o nazwie txtCountry na stronie. Inspektor Firebug może również służyć do wyświetlania stylów CSS używanych na stronie, a także zdarzeń, które występują, takie jak śledzenie ruchów myszy, kliknięć przycisków i nie tylko.
Rysunek 10. Korzystanie z inspektora DOM firmy Firebug. (Kliknij, aby wyświetlić obraz w pełnym rozmiarze)
Firebug zapewnia lekki sposób szybkiego debugowania strony bezpośrednio w przeglądarce Firefox, a także doskonałe narzędzie do sprawdzania różnych elementów na stronie.
Obsługa debugowania w technologii ASP.NET AJAX
Biblioteka ASP.NET AJAX zawiera wiele różnych klas, których można użyć do uproszczenia procesu dodawania funkcji AJAX do strony internetowej. Za pomocą tych klas można zlokalizować elementy na stronie i manipulować nimi, dodawać nowe kontrolki, wywoływać usługi sieci Web, a nawet obsługiwać zdarzenia. Biblioteka ASP.NET AJAX zawiera również klasy, których można użyć do ulepszenia procesu debugowania stron. W tej sekcji poznasz klasę Sys.Debug i zobaczysz, jak można jej używać w aplikacjach.
Korzystanie z klasy Sys.Debug
Klasa Sys.Debug (klasa JavaScript znajdująca się w przestrzeni nazw sys) może służyć do wykonywania kilku różnych funkcji, w tym zapisywania danych wyjściowych śledzenia, wykonywania asercji kodu i wymuszania niepowodzenia kodu, aby można było go debugować. Jest on szeroko używany w plikach debugowania biblioteki AJAX ASP.NET (zainstalowanych w folderze C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025\Microsoft DomyślnieajaxLibrary\System.Web.Extensions\1.0.61025.0) do wykonywania testów warunkowych (nazywanych asercją), które zapewniają prawidłowe przekazywanie parametrów do funkcji, które obiekty zawierają oczekiwane dane i zapisują instrukcje śledzenia.
Klasa Sys.Debug uwidacznia kilka różnych funkcji, których można użyć do obsługi śledzenia, asercji kodu lub błędów, jak pokazano w tabeli 1.
Tabela 1. Funkcje klasy Sys.Debug.
| Nazwa funkcji | Opis |
|---|---|
| assert(warunek, komunikat, displayCaller) | Potwierdza, że parametr warunku ma wartość true. Jeśli testowany warunek ma wartość false, zostanie użyte pole komunikatu w celu wyświetlenia wartości parametru komunikatu. Jeśli parametr displayCaller ma wartość true, metoda wyświetla również informacje o obiekcie wywołującym. |
| clearTrace() | Usuwa dane wyjściowe instrukcji z operacji śledzenia. |
| fail(message) | Powoduje zatrzymanie wykonywania programu i przerwanie debugera. Parametr komunikatu może służyć do podania przyczyny błędu. |
| trace(message) | Zapisuje parametr komunikatu w danych wyjściowych śledzenia. |
| traceDump(obiekt, nazwa) | Generuje dane obiektu w formacie czytelnym. Za pomocą parametru name można podać etykietę zrzutu śledzenia. Wszystkie obiekty podrzędne w obiekcie, które są po cenach dumpingowych, zostaną domyślnie zapisane. |
Śledzenie po stronie klienta może być używane w taki sam sposób, jak funkcje śledzenia dostępne w ASP.NET. Umożliwia łatwe wyświetlanie różnych komunikatów bez przerywania przepływu aplikacji. Lista 5 przedstawia przykład użycia funkcji Sys.Debug.trace do zapisu w dzienniku śledzenia. Ta funkcja po prostu pobiera komunikat, który powinien zostać zapisany jako parametr.
Lista 5. Za pomocą funkcji Sys.Debug.trace.
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);
}
Jeśli wykonasz kod wyświetlany na liście 5, żadne dane wyjściowe śledzenia nie będą widoczne na stronie. Jedynym sposobem wyświetlenia go jest użycie okna konsoli dostępnego w programie Visual Studio .NET, Pomocnik tworzenia aplikacji internetowych lub Firebug. Jeśli chcesz wyświetlić dane wyjściowe śledzenia na stronie, musisz dodać tag TextArea i podać mu identyfikator traceConsole, jak pokazano poniżej:
<textArea id="TraceConsole" rows="10" cols="50"></textArea>
Wszystkie instrukcje Sys.Debug.trace na stronie zostaną zapisane w polu TraceConsole TextArea.
W przypadkach, gdy chcesz wyświetlić dane zawarte w obiekcie JSON, możesz użyć funkcji traceDump klasy Sys.Debug. Ta funkcja przyjmuje dwa parametry, w tym obiekt, który powinien zostać porzucony do konsoli śledzenia i nazwę, która może służyć do identyfikowania obiektu w danych wyjściowych śledzenia. Lista 6 pokazuje przykład użycia funkcji traceDump.
Lista 6. Za pomocą funkcji Sys.Debug.traceDump.
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());
}
Rysunek 11 przedstawia dane wyjściowe z wywołania funkcji Sys.Debug.traceDump. Zwróć uwagę, że oprócz zapisywania danych obiektu Person zapisuje również dane obiektu podrzędnego Address.
Oprócz śledzenia można również użyć klasy Sys.Debug do wykonywania asercji kodu. Asercji służą do testowania, czy określone warunki są spełnione podczas działania aplikacji. Wersja debugowania skryptów biblioteki AJAX ASP.NET zawiera kilka instrukcji potwierdzenia w celu przetestowania różnych warunków.
Lista 7 przedstawia przykład użycia funkcji Sys.Debug.assert do przetestowania warunku. Kod sprawdza, czy obiekt Address ma wartość null przed zaktualizowaniem obiektu Person.
Rysunek 11. Dane wyjściowe funkcji Sys.Debug.traceDump. (Kliknij, aby wyświetlić obraz w pełnym rozmiarze)
Lista 7. Korzystanie z funkcji debug.assert.
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());
}
Przekazywane są trzy parametry, w tym warunek do oceny, komunikat do wyświetlenia, jeśli asercji zwraca wartość false i czy powinny być wyświetlane informacje o obiekcie wywołującym. W przypadkach, gdy asercji nie powiedzie się, komunikat zostanie wyświetlony, a także informacje wywołujące, jeśli trzeci parametr miał wartość true. Rysunek 12 przedstawia przykład okna dialogowego niepowodzenia, które pojawia się, jeśli potwierdzenie pokazane na liście 7 kończy się niepowodzeniem.
Końcowa funkcja, która zostanie omówiona, to Sys.Debug.fail. Jeśli chcesz wymusić niepowodzenie kodu w określonym wierszu skryptu, możesz dodać wywołanie Sys.Debug.fail zamiast instrukcji debugera zwykle używanej w aplikacjach JavaScript. Funkcja Sys.Debug.fail akceptuje pojedynczy parametr ciągu, który reprezentuje przyczynę błędu, jak pokazano poniżej:
Sys.Debug.fail("My forced failure of script.");
Rysunek 12. Komunikat o błędzie Sys.Debug.assert. (Kliknij, aby wyświetlić obraz w pełnym rozmiarze)
Po napotkaniu instrukcji Sys.Debug.fail podczas wykonywania skryptu wartość parametru komunikatu zostanie wyświetlona w konsoli aplikacji debugowania, takiej jak Visual Studio 2008, i zostanie wyświetlony monit o debugowanie aplikacji. Jednym z przypadków, w których może to być dość przydatne, jest to, że nie można ustawić punktu przerwania za pomocą programu Visual Studio 2008 w skryscie wbudowanym, ale chcesz, aby kod zatrzymał się w określonym wierszu, aby można było sprawdzić wartość zmiennych.
Opis właściwości ScriptMode kontrolki ScriptMode kontrolki ScriptManager
Biblioteka ASP.NET AJAX zawiera wersje skryptów debugowania i wydania zainstalowane w folderze C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025\MicrosoftAjaxLibrary\System.Web.Extensions\1.0.61025.0 domyślnie. Skrypty debugowania są ładnie sformatowane, łatwe do odczytania i mają kilka wywołań Sys.Debug.assert rozrzuconych w obrębie tych skryptów, podczas gdy skrypty wydania mają białe znaki i używają klasy Sys.Debug oszczędnie, aby zminimalizować ich całkowity rozmiar.
Kontrolka ScriptManager dodana do stron AJAX ASP.NET odczytuje atrybut debugowania elementu kompilacji w web.config w celu określenia wersji skryptów biblioteki do załadowania. Można jednak kontrolować, czy skrypty debugowania lub wydania są ładowane (skrypty biblioteki lub własne skrypty niestandardowe), zmieniając właściwość ScriptMode. ScriptMode akceptuje wyliczenie ScriptMode, którego elementy członkowskie obejmują auto, debugowanie, wydanie i dziedziczenie.
Parametr ScriptMode domyślnie ma wartość Auto, co oznacza, że scriptManager sprawdzi atrybut debugowania w web.config. Jeśli debugowanie ma wartość false, program ScriptManager załaduje wersję wydania skryptów biblioteki AJAX ASP.NET. Jeśli debugowanie ma wartość true, zostanie załadowana wersja debugowania skryptów. Zmiana właściwości ScriptMode na Release lub Debug spowoduje wymusi załadowanie odpowiednich skryptów przez scriptManager niezależnie od wartości atrybutu debugowania w web.config. Lista 8 przedstawia przykład użycia kontrolki ScriptManager do ładowania skryptów debugowania z biblioteki AJAX ASP.NET.
Lista 8. Ładowanie skryptów debugowania przy użyciu klasy ScriptManager.
<asp:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug"></asp:ScriptManager>
Możesz również załadować różne wersje (debugowanie lub wydawanie) własnych skryptów niestandardowych przy użyciu właściwości Scripts programu ScriptManager wraz ze składnikiem ScriptReference, jak pokazano na liście 9.
Lista 9. Ładowanie skryptów niestandardowych przy użyciu klasy ScriptManager.
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Path="~/Scripts/Person.js" ScriptMode="Debug"/>
</Scripts>
</asp:ScriptManager>
Uwaga
Jeśli ładujesz skrypty niestandardowe przy użyciu składnika ScriptReference, po zakończeniu ładowania skryptu musisz powiadomić skrypt o zakończeniu ładowania skryptu przez dodanie następującego kodu w dolnej części skryptu:
if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();
Kod pokazany na liście 9 nakazuje scriptManager wyszukanie wersji debugowania skryptu Person, aby automatycznie wyszukał Person.debug.js zamiast Person.js. Jeśli plik Person.debug.js nie zostanie znaleziony, zostanie zgłoszony błąd.
W przypadkach, gdy chcesz załadować wersję debugowania lub wydania niestandardowego skryptu na podstawie wartości właściwości ScriptMode ustawionej w kontrolce ScriptManager, możesz ustawić właściwość ScriptMode kontrolki ScriptReference na Dziedzicz. Spowoduje to załadowanie odpowiedniej wersji skryptu niestandardowego na podstawie właściwości ScriptMode scriptMode scriptManager, jak pokazano na liście 10. Ponieważ właściwość ScriptMode kontrolki ScriptManager jest ustawiona na Debugowanie, skrypt Person.debug.js zostanie załadowany i użyty na stronie.
Lista 10. Dziedziczenie elementu ScriptMode z klasy ScriptManager dla skryptów niestandardowych.
<asp:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug">
<Scripts>
<asp:ScriptReference Path="~/Scripts/Person.js" ScriptMode="Inherit"/>
</Scripts>
</asp:ScriptManager>
Korzystając z właściwości ScriptMode, można łatwiej debugować aplikacje i uprościć ogólny proces. Skrypty wydania biblioteki AJAX ASP.NET są dość trudne do przekroczania i odczytywania, ponieważ formatowanie kodu zostało usunięte, podczas gdy skrypty debugowania są formatowane specjalnie do celów debugowania.
Podsumowanie
Technologia AJAX firmy Microsoft ASP.NET stanowi solidną podstawę do tworzenia aplikacji z obsługą technologii AJAX, które mogą zwiększyć ogólne środowisko użytkownika końcowego. Jednak podobnie jak w przypadku każdej technologii programowania, błędy i inne problemy z aplikacjami z pewnością wystąpią. Znajomość różnych dostępnych opcji debugowania może zaoszczędzić dużo czasu i spowodować bardziej stabilny produkt.
W tym artykule przedstawiono kilka różnych technik debugowania ASP.NET stron AJAX, w tym programu Internet Explorer z programem Visual Studio 2008, pomocnikem tworzenia aplikacji internetowych i narzędziem Firebug. Te narzędzia mogą uprościć ogólny proces debugowania, ponieważ można uzyskać dostęp do danych zmiennych, przejść przez wiersz kodu według wiersza i wyświetlić instrukcje śledzenia. Oprócz omówionych różnych narzędzi debugowania pokazano również, jak można używać klasy Sys.Debug biblioteki ASP.NET AJAX w aplikacji oraz jak można użyć klasy ScriptManager do ładowania wersji debugowania lub wydawania skryptów.
Życiorys
Dan Wahlin (Microsoft Most Valuable Professional for ASP.NET and XML Web Services) to instruktor rozwoju platformy .NET i konsultant architektury w witrynie Interface Technical Training (www.interfacett.com). Dan założył XML dla witryny internetowej ASP.NET Developers (www.XMLforASP.NET), jest w Biurze Prelegenta INETA i przemawia na kilku konferencjach. Dan jest współautorem 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 i autorem XML dla deweloperów ASP.NET (Sams). Kiedy nie pisze kodu, artykułów lub książek, Dan lubi pisać i nagrywać muzykę i grać w golfa i koszykówkę z żoną i dziećmi.
Scott Cate pracuje z technologiami internetowymi firmy Microsoft od 1997 roku i jest prezesem myKB.com (www.myKB.com), gdzie specjalizuje się w pisaniu ASP.NET opartych na aplikacjach opartych na rozwiązaniach opartych na bazie wiedzy. Scott może skontaktować się za pośrednictwem poczty e-mail na scott.cate@myKB.com stronie lub na swoim blogu na ScottCate.com