Informazioni sulle funzionalità di debug ASP.NET AJAX

di Scott Cate

La possibilità di eseguire il debug del codice è una competenza che ogni sviluppatore deve avere nel proprio arsenale indipendentemente dalla tecnologia in uso. Anche se molti sviluppatori sono abituati a usare Visual Studio .NET o Web Developer Express per eseguire il debug di applicazioni ASP.NET che usano codice VB.NET o C#, alcuni non sono consapevoli che è anche estremamente utile per il debug di codice lato client, ad esempio JavaScript. Lo stesso tipo di tecniche usate per eseguire il debug di applicazioni .NET può essere applicato anche alle applicazioni abilitate per AJAX e in modo più specifico ASP.NET applicazioni AJAX.

Debugging delle applicazioni ASP.NET AJAX

Dan Wahlin

La possibilità di eseguire il debug del codice è una competenza che ogni sviluppatore deve avere nel proprio arsenale indipendentemente dalla tecnologia in uso. Va senza dire che comprendere le diverse opzioni di debug disponibili può risparmiare una notevole quantità di tempo su un progetto e forse anche qualche mal di testa. Anche se molti sviluppatori sono abituati a usare Visual Studio .NET o Web Developer Express per eseguire il debug di applicazioni ASP.NET che usano codice VB.NET o C#, alcuni non sono consapevoli che è anche estremamente utile per il debug di codice lato client, ad esempio JavaScript. Lo stesso tipo di tecniche usate per eseguire il debug di applicazioni .NET può essere applicato anche alle applicazioni abilitate per AJAX e in modo più specifico ASP.NET applicazioni AJAX.

In questo articolo verrà illustrato come usare Visual Studio 2008 e diversi altri strumenti per eseguire il debug di applicazioni ASP.NET AJAX per individuare rapidamente bug e altri problemi. Questa discussione includerà informazioni sull'abilitazione di Internet Explorer 6 o versione successiva per il debug, usando Visual Studio 2008 e Esplora script per eseguire il codice e l'uso di altri strumenti gratuiti, ad esempio l'helper per lo sviluppo Web. Si apprenderà anche come eseguire il debug di ASP.NET applicazioni AJAX in Firefox usando un'estensione denominata Firebug che consente di eseguire il codice JavaScript direttamente nel browser senza altri strumenti. Infine, verranno presentate le classi nella libreria AJAX ASP.NET che può essere utile per varie attività di debug, ad esempio le istruzioni di traccia e di asserzione del codice.

Prima di provare a eseguire il debug delle pagine visualizzate in Internet Explorer, è necessario eseguire alcuni passaggi di base per abilitarlo per il debug. Verranno ora esaminati alcuni requisiti di configurazione di base che devono essere eseguiti per iniziare.

Configurazione di Internet Explorer per il debug

La maggior parte delle persone non è interessata a vedere i problemi di JavaScript rilevati in un sito Web visualizzato con Internet Explorer. In realtà, l'utente medio non sa nemmeno cosa fare se ha visualizzato un messaggio di errore. Di conseguenza, le opzioni di debug vengono disattivate per impostazione predefinita nel browser. Tuttavia, è molto semplice attivare il debug e usarlo durante lo sviluppo di nuove applicazioni AJAX.

Per abilitare la funzionalità di debug, passare a Strumenti Opzioni Internet dal menu Internet Explorer e selezionare la scheda Avanzate. Nella sezione Esplorazione assicurarsi che gli elementi seguenti siano deselezionati:

• Disabilitare il debug di script (Internet Explorer)
• Disabilitare il debug di script (altro)

Anche se non è necessario, se si sta tentando di eseguire il debug di un'applicazione, è probabile che eventuali errori JavaScript nella pagina siano immediatamente visibili e evidenti. È possibile forzare la visualizzazione di tutti gli errori con una finestra di messaggio selezionando la casella di controllo "Visualizza una notifica relativa a ogni errore di script". Anche se questa è un'ottima opzione per attivare durante lo sviluppo di un'applicazione, può diventare rapidamente fastidioso se stai solo perusando altri siti Web, perché le tue probabilità di riscontrare errori JavaScript sono piuttosto buoni.

Nella figura 1 viene illustrato l'aspetto della finestra di dialogo avanzata di Internet Explorer dopo che è stata configurata correttamente per il debug.

Figura 1: Configurazione di Internet Explorer per il debug. (Fare clic per visualizzare l'immagine a dimensione intera)

Dopo aver attivato il debug, verrà visualizzata una nuova voce di menu nel menu Visualizza denominato Debugger di script. Sono disponibili due opzioni tra cui Apri e Interrompi alla prossima istruzione. Quando si seleziona Apri, verrà richiesto di eseguire il debug della pagina in Visual Studio 2008 . Si noti che Visual Web Developer Express può essere usato anche per il debug. Se Visual Studio .NET è attualmente in esecuzione, è possibile scegliere di usare tale istanza o di creare una nuova istanza. Quando si seleziona Interrompi in istruzione successiva, verrà richiesto di eseguire il debug della pagina quando viene eseguito il codice JavaScript. Se il codice JavaScript viene eseguito nell'evento onLoad della pagina, è possibile aggiornare la pagina per attivare una sessione di debug. Se il codice JavaScript viene eseguito dopo aver fatto clic su un pulsante, il debugger verrà eseguito immediatamente dopo aver fatto clic sul pulsante.

Anche se la sezione successiva illustra come eseguire il debug di una pagina ASP.NET AJAX direttamente da Visual Studio 2008, l'uso dell'opzione Debugger di script di Internet Explorer è utile quando una pagina è già aperta e si vuole esaminarla più completamente.

Debug con Visual Studio 2008

Visual Studio 2008 offre funzionalità di debug che gli sviluppatori di tutto il mondo si basano quotidianamente per eseguire il debug di applicazioni .NET. Il debugger predefinito consente di eseguire il codice, visualizzare i dati degli oggetti, controllare le variabili specifiche, monitorare lo stack di chiamate e molto altro ancora. Oltre a eseguire il debug di codice VB.NET o C#, il debugger è utile anche per il debug ASP.NET applicazioni AJAX e consente di scorrere la riga di codice JavaScript per riga. I dettagli che seguono sono incentrati sulle tecniche che possono essere usate per eseguire il debug dei file di script sul lato client anziché fornire un discorso sul processo generale di debug delle applicazioni con Visual Studio 2008.

Il processo di debug di una pagina in Visual Studio 2008 può essere avviato in diversi modi. In primo luogo, è possibile usare l'opzione Debugger di script di Internet Explorer menzionata nella sezione precedente. Questo funziona bene quando una pagina è già caricata nel browser e si vuole avviare il debug. In alternativa, è possibile fare clic con il pulsante destro del mouse su una pagina .aspx in Esplora soluzioni e scegliere Imposta come pagina iniziale dal menu. Se si è abituati a eseguire il debug di pagine ASP.NET, probabilmente l'avete già fatto prima. Dopo aver premuto F5, è possibile eseguire il debug della pagina. Tuttavia, anche se in genere è possibile impostare un punto di interruzione ovunque si desideri nel codice VB.NET o C#, questo non è sempre il caso con JavaScript, come si vedrà di seguito.

Script incorporati e esterni

Il debugger di Visual Studio 2008 considera JavaScript incorporato in una pagina diversa dai file JavaScript esterni. Con i file di script esterni, è possibile aprire il file e impostare un punto di interruzione in qualsiasi riga scelta. I punti di interruzione possono essere impostati facendo clic nell'area della barra grigia a sinistra della finestra dell'editor di codice. Quando JavaScript viene incorporato direttamente in una pagina usando il <script> tag , l'impostazione di un punto di interruzione facendo clic nell'area della barra grigia non è un'opzione. I tentativi di impostare un punto di interruzione su una riga di script incorporato genereranno un avviso che indica che questo non è un percorso valido per un punto di interruzione.

Per risolvere questo problema, spostare il codice in un file di .js esterno e farvi riferimento usando l'attributo src del <tag script> :

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

Cosa accade se lo spostamento del codice in un file esterno non è un'opzione o richiede più lavoro di quanto vale la pena? Anche se non è possibile impostare un punto di interruzione usando l'editor, è possibile aggiungere l'istruzione del debugger direttamente nel codice in cui si vuole avviare il debug. È anche possibile usare la classe Sys.Debug disponibile nella libreria ASP.NET AJAX per forzare l'avvio del debug. Altre informazioni sulla classe Sys.Debug sono disponibili più avanti in questo articolo.

Un esempio di utilizzo della parola chiave è illustrato nell'elenco debugger 1. In questo esempio il debugger si interrompe subito prima di eseguire una chiamata a una funzione di aggiornamento.

Elenco 1. Utilizzare la parola chiave "debugger" per forzare l'interruzione del debugger .NET di 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);
}

Quando viene raggiunta l'istruzione del debugger, verrà richiesto di eseguire il debug della pagina usando Visual Studio .NET ed eseguire il codice passo passo. Durante questa operazione, è possibile che si verifichi un problema con l'accesso ai file di script della libreria ASP.NET AJAX usati nella pagina, quindi esamineremo l'uso di Esplora script di Visual Studio .NET.

Uso di Windows .NET di Visual Studio per il debug

Dopo l'avvio di una sessione di debug e si inizia a seguire il codice usando la chiave F11 predefinita, è possibile che venga visualizzata la finestra di dialogo di errore illustrata nella figura 2, a meno che tutti i file di script usati nella pagina non siano aperti e disponibili per il debug.

Figura 2: Finestra di dialogo di errore visualizzata quando non è disponibile codice sorgente per il debug. (Fare clic per visualizzare l'immagine a dimensione intera)

Questa finestra di dialogo viene visualizzata perché Visual Studio .NET non è sicuro di come accedere al codice sorgente di alcuni degli script a cui fa riferimento la pagina. Anche se questo può essere piuttosto frustrante in un primo momento, c'è una semplice correzione. Dopo aver avviato una sessione di debug e aver raggiunto un punto di interruzione, passare alla finestra Debug di Esplora script di Windows nel menu di Visual Studio 2008 oppure usare il tasto di scelta rapida CTRL+ALT+N.

Esplora script può essere usato per visualizzare tutti gli script usati in una pagina e aprirli nell'editor di codice. Quando Esplora Script è aperto, fare doppio clic sulla pagina .aspx attualmente in debug per aprirla nella finestra dell'editor di codice. Eseguire la stessa azione per tutti gli altri script visualizzati in Esplora script. Quando tutti gli script sono aperti nella finestra del codice, è possibile premere F11 (e usare gli altri tasti di scelta rapida di debug) per eseguire il codice. La figura 3 mostra un esempio di Esplora script. Elenca il file corrente di cui è in corso il debug (Demo.aspx) e due script personalizzati e due script inseriti dinamicamente nella pagina da ASP.NET AJAX ScriptManager.

Figura 3. Esplora script consente di accedere facilmente agli script usati in una pagina. (Fare clic per visualizzare l'immagine a dimensione intera)

È anche possibile usare diverse finestre per fornire informazioni utili durante l'esecuzione del codice in una pagina. Ad esempio, è possibile usare la finestra Variabili locali per visualizzare i valori di variabili diverse usate nella pagina, la finestra Immediata per valutare variabili o condizioni specifiche e visualizzare l'output. È anche possibile usare la finestra Output per visualizzare le istruzioni di traccia scritte usando la funzione Sys.Debug.trace (che verrà illustrata più avanti in questo articolo) o la funzione Debug.writeln di Internet Explorer.

Quando si esegue il codice passo passo con il debugger, è possibile passare il cursore sulle variabili per visualizzare il valore assegnato. Tuttavia, il debugger di script occasionalmente non mostrerà nulla mentre si passa il mouse su una determinata variabile JavaScript. Per visualizzare il valore, evidenziare l'istruzione o la variabile che si sta tentando di visualizzare nella finestra dell'editor di codice e quindi passare il mouse su di esso. Anche se questa tecnica non funziona in ogni situazione, molte volte sarà possibile visualizzare il valore senza dover cercare in una finestra di debug diversa, ad esempio la finestra Variabili locali.

Un'esercitazione video che illustra alcune delle funzionalità descritte qui può essere visualizzata all'indirizzo http://www.xmlforasp.net.

Debug con l'helper per lo sviluppo Web

Anche se Visual Studio 2008 (e Visual Web Developer Express 2008) sono strumenti di debug molto capaci, sono disponibili opzioni aggiuntive che possono essere usate anche più leggere. Uno degli strumenti più recenti da rilasciare è l'helper per lo sviluppo Web. Nikhil Kothari (uno dei principali architetti ASP.NET AJAX di Microsoft) ha scritto questo eccellente strumento che può eseguire molte attività diverse dal semplice debug alla visualizzazione di messaggi di richiesta e risposta HTTP.

L'helper per lo sviluppo Web può essere usato direttamente all'interno di Internet Explorer, che semplifica l'uso. Si avvia selezionando Strumenti Helper per lo sviluppo Web dal menu di Internet Explorer. Verrà aperto lo strumento nella parte inferiore del browser, che è bello perché non è necessario lasciare il browser per eseguire diverse attività, ad esempio la registrazione di richieste HTTP e messaggi di risposta. La figura 4 mostra l'aspetto dell'helper sviluppo Web in azione.

Figura 4: Helper sviluppo Web (fare clic per visualizzare l'immagine a dimensione intera)

L'assistente dello sviluppo web non è uno strumento che verrà usato per scorrere il codice riga per riga come con Visual Studio 2008. Tuttavia, può essere usato per visualizzare l'output di traccia, valutare facilmente le variabili in uno script o esplorare i dati che si trovano all'interno di un oggetto JSON. È anche molto utile per visualizzare i dati passati da e verso una pagina ASP.NET AJAX e un server.

Quando l'helper per lo sviluppo Web è aperto in Internet Explorer, è necessario abilitare il debug di script selezionando Script Enable Script Debugging (Abilita debug script) dal menu helper sviluppo Web, come illustrato in precedenza nella figura 4. Ciò consente allo strumento di intercettare gli errori che si verificano durante l'esecuzione di una pagina. Consente inoltre di accedere facilmente ai messaggi di traccia restituiti nella pagina. Per visualizzare le informazioni di traccia o eseguire comandi script per testare funzioni diverse all'interno di una pagina, selezionare Script Show Script Console (Mostra console script) dal menu Helper per lo sviluppo Web. In questo modo è possibile accedere a una finestra di comando e a una semplice finestra immediata.

Visualizzazione di messaggi di traccia e dati oggetto JSON

La finestra immediata può essere usata per eseguire comandi script o anche caricare o salvare script usati per testare funzioni diverse in una pagina. Nella finestra di comando vengono visualizzati messaggi di traccia o debug scritti dalla pagina visualizzata. L'elenco 2 mostra come scrivere un messaggio di traccia usando la funzione Debug.writeln di Internet Explorer.

Lista 2. Scrittura di un messaggio di traccia sul lato client tramite la classe 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);
}

Se la proprietà LastName contiene un valore Doe, l'helper sviluppo Web visualizzerà il messaggio "Person name: Doe" nella finestra di comando della console di script (presupponendo che il debug sia stato abilitato). Web Development Helper aggiunge anche un oggetto debugService di primo livello in pagine che possono essere usate per scrivere informazioni di traccia o visualizzare il contenuto degli oggetti JSON. L'elenco 3 mostra un esempio di utilizzo della funzione di traccia della classe debugService.

Elenco 3. Uso della classe debugService dell'helper per lo sviluppo Web per scrivere un messaggio di traccia.

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);
}

Una caratteristica interessante della classe debugService è che funzionerà anche se il debug non è abilitato in Internet Explorer, semplificando sempre l'accesso ai dati di traccia quando è in esecuzione l'helper per lo sviluppo Web. Quando lo strumento non viene usato per eseguire il debug di una pagina, le istruzioni di traccia verranno ignorate perché la chiamata a window.debugService restituirà false.

La classe debugService consente anche di visualizzare i dati dell'oggetto JSON usando la finestra di controllo dell'helper per lo sviluppo Web. L'elenco 4 crea un semplice oggetto JSON contenente i dati delle persone. Dopo aver creato l'oggetto, viene effettuata una chiamata alla funzione inspect della classe debugService per consentire l'ispezione visiva dell'oggetto JSON.

Elenco 4. Uso della funzione debugService.inspect per visualizzare i dati dell'oggetto JSON.

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);
}

La chiamata alla funzione GetPerson() nella pagina o nella finestra immediata comporterà la visualizzazione della finestra di dialogo Controllo oggetti, come illustrato nella figura 5. Le proprietà all'interno dell'oggetto possono essere modificate in modo dinamico evidenziandole, modificando il valore visualizzato nella casella di testo Valore e quindi facendo clic sul collegamento Aggiorna. L'uso di Object Inspector semplifica la visualizzazione dei dati degli oggetti JSON e l'applicazione di valori diversi alle proprietà.

Errori di debug

Oltre a consentire la visualizzazione dei dati di traccia e degli oggetti JSON, l'helper sviluppo Web può essere utile anche per il debug degli errori in una pagina. Se viene rilevato un errore, verrà richiesto di continuare con la riga di codice successiva o di eseguire il debug dello script (vedere la figura 6). La finestra di dialogo Errore script mostra lo stack di chiamate completo e i numeri di riga, in modo da poter identificare facilmente dove si trovano i problemi all'interno di uno script.

Figura 5: Uso della finestra Controllo oggetti per visualizzare un oggetto JSON. (Fare clic per visualizzare l'immagine a dimensione intera)

La selezione dell'opzione di debug consente di eseguire istruzioni script direttamente nella finestra immediata dell'helper per lo sviluppo Web per visualizzare il valore delle variabili, scrivere oggetti JSON e altro ancora. Se la stessa azione che ha attivato l'errore viene eseguita di nuovo e Visual Studio 2008 è disponibile nel computer, verrà richiesto di avviare una sessione di debug in modo che sia possibile scorrere la riga di codice per riga, come illustrato nella sezione precedente.

Figura 6: Finestra di dialogo dell'errore dello script dello strumento di sviluppo Web (fare clic per visualizzare l'immagine a schermo intero)

Controllo dei messaggi di richiesta e risposta

Durante il debug ASP.NET pagine AJAX è spesso utile visualizzare i messaggi di richiesta e risposta inviati tra una pagina e un server. La visualizzazione del contenuto all'interno dei messaggi consente di verificare se i dati appropriati vengono passati e le dimensioni dei messaggi. Lo strumento Development Helper per il Web offre una funzionalità eccellente di registrazione dei messaggi HTTP che semplifica la visualizzazione dei dati come testo non elaborato o in un formato più leggibile.

Per visualizzare ASP.NET messaggi di richiesta e risposta AJAX, è necessario abilitare il logger HTTP selezionando HTTP Enable HTTP Logging (Abilita registrazione HTTP HTTP) dal menu Helper per lo sviluppo Web. Dopo l'abilitazione, tutti i messaggi inviati dalla pagina corrente possono essere visualizzati nel visualizzatore di log HTTP a cui è possibile accedere selezionando HTTP Mostra log HTTP.

Anche se la visualizzazione del testo non elaborato inviato in ogni messaggio di richiesta/risposta è certamente utile (e un'opzione nell'helper sviluppo Web), spesso è più facile visualizzare i dati dei messaggi in un formato più grafico. Dopo aver abilitato la registrazione HTTP e aver registrato i messaggi, i dati dei messaggi possono essere visualizzati facendo doppio clic sul messaggio nel visualizzatore log HTTP. In questo modo è possibile visualizzare tutte le intestazioni associate a un messaggio e il contenuto effettivo del messaggio. La figura 7 mostra un esempio di messaggio di richiesta e messaggio di risposta visualizzato nella finestra Visualizzatore log HTTP.

Figura 7: Uso del Visualizzatore log HTTP per visualizzare i dati dei messaggi di richiesta e risposta. (Fare clic per visualizzare l'immagine a dimensione intera)

Il Visualizzatore log HTTP analizza automaticamente gli oggetti JSON e li visualizza usando una visualizzazione albero che semplifica la visualizzazione dei dati delle proprietà dell'oggetto. Quando un UpdatePanel viene usato in una pagina ASP.NET AJAX, il visualizzatore suddivide ogni parte del messaggio in singole parti, come illustrato nella figura 8. Si tratta di un'ottima funzionalità che semplifica notevolmente la visualizzazione e la comprensione di ciò che si trova nel messaggio rispetto alla visualizzazione dei dati non elaborati del messaggio.

Figura 8: Messaggio di risposta updatePanel visualizzato usando il Visualizzatore log HTTP. (Fare clic per visualizzare l'immagine a dimensione intera)

Sono disponibili diversi altri strumenti che possono essere usati per visualizzare i messaggi di richiesta e risposta oltre all'helper per lo sviluppo Web. Un'altra buona opzione è Fiddler, disponibile gratuitamente all'indirizzo http://www.fiddlertool.com. Anche se Fiddler non verrà discusso qui, è anche una buona opzione quando è necessario esaminare accuratamente le intestazioni e i dati dei messaggi.

Debug con Firefox e Firebug

Anche se Internet Explorer è ancora il browser più usato, altri browser come Firefox sono diventati abbastanza popolari e vengono usati sempre di più. Di conseguenza, è necessario visualizzare ed eseguire il debug delle pagine ASP.NET AJAX in Firefox e Internet Explorer per assicurarsi che le applicazioni funzionino correttamente. Anche se Firefox non può collegarsi direttamente a Visual Studio 2008 per il debug, ha un'estensione denominata Firebug che può essere usata per eseguire il debug delle pagine. Firebug può essere scaricato gratuitamente passando a http://www.getfirebug.com.

Firebug offre un ambiente di debug completo che può essere usato per scorrere la riga di codice per riga, accedere a tutti gli script usati all'interno di una pagina, visualizzare strutture DOM, visualizzare gli stili CSS e persino tenere traccia degli eventi che si verificano in una pagina. Una volta installato, è possibile accedere a Firebug selezionando Strumenti Firebug Open Firebug dal menu Firefox. Come l'helper per lo sviluppo Web, Firebug viene usato direttamente nel browser, anche se può essere usato anche come applicazione autonoma.

Dopo l'esecuzione di Firebug, i punti di interruzione possono essere impostati in qualsiasi riga di un file JavaScript, indipendentemente dal fatto che lo script sia incorporato in una pagina o meno. Per impostare un punto di interruzione, caricare prima di tutto la pagina appropriata di cui si vuole eseguire il debug in Firefox. Dopo aver caricato la pagina, selezionare lo script di cui eseguire il debug dall'elenco a discesa Script di Firebug. Verranno visualizzati tutti gli script usati dalla pagina. Un punto di interruzione viene impostato facendo clic sull'area grigia di Firebug nella riga in cui deve essere impostato il punto di interruzione, proprio come si farebbe in Visual Studio 2008.

Dopo aver impostato un punto di interruzione in Firebug, è possibile eseguire l'azione necessaria per eseguire lo script che deve essere sottoposto a debug, ad esempio facendo clic su un pulsante o aggiornando il browser per attivare l'evento onLoad. L'esecuzione verrà arrestata automaticamente sulla riga contenente il punto di interruzione. La figura 9 mostra un esempio di punto di interruzione attivato in Firebug.

Figura 9: Gestione dei punti di interruzione in Firebug. (Fare clic per visualizzare l'immagine a dimensione intera)

Una volta raggiunto un punto di interruzione, è possibile entrare nel codice, sorvolare o uscire dal codice usando i pulsanti freccia. Durante l'esecuzione del codice, le variabili di script vengono visualizzate nella parte destra del debugger che consente di visualizzare i valori e di eseguire il drill-down negli oggetti. Firebug include anche un elenco a discesa della pila delle chiamate per visualizzare i passaggi di esecuzione di uno script che hanno condotto all'attuale riga sottoposta a debug.

Firebug include anche una finestra della console che può essere usata per testare differenti istruzioni script, valutare le variabili e visualizzare l'output di traccia. È accessibile facendo clic sulla scheda Console nella parte superiore della finestra Firebug. La pagina sottoposta a debug può anche essere "ispezionata" per visualizzare la struttura e il contenuto DOM facendo clic sulla scheda Ispeziona. Quando si passa il mouse sui diversi elementi DOM visualizzati nella finestra di controllo, la parte appropriata della pagina verrà evidenziata per facilitare la visualizzazione dell'elemento nella pagina. I valori degli attributi associati a un determinato elemento possono essere modificati "live" per sperimentare l'applicazione di larghezze, stili e così via diversi a un elemento. Si tratta di una caratteristica interessante che consente di evitare di dover passare costantemente tra l'editor del codice sorgente e il browser Firefox per visualizzare il modo in cui le modifiche semplici influiscono su una pagina.

La figura 10 mostra un esempio di utilizzo del controllo DOM per individuare una casella di testo denominata txtCountry nella pagina. Il controllo Firebug può essere usato anche per visualizzare gli stili CSS usati in una pagina, nonché gli eventi che si verificano, ad esempio il rilevamento dei movimenti del mouse, i clic dei pulsanti e altro ancora.

Figura 10: Uso del controllo DOM di Firebug. (Fare clic per visualizzare l'immagine a dimensione intera)

Firebug offre un modo leggero per eseguire rapidamente il debug di una pagina direttamente in Firefox, nonché uno strumento eccellente per controllare diversi elementi all'interno della pagina.

Supporto per il debug in ASP.NET AJAX

La libreria AJAX ASP.NET include molte classi diverse che possono essere usate per semplificare il processo di aggiunta di funzionalità AJAX in una pagina Web. È possibile usare queste classi per individuare gli elementi all'interno di una pagina e modificarli, aggiungere nuovi controlli, chiamare Servizi Web e persino gestire gli eventi. La libreria ASP.NET AJAX contiene anche classi che possono essere usate per migliorare il processo di debug delle pagine. In questa sezione verrà presentata la classe Sys.Debug e si vedrà come può essere usata nelle applicazioni.

Uso della classe Sys.Debug

La classe Sys.Debug (una classe JavaScript che si trova nello spazio dei nomi Sys) può essere usata per eseguire diverse funzioni, tra cui la scrittura dell'output di traccia, l'esecuzione di asserzioni di codice e l'imposizione dell'esito negativo del codice in modo che possa essere sottoposto a debug. Viene usato ampiamente nei file di debug della libreria AJAX ASP.NET (installati in C:\Programmi\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025\MicrosoftAjaxLibrary\System.Web.Extensions\1.0.61025.0 per impostazione predefinita) per eseguire test condizionali (denominati asserzioni) che assicurano che i parametri vengano passati correttamente alle funzioni, che gli oggetti contengano i dati previsti e per scrivere istruzioni di tracciamento.

La classe Sys.Debug espone diverse funzioni che possono essere usate per gestire la traccia, le asserzioni di codice o gli errori, come illustrato nella tabella 1.

Tabella 1. Funzioni della classe Sys.Debug.

La traccia sul lato client può essere usata in modo analogo alla funzionalità di traccia disponibile in ASP.NET. Consente di visualizzare facilmente messaggi diversi senza interrompere il flusso dell'applicazione. L'elenco 5 mostra un esempio di utilizzo della funzione Sys.Debug.trace per scrivere nel log di traccia. Questa funzione accetta semplicemente il messaggio che deve essere scritto come parametro.

Elenco 5. Uso della funzione 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);
}

Se si esegue il codice visualizzato nell'elenco 5, non verrà visualizzato alcun output di traccia nella pagina. L'unico modo per vederlo è usare una finestra della console disponibile in Visual Studio .NET, Web Development Helper o Firebug. Se si vuole visualizzare l'output della traccia nella pagina, sarà necessario aggiungere un tag TextArea e assegnargli un ID TraceConsole come illustrato di seguito:

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

Tutte le istruzioni Sys.Debug.trace nella pagina verranno scritte in TraceConsole TextArea.

Nei casi in cui si vogliono visualizzare i dati contenuti in un oggetto JSON, è possibile usare la funzione traceDump della classe Sys.Debug. Questa funzione accetta due parametri, tra cui l'oggetto che deve essere sottoposto a dump nella console di traccia e un nome che può essere usato per identificare l'oggetto nell'output di traccia. L'elenco 6 mostra un esempio di utilizzo della funzione traceDump.

Elenco 6. Uso della funzione 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());
}

La figura 11 mostra l'output della chiamata alla funzione Sys.Debug.traceDump. Si noti che oltre a scrivere i dati dell'oggetto Person, scrive anche i dati del sottooggetto Address.

Oltre alla traccia, la classe Sys.Debug può essere usata anche per eseguire asserzioni di codice. Le asserzioni vengono usate per verificare che vengano soddisfatte condizioni specifiche durante l'esecuzione di un'applicazione. La versione di debug degli script della libreria ASP.NET AJAX contiene diverse istruzioni assert per testare diverse condizioni.

L'elenco 7 mostra un esempio di utilizzo della funzione Sys.Debug.assert per testare una condizione. Il codice verifica se l'oggetto Address è null prima di aggiornare un oggetto Person.

Figura 11: Output della funzione Sys.Debug.traceDump. (Fare clic per visualizzare l'immagine a dimensione intera)

Elenco 7. Uso della funzione 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());
}

Vengono passati tre parametri, inclusa la condizione da valutare, il messaggio da visualizzare se l'asserzione restituisce false e se devono essere visualizzate o meno informazioni sul chiamante. Nei casi in cui un'asserzione ha esito negativo, il messaggio verrà visualizzato e le informazioni sul chiamante se il terzo parametro è true. La figura 12 mostra un esempio della finestra di dialogo di errore visualizzata se l'asserzione mostrata nell'elenco 7 ha esito negativo.

La funzione finale da coprire è Sys.Debug.fail. Quando si desidera forzare l'esito negativo del codice in una determinata riga in uno script, è possibile aggiungere una chiamata Sys.Debug.fail anziché l'istruzione debugger usata in genere nelle applicazioni JavaScript. La funzione Sys.Debug.fail accetta un singolo parametro stringa che rappresenta il motivo dell'errore, come illustrato di seguito:

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

Figura 12: Messaggio di errore Sys.Debug.assert. (Fare clic per visualizzare l'immagine a dimensione intera)

Quando viene rilevata un'istruzione Sys.Debug.fail durante l'esecuzione di uno script, il valore del parametro del messaggio verrà visualizzato nella console di un'applicazione di debug, ad esempio Visual Studio 2008 e verrà richiesto di eseguire il debug dell'applicazione. Un caso in cui questo può essere molto utile è quando non è possibile impostare un punto di interruzione con Visual Studio 2008 in uno script inline, ma si vuole che il codice si arresti su una riga specifica in modo da poter esaminare il valore delle variabili.

Informazioni sulla proprietà ScriptMode del controllo ScriptManager

La libreria ASP.NET AJAX include versioni di script di debug e di release installate in C:\Programmi\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025\MicrosoftAjaxLibrary\System.Web.Extensions\1.0.61025.0 per impostazione predefinita. Gli script di debug sono ben formattati, facili da leggere e hanno diverse chiamate Sys.Debug.assert sparse in tutte le versioni, mentre gli script di versione hanno rimosso gli spazi vuoti e usano la classe Sys.Debug con moderazione per ridurre al minimo le dimensioni complessive.

Il controllo ScriptManager aggiunto a ASP.NET pagine AJAX legge l'attributo di debug dell'elemento di compilazione in web.config per determinare quali versioni degli script di libreria caricare. Tuttavia, è possibile controllare se gli script di debug o versione vengono caricati (script di libreria o script personalizzati) modificando la proprietà ScriptMode. ScriptMode accetta un'enumerazione ScriptMode i cui membri includono Auto, Debug, Release ed Inherit.

Per impostazione predefinita, ScriptMode viene impostato su un valore auto, il che significa che ScriptManager verificherà l'attributo di debug in web.config. Quando il debug è false, ScriptManager caricherà la versione di rilascio degli script della libreria AJAX ASP.NET. Quando il debug è true, verrà caricata la versione di debug degli script. La modifica della proprietà ScriptMode in Release o Debug forza il caricamento degli script appropriati da parte di ScriptManager indipendentemente dal valore dell'attributo di debug in web.config. L'elenco 8 mostra un esempio di utilizzo del controllo ScriptManager per caricare gli script di debug dalla libreria ASP.NET AJAX.

Elenco 8. Caricamento di script di debug con ScriptManager.

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

È anche possibile caricare versioni diverse (debug o versione) degli script personalizzati usando la proprietà ScriptManager insieme al componente ScriptReference, come illustrato nell'elenco 9.

Elenco 9. Caricamento di script personalizzati con ScriptManager.

<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();

Il codice mostrato nell'elenco 9 indica a ScriptManager di cercare una versione di debug dello script Person in modo che cercherà automaticamente Person.debug.js anziché Person.js. Se il file di Person.debug.js non viene trovato, verrà generato un errore.

Nei casi in cui si desidera caricare una versione di debug o versione di uno script personalizzato in base al valore della proprietà ScriptMode impostata nel controllo ScriptManager, è possibile impostare la proprietà ScriptMode del controllo ScriptReference su Inherit. In questo modo la versione corretta dello script personalizzato verrà caricata in base alla proprietà ScriptMode di ScriptManager, come illustrato nell'elenco 10. Poiché la proprietà ScriptMode del controllo ScriptManager è impostata su Debug, lo script Person.debug.js verrà caricato e usato nella pagina.

Elenco 10. Ereditando ScriptMode da ScriptManager per gli script personalizzati.

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

Usando la proprietà ScriptMode in modo appropriato, è possibile eseguire più facilmente il debug delle applicazioni e semplificare il processo complessivo. Gli script di rilascio della libreria AJAX ASP.NET sono piuttosto difficili da eseguire e leggere poiché la formattazione del codice è stata rimossa mentre gli script di debug vengono formattati in modo specifico per scopi di debug.

Conclusione

La tecnologia Microsoft ASP.NET AJAX offre una solida base per la creazione di applicazioni abilitate per AJAX che possono migliorare l'esperienza complessiva dell'utente finale. Tuttavia, come per qualsiasi tecnologia di programmazione, i bug e altri problemi dell'applicazione si verificheranno certamente. Conoscere le diverse opzioni di debug disponibili può risparmiare molto tempo e produrre un prodotto più stabile.

In questo articolo sono state introdotte diverse tecniche per il debug delle pagine ASP.NET AJAX, tra cui Internet Explorer con Visual Studio 2008, Web Development Helper e Firebug. Questi strumenti possono semplificare il processo di debug complessivo perché è possibile accedere ai dati delle variabili, esaminare la riga di codice per riga e visualizzare le istruzioni di traccia. Oltre ai diversi strumenti di debug illustrati, si è anche visto come la classe Sys.Debug della libreria AJAX ASP.NET può essere usata in un'applicazione e come usare la classe ScriptManager per caricare le versioni di debug o di rilascio degli script.

Biografia

Dan Wahlin (Microsoft Most Valuable Professional per ASP.NET e servizi Web XML) è un insegnante di sviluppo .NET e consulente dell'architettura presso Interface Technical Training (www.interfacett.com). Dan ha fondato il sito Web XML for ASP.NET Developers (www.XMLforASP.NET), fa parte del Bureau dei relatori INETA e partecipa a diverse conferenze come relatore. Dan ha co-scritto *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* e ha scritto *XML for ASP.NET Developers* (Sams). Quando non scrive codice, articoli o libri, Dan si diverte a scrivere e registrare musica e giocare a golf e basket con la moglie e i figli.

Scott Cate lavora con le tecnologie Web Microsoft dal 1997 ed è il Presidente di myKB.com (www.myKB.com) dove si è specializzato nella scrittura di applicazioni basate su ASP.NET incentrate sulle soluzioni software della Knowledge Base. Scott può essere contattato via e-mail all'indirizzo scott.cate@myKB.com o tramite il suo blog all'indirizzo ScottCate.com